你的位置:首页 > ASP.net教程

[ASP.net教程]MVC5中,加载分部视图,常见的方式


首先,新建一个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不熟悉,加以巩固!!!