首先，新建一個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>
運行程序，之后，得到的是相同的結果：
總結：這個文章主要是記錄自己工作中遇到的問題，前端的ＣＳＳ，ｊｓ不熟悉，加以鞏固！！！