MVC5中,加载分部视图,常见的方式
2018-06-18 01:54:42来源:未知 阅读 ()
首先,新建一个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
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Qt与Js交互通信 2020-05-25
- DLL加载,设置相对路径 2018-08-07
- 通过预加载器提升网页加载速度 2018-06-18
- 微软Asp.net MVC5生命周期流程图 2018-06-18
- 未能加载文件或程序集“System.Web.Razor”或它的某一个依赖 2018-06-18
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash