首先,新建一個MVC類型的Web項目: 然後在Model文件夾下定義一個Student實體: 然後新建一個Student控制器: 創建對應的Index視圖: 相對應的_StudentList分部視圖: 編譯一下:修改路由為Student控制器,Index方法,運行,我們就可以看到結果了 然後工作中還 ...
首先,新建一個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>
運行程式,之後,得到的是相同的結果:
總結:這個文章主要是記錄自己工作中遇到的問題,前端的CSS,js不熟悉,加以鞏固!!!