c# mvc5 view 多层_MVC5中，加载分部视图，常见的方式

首先，新建一个MVC类型的Web项目：

然后在Model文件夹下定义一个Student实体：

public classStudent

{public int ID { get; set; }public string Name { get; set; }public string Sex { get; set; }public int Age { get; set; }

}

然后新建一个Student控制器：

usingJsonDataWithMVC.Models;usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.Mvc;namespaceJsonDataWithMVC.Controllers

{public classStudentController : Controller

{//GET: Student

publicActionResult Index()

{returnView();

}///

///通过Json返回数据到前端///

///

publicJsonResult _StudentList()

{

List stuModel = new List()

{newStudent() {

ID=1,

Name="曹操",

Age=1500,

Sex="男"},newStudent()

{

ID=2,Name="孙权",Age=2000,Sex="男"}

};returnJson(stuModel,JsonRequestBehavior.AllowGet);

}

}

}

创建对应的Index视图：

@{

Layout= null;

}

Index

@*在视图中加载分部视图*@

@Html.Partial("_StudentList")

相对应的_StudentList分部视图：

@model IEnumerable

IDNameAgeSex

@*通过Json返回数据到前端*@

$.getJSON("/Student/_StudentList", function (data) {vartr;//把每一行的数据加到table中//注意：js中智能提示不完全：i < data.length;,,data[i].Name....

for (var i = 0; i < data.length; i++) {

tr= $("

");

tr.append("

" + data[i].ID + "");

tr.append("

" + data[i].Name + "");

tr.append("

" + data[i].Age + "");

tr.append("

" + data[i].Sex + "");//通过css找到table,把数据绑定到table中

$(".myTable").append(tr);

}

})

})

编译一下：修改路由为Student控制器，Index方法，运行，我们就可以看到结果了

然后工作中还会遇到直接在视图中加载分部视图。这里我用jquery的load方法，来做，请看我方法二：

在控制器中添加一个方法：

///

///返回分部视图///

///

publicPartialViewResult _StudentListInfo()

{

List stuModel = new List()

{newStudent() {

ID=1,

Name="曹操",

Age=1500,

Sex="男"},newStudent()

{

ID=2,Name="孙权",Age=2000,Sex="男"}

};returnPartialView(stuModel);

}

然后添加对应的视图：

@model IEnumerable

IDNameSexAge

@foreach (var item inModel)

{

@item.ID@item.Name@item.Sex@item.Age}

接着，我在Index视图中，通过Jquery的load方法加载局部视图：

@{

Layout= null;

}

Index

@*方法一 ：在视图中加载分部视图*@

@*@Html.Partial("_StudentList")*@

//方法二，通过Jquery的load方法，直接加载分部视图

$(document).ready(function () {//注意这里的#myDIV，是CSS选择器

$("#myDIV").load("/Student/_StudentListInfo").show();

})

运行程序，之后，得到的是相同的结果：

总结：这个文章主要是记录自己工作中遇到的问题，前端的ＣＳＳ，ｊｓ不熟悉，加以巩固！！！