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开发不久,一 ...
随机推荐
- Metrics-Java版的指标度量工具之二
接上<Metrics-Java版的指标度量工具之一> 4. Histograms Histograms主要使用来统计数据的分布情况,最大值.最小值.平均值.中位数,百分比(75 ...
- 【Bugly干货分享】iOS内存管理：从MRC到ARC实践
Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 对于iOS程序员来说,内存管理是入门的 ...
- 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel
5天玩转C#并行和多线程编程系列文章目录 5天玩转C#并行和多线程编程 —— 第一天 认识Parallel 5天玩转C#并行和多线程编程 —— 第二天 并行集合和PLinq 5天玩转C#并行和多线程编 ...
- 浅谈Excel开发：四 Excel 自定义函数
我们知道,Excel中有很多内置的函数,比如求和,求平均,字符串操作函数,金融函数等等.在有些时候,结合业务要求,这些函数可能不能满足我们的需求,比如我想要一个函数能够从WebService上获取某只 ...
- iOS 打包iPa
http://blog.fir.im/how-to-build-adhoc-ipa/ 之前都是打包好ipa然后发送给客户,特麻烦,fir.im网站不错 迅速获取自己手机的udid: http://f ...
- css 常见时间轴的做法（————————————————时间轴——————————————————）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Java-小练习简单银行程序
2练习1:创建一个简单的银行程序包 练习目标-Java 语言中面向对象的封装性及构造器的使用. 任务 在这个练习里,创建一个简单版本的(账户类)Account类.将这个源文件放入banking程序 ...
- Maven项目环境搭建实例.
前言:最近下班比较早, 总是不愿意让自己闲着, 此时刚好从网上找到了一些项目的资源, 结合自己在公司做的项目, 所以拿来一起学习加复习一些平常用到和没接触过的新知识.做的这个项目的名称叫做babasp ...
- [全文检索]Lucene基础入门.
本打算直接来学习Solr, 现在先把Lucene的只是捋一遍. 本文内容: 1. 搜索引擎的发展史 2. Lucene入门 3. Lucene的API详解 4. 索引调优 5. Lucene搜索结果排 ...
- 学习ASP.NET MVC(五)——我的第一个ASP.NET MVC CURD页面
在上一篇文章中我们已经创建了实体类,在这一篇文章中,我将创建一个新的控制器类——BookController,使用BookController对Books表中的数据进行CURD操作的方法,并使用视图模 ...