如何使用ajax显示列表？

Question

为什么点击按钮后什么都没有显示？它也不调用BooksByPublisherId。我做错什么？怎么解决这个问题？

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>

Answer 1

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.