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=,
Name="曹操",
Age=,
Sex="男"
},
new Student()
{
ID=,Name="孙权",Age=,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 = ; 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=,
Name="曹操",
Age=,
Sex="男"
},
new Student()
{
ID=,Name="孙权",Age=,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>
运行程序，之后，得到的是相同的结果：
总结：这个文章主要是记录自己工作中遇到的问题，前端的ＣＳＳ，ｊｓ不熟悉，加以巩固！！！
MVC5中，加载分部视图，常见的方式的更多相关文章
- MVC学习系列6--使用Ajax加载分部视图和Json格式的数据
Ajax的应用在平时的工作中,很是常见,这篇文章,完全是为了,巩固复习. 我们先看看不使用json格式返回分部视图: 先说需求吧: 我有两个实体,一个是出版商[Publisher],一个是书[Book ...
- MVC学习七：Razor布局之加载分部视图【PartialView】
Partial View 顾名思义就是Html代码片段,应用于此HTML代码多次被页面加载时使用.(类似于WebForm程序中的用户控件) 注:PartialView和正常的View页面在访问时没有任 ...
- Spring中加载xml配置文件的六种方式
Spring中加载xml配置文件的六种方式 博客分类: Spring&EJB XMLSpringWebBeanBlog 因为目前正在从事一个项目,项目中一个需求就是所有的功能都是插件的形式装 ...
- Spring中加载ApplicationContext.xml文件的方式
Spring中加载ApplicationContext.xml文件的方式 原文:http://blog.csdn.net/snowjlz/article/details/8158560 1.利用Cla ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)
接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(一)
Android ViewPager 中加载 Fragmenet的两种方式 一.当fragment里面的内容较少时,直接 使用fragment xml布局文件填充 文件总数 布局文件:view_one. ...
- 在ASP.NET MVC中加载部分视图的方法及差别
在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. ...
- 基于layer封装的异步加载分部视图弹出层
背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. ...
- iOS 从xib中加载自定义视图
想当初在学校主攻的是.NET,来到公司后,立马变成java开发,之后又跳到iOS开发,IT人这样真的好么~~ 天有不测风云,云还有变幻莫测哎,废话Over,let's go~ 新学iOS开发不久,一 ...
随机推荐
- 写了一个简单的NodeJS实现的进程间通信的例子
1. cluster介绍 大家都知道nodejs是一个单进程单线程的服务器引擎,不管有多么的强大硬件,只能利用到单个CPU进行计算.所以,有人开发了第三方的cluster,让node可以利用多核CPU ...
- web.xml详解
web.xml的作用 web.xml,一个Tomcat工程中最重要的配置文件.web.xml没有其实也可以----只要你确定你的项目里面不需要任何过滤器.监听器.Servlet等等.我试了一下,没有w ...
- CSS Font知识整理总结
1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...
- MySQL--将MySQL数据导入到SQL Server
随着时代的进步,社会的发展,各种技术层出不穷五花八门乱七八糟数不胜数(写作文呢!!!) 不扯废话,简单而言,很多公司都会同时使用多种数据库,因此数据在不同数据库之间导入导出就成为一个让人蛋疼的问题,对 ...
- [安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu
效果如下: 下面是工程结构: 整个工程包括android-v7.SlidingMenu-lib和主工程SlidingMenuTest部分 其中前两个作为lib,后一个为主工程 主工程包含两个lib工程 ...
- JavaScript正则表达式下——相关方法
上篇博客JavaScript 正则表达式上——基本语法介绍了JavaScript正则表达式的语法,有了这些基本知识,可以看看正则表达式在JavaScript的应用了,在一切开始之前,看看RegExp实 ...
- Dynamics CRM 2013 installation
原创地址:http://www.cnblogs.com/jfzhu/p/3445820.html 转载请注明出处 一 硬件要求 1. CRM Server 下表对硬件的要求是假定Microsoft S ...
- Macaca-iOS入门那些事
Macaca-iOS入门那些事 一. 前言 最近有朋友向我请教iOS自动化测试框架选型,刚好前段时间做讲座时发现了macaca,遂试用.所以,下面的内容会只围绕Macaca的iOS部分. 二. Mac ...
- Redis的使用模式之计数器模式实例
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/123.html?1455853785 Redis 是目前 NoSQL 领域 ...
- [转]五种开源协议的比较(BSD，Apache，GPL，LGPL，MIT)
当Adobe.Microsoft.Sun等一系列巨头开始表现出对"开源"的青睐时,"开源"的时代即将到来!现今存在的开源协议很多,而经过Open Source ...