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")' — user3559349
– user3559349, Commented Feb 20, 2016 at 0: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 — Shyju
– Shyju, Commented Feb 20, 2016 at 1:49
show us the data in success event in console view by console.log(data) so that it can be diagnosed easily — anand
– anand, Commented Feb 20, 2016 at 6:16
@Shyju, Yes problem was with id i forget about it. Write answer and i will accept it. — A191919
– A191919, Commented Feb 21, 2016 at 15:59

Community · Accepted Answer · 2017-05-23 12:31:08Z

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.

Collectives™ on Stack Overflow

Display list using ajax

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related