current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.6 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I'm new to ASP .NET, MVC and AngularJS so I'm trying to figure this all out still.

I have a Model called Words.cs which contains:

namespace liveSearch.Models
{
    public class Words
    {
        public int ID { get; set; }
        public string Word{ get; set; }
    }
}

The database is already populated with data and I want to use JavaScript/JQuery to get every Word from the database so I can then manipulate that data in JavaScript etc.

I currently have Razor in my index.cshtml which does:

@{
     foreach (var item in Model)
     {
         <li>
             @Html.DisplayFor(modelItem => item.Word)
         </li>
     }
 }

This works in getting and displaying all Words in the model but I want to get rid of the Razor and use JavaScript/Jquery to get the data instead.

Ideally, I want to get all Words from the DB (I don't care about the IDs) and add it to an array in the scope in the .js file.

The problem is that I can't figure out how to access the DB with JavaScript or AJAX

I think I can use $.get() or $.ajax() but I don't really know how to use it with a DB/model.

I also read a few other posts here on Stackoverflow that said this can be done, but I wasn't able to apply any of those examples to my case for some reason.

share|improve this question
    
So you needto call the WbApi / Controller method from@ajax and use return data andshow it in ui – Yashveer Singh 17 hours ago
    
Why would you want to do that. You can simply assign your model in the view to a javascript array using var words = @Html.Raw(Json.Encode(Model)); (then words[0].Word will return the value of the first Word property in your collection. – Stephen Muecke 16 hours ago
up vote 0 down vote accepted

First off, you will need to create an action method, which returns Json, in your controller. Something like this:

public JsonResult SomeAction()
{
   var list = context.Words.ToArray();
   return Json(list);
}

And then in your view you just use ajax to get the data:

$.ajax({
type: 'GET',
url: '@Url.Action("ControllerName", "SomeAction")',
dataType: 'json',
success: function (data) {
  //the data parameter will be an array of objects. The objects will be of type Words
  //so data[0].Word(javascript) would be equal to list[0].Word in your SomeAction method(C#)
}
});
share|improve this answer
    
contentType: 'application/json; charset=utf-8', is pointless (its a GET and a GET has no body) – Stephen Muecke 16 hours ago
    
You're right, I'll edit it right away. Thank you for the correction. – Kapobajza 16 hours ago
    
I get this error: "Failed to load resource: the server responded with a status of 404 (Not Found)" on the @Url.Action() – user3636407 15 hours ago
    
I just hope that you didn't write "ControllerName" instead of the name of your controller. The @Url.Action is a helper method which(in this case) takes 2 parameters: the first is the name of the controller, and the second is the name of the action. So if the name of your controller(which the action "SomeAction" was defined in) is HomeController, then the @Url.Action would look like this: @Url.Action("Home", "SomeAction") – Kapobajza 15 hours ago
    
Instead of this, you could just write the link to your action: url: '/Home/SomeAction', but this is a more convenient way (because of routing) in asp.net mvc. – Kapobajza 15 hours ago
up vote 0 down vote

You can call this method on page load or button click where you want to get result .

   $.ajax({
    url: "yourControllerMethod",


    dataType: "json",
    success: function(data){
    alert(data)
      // here you will get the json data.
      // now uisng jQuery you can run a loop and show the data where you want to do 
      }
 });
share|improve this answer
    
contentType: 'application/json; charset=utf-8', is pointless (its a GET and a GET has no body) – Stephen Muecke 16 hours ago
    
@StephenMuecke thanks for pointing out mistake edited – Yashveer Singh 16 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.