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

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

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:MVC学习系列5--Layout布局页和RenderSection的使用

下一篇:RPC 的概念模型与实现解析