Display list using ajax

Question

Why after clickin on the button it display's nothing. And it do not invoke BooksByPublisherId. What i missed? How to fix this?

Controller

public class FoodController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult BooksByPublisherId(int id)
    {
        IList<BookModel> modelList = new List<BookModel>();
        modelList.Add(new BookModel { Author = "Jhon", Year = "1970" });
        modelList.Add(new BookModel { Author = "Nick", Year = "1977" });
        modelList.Add(new BookModel { Author = "Joseph", Year = "1978" });
        return Json(modelList, JsonRequestBehavior.AllowGet);
    }
}

Model

public class BookModel
{
    public string Title { get; set; }
    public string Author { get; set; }
    public string Year { get; set; }
    public decimal Price { get; set; }
}

View

@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/knockout-2.2.0.js"></script>

<h2>Index</h2>
<button data-bind="click: capitalizeLastName">Load list</button>
<div class="results">Wait for list</div>

<script>

function AppViewModel() {

this.capitalizeLastName = function () {
    debugger;
    $.ajax({
       cache: false,

            type: "GET",
            url: "Food/BooksByPublisherId",
            data: { "id": id },
            success: function (data) {
            var result = "";
            $.each(data, function (id, book) {
                result += '<b>Title : </b>' + book.Title + '<br />' +
                            '<b> Author :</b>' + book.Author + '<br />' +
                             '<b> Year :</b>' + book.Year + '<br />' +
                              '<b> Price :</b>' + book.Price + '<hr />';
            });
            $('.results').html(result);
        },
        error: function (response) {
            debugger;
            alert('eror');
        }
    });
}
}

ko.applyBindings(new AppViewModel());
</script>

What error are you getting in the browser console? And generate you url's correctly using `'@Url.Action("BooksByPublisherId", "Food")'` — , Feb 20 '16 at 00:22
The only problem i see is i don't see `id` variable defined and initialized t to a value before using it. Other than that, the code looks fine. Also as Stephen mentioned, Always use the helper methods to generate the proper relative url's to your action method. If your js code is inside an external js file, Use the approach mentioned in this [answer](http://stackoverflow.com/questions/34360537/how-do-i-make-js-know-about-the-application-root/34361168#34361168) — Shyju, Feb 20 '16 at 01:49
show us the `data` in `success` event in console view by `console.log(data)` so that it can be diagnosed easily — anand, Feb 20 '16 at 06:16
@Shyju, Yes problem was with id i forget about it. Write answer and i will accept it. — A191919, Feb 21 '16 at 15:59

score 1 · Accepted Answer · edited May 23 '17 at 12:31

The only problem i can see in your code is, you are using a variable called id to build the js object you sent as the data for the ajax call, but it is not declared and initialized any value to it. In that you will get a script error like

Uncaught ReferenceError: id is not defined

Because of this script error, your other js code won't work ! As you see, the error is self explanatory. Just declare a variable id and set some value to it.

var id = 911;
$.ajax({
         type: "GET",
         url: "Food/BooksByPublisherId",
         data: { "id": id },
         // Your existing code

        });

Also i see you have hardcoded the path to your action method. A better approach is to use the Html helper methods like Url.Action method to build the correct relative path to the action method.

url: "@Url.Action("BooksByPublisherId","Food")",

This will work if your js code is inside a razor view. If your code is inside an external js file, you might use the solution explained in this post.

Display list using ajax

1 Answers1