使用Ajax加载分部视图和Json格式的数据(2)_H5之家

using AjaxDataInMVC.Map; using AjaxDataInMVC.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace AjaxDataInMVC.Controllers { public class BookController : Controller { private MyDbContext context; public BookController() { context = new MyDbContext(); context.Configuration.ProxyCreationEnabled = false; } // GET: Book public ActionResult Index() { return View(); } //直接返回布局页的方式：HTML public PartialViewResult GetBookDetailsByID(int id) { List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList(); return PartialView(lstBook); } //Json方式 //public JsonResult GetBookDetailsByID(int id) //{ // List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList(); // return Json(lstBook,JsonRequestBehavior.AllowGet); //} } }

Publisher控制器的Index视图：

@model AjaxDataInMVC.ViewModel.PublisherViewModel @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <script src="http://www.cnblogs.com/caofangsheng/p/~/Scripts/jquery-1.10.2.js"></script> <title>Index</title> </head> <body> @*思路是:在当前页面，点击下拉框，加载分部视图*@ <div> @Html.LabelFor(s=>s.PublisherID) @Html.DropDownListFor(s=>s.PublisherID,Model.PublisherList) </div> <div> </div> <script type="text/javascript"> $(document).ready(function () { $("#PublisherID").change(function () { var id=$("#PublisherID").val(); $.ajax({ url: "/Book/GetBookDetailsByID/" + id, type: "get", dataType: "html", success: function (result) { //html文本方式 $("#myDIV").html(""); $("#myDIV").html(result); //二。Json方式 //$("#myDIV").html(""); //var myHTML = "<ul>"; //$.each(result, function (key, item) { // myHTML += "<li>编号：" + item.BookID + "</li>"; // myHTML += "<li>标题：" + item.Title + "</li>"; // myHTML += "<li>作者：" + item.Auther + "</li>"; // myHTML += "<li>价格：" + item.Price + "</li>"; // myHTML += "<li>时间：" + item.Year + "</li>"; //}) //myHTML +="</ul>" //$("#myDIV").html(myHTML); }, error:function(result){ alert(result.responseText); } }); }); }); </script> </body> </html>

Book控制器的分部视图GetBookDetailsByID：

@model IEnumerable<AjaxDataInMVC.Models.Book> <table> <thead> <tr> <th>BookID</th> <th>Title</th> <th>Auther</th> <th>Price</th> <th>Year</th> </tr> </thead> <tbody> @foreach (var item in Model) { <tr> <td>@item.BookID</td> <td>@item.Title</td> <td>@item.Auther</td> <td>@item.Price</td> <td>@item.Year</td> </tr> } </tbody> </table>

在数据库中写上测试数据，然后先运行一下：

选择：新华大学出版社，的时候，随即加载出了对应的数据。

itdadao-MVC学习系列6--使用Ajax加载分部视图和Json格式的数据

选择：长江日报出版社的时候，加载：

itdadao-MVC学习系列6--使用Ajax加载分部视图和Json格式的数据

现在看看：使用Json方式加载吧：

修改一下Book控制器，和其相关的Publisher控制器的Index视图就可以：

using AjaxDataInMVC.Map; using AjaxDataInMVC.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace AjaxDataInMVC.Controllers { public class BookController : Controller { private MyDbContext context; public BookController() { context = new MyDbContext(); context.Configuration.ProxyCreationEnabled = false; } // GET: Book public ActionResult Index() { return View(); } ////直接返回布局页的方式：HTML //public PartialViewResult GetBookDetailsByID(int id) //{ // List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList(); // return PartialView(lstBook); //} //Json方式 public JsonResult GetBookDetailsByID(int id) { List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList(); return Json(lstBook,JsonRequestBehavior.AllowGet); } } }