首先，新建一个MVC类型的Web项目：
然后在Model文件夹下定义一个Student实体：
public class Student { public int ID { get; set; } public string Name { get; set; } public string Sex { get; set; } public int Age { get; set; } }
然后新建一个Student控制器：
using JsonDataWithMVC.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace JsonDataWithMVC.Controllers { public class StudentController : Controller { // GET: Student public ActionResult Index() { return View(); } /// <summary> /// 通过Json返回数据到前端 /// </summary> /// <returns></returns> public JsonResult _StudentList() { List<Student> stuModel = new List<Student>() { new Student() { ID=1, Name="曹操", Age=1500, Sex="男" }, new Student() { ID=2,Name="孙权",Age=2000,Sex="男" } }; return Json(stuModel,JsonRequestBehavior.AllowGet); } } }
创建对应的Index视图：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div> @*在视图中加载分部视图*@ @Html.Partial("_StudentList") </div> </body> </html>
相对应的_StudentList分部视图：
@model IEnumerable<JsonDataWithMVC.Models.Student> <table class="myTable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> </tbody> </table> @*通过Json返回数据到前端*@ <script src="~/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> $(document).ready(function () { //前台通过Jquery中的getJson方法，调用控制器中的方法，加载数据 $.getJSON("/Student/_StudentList", function (data) { var tr; //把每一行的数据加到table中 //注意：js中智能提示不完全：i < data.length;,,data[i].Name.... for (var i = 0; i < data.length; i++) { tr = $("<tr/>"); tr.append("<td>" + data[i].ID + "</td>"); tr.append("<td>" + data[i].Name + "</td>"); tr.append("<td>" + data[i].Age + "</td>"); tr.append("<td>" + data[i].Sex + "</td>"); //通过css找到table,把数据绑定到table中 $(".myTable").append(tr); } }) }) </script>
编译一下：修改路由为Student控制器，Index方法，运行，我们就可以看到结果了
然后工作中还会遇到直接在视图中加载分部视图。这里我用jquery的load方法，来做，请看我方法二：
在控制器中添加一个方法：
/// <summary> /// 返回分部视图 /// </summary> /// <returns></returns> public PartialViewResult _StudentListInfo() { List<Student> stuModel = new List<Student>() { new Student() { ID=1, Name="曹操", Age=1500, Sex="男" }, new Student() { ID=2,Name="孙权",Age=2000,Sex="男" } }; return PartialView(stuModel); }
然后添加对应的视图：
@model IEnumerable<JsonDataWithMVC.Models.Student>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Sex</th>
<th>Age</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.Sex</td>
<td>@item.Age</td>
</tr>
}
</tbody>
</table>
接着，我在Index视图中，通过Jquery的load方法加载局部视图：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> </head> <body> <div id="myDIV"> @*方法一 ：在视图中加载分部视图*@ @*@Html.Partial("_StudentList")*@ </div> <script src="~/Scripts/jquery-1.10.2.js"></script> <script type="text/javascript"> //方法二，通过Jquery的load方法，直接加载分部视图 $(document).ready(function () { //注意这里的#myDIV，是CSS选择器 $("#myDIV").load("/Student/_StudentListInfo").show(); }) </script> </body> </html>
运行程序，之后，得到的是相同的结果：
总结：这个文章主要是记录自己工作中遇到的问题，前端的ＣＳＳ，ｊｓ不熟悉，加以巩固！！！