MVC5中，加载分部视图，常见的方式

2018-06-23 23:15:46来源：未知阅读 ()

首先，新建一个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>