首先，新建一个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中，加载分部视图，常见的方式的更多相关文章

  1. MVC学习系列6--使用Ajax加载分部视图和Json格式的数据

    Ajax的应用在平时的工作中,很是常见,这篇文章,完全是为了,巩固复习. 我们先看看不使用json格式返回分部视图: 先说需求吧: 我有两个实体,一个是出版商[Publisher],一个是书[Book ...

  2. MVC学习七：Razor布局之加载分部视图【PartialView】

    Partial View 顾名思义就是Html代码片段,应用于此HTML代码多次被页面加载时使用.(类似于WebForm程序中的用户控件) 注:PartialView和正常的View页面在访问时没有任 ...

  3. Spring中加载xml配置文件的六种方式

    Spring中加载xml配置文件的六种方式 博客分类: Spring&EJB XMLSpringWebBeanBlog  因为目前正在从事一个项目,项目中一个需求就是所有的功能都是插件的形式装 ...

  4. Spring中加载ApplicationContext.xml文件的方式

    Spring中加载ApplicationContext.xml文件的方式 原文:http://blog.csdn.net/snowjlz/article/details/8158560 1.利用Cla ...

  5. [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)

    接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...

  6. [Android] Android ViewPager 中加载 Fragment的两种方式 方式(一)

    Android ViewPager 中加载 Fragmenet的两种方式 一.当fragment里面的内容较少时,直接 使用fragment xml布局文件填充 文件总数 布局文件:view_one. ...

  7. 在ASP.NET MVC中加载部分视图的方法及差别

    在视图里有多种方法可以加载部分视图,包括Partial() .Action().RenderPartial().RenderAction().RenderPage()方法.下面说明一下这些方法的差别. ...

  8. 基于layer封装的异步加载分部视图弹出层

    背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了. ...

  9. iOS 从xib中加载自定义视图

    想当初在学校主攻的是.NET,来到公司后,立马变成java开发,之后又跳到iOS开发,IT人这样真的好么~~  天有不测风云,云还有变幻莫测哎,废话Over,let's go~ 新学iOS开发不久,一 ...

随机推荐

  1. javascript 设计模式-----观察者模式

    观察者模式在设计模式中被重点提到,因为它应用的场景非常多,而且在模块化设计当中扮演着非常重要的角色.MVC模式中最底层的就是观察者模式,当下流行的javascript框架backbone就是很好地运用 ...

  2. prerender-SPA程序的SEO优化策略

    随着web2.0的兴起,ajax的时代已经成为了事实,更如今Knockout,backbone, angular,ember前端MDV(model driver view)框架强势而来,Single ...

  3. Nunit工具做C#的单元测试

      Nunit工具做C#的单元测试 学习心得 编写人:罗旭成 时间:2013年9月2日星期一 1.开发人员如何做单元测试 单元测试是针对最小的可测试软件元素(单元)的,它所测试的内容包括单元的内部结构 ...

  4. 与其他.Net异步模式和类型进行互操作

    返回该系列目录<基于Task的异步模式--全面介绍> Tasks和异步编程模型APM(Tasks and the Asynchronous Programming Model) 从APM到 ...

  5. springmvc下js控制表单提交（表单提交前检验，提交后获取json返回值）

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

  6. 对Google cloud platform 做了点研究

    Google也推出了云计算基础服务, 加上微软Azure,亚马逊AWS, 都齐活了. 下面是研究了一下对其的一个初步了解. 计算: Compute Engine     IaaS平台,提供VM,操作灵 ...

  7. PHP标准库 (SPL) 笔记

    简介 SPL是Standard PHP Library(PHP标准库)的缩写. The Standard PHP Library (SPL) is a collection of interfaces ...

  8. PHP性能优化工具–xhprof安装

    PHP性能优化工具–xhprof安装,这里我先贴出大致的步骤: 1.获取xhprof 2.编译前预处理 3.编译安装 4.配置php.ini 5.查看运行结果 那么下面我们开始安装xhprof工具吧: ...

  9. 《PHP Manual》阅读笔记1

    1.phpinfo() 从 PHP 获取系统信息. 2.$_SERVER 只是 PHP 自动全局化的变量之一.它包含了 web 服务器提供的所有信息,被称为超全局变量. 3.htmlspecialch ...

  10. vm中centos7配置静态ip访问外网

    我使用的是桥接方式,具体步骤如下   1.设置虚拟机网络: 编辑>虚拟网络编辑器   2.设置vm中操作系统的网络设置   3.进入centos7中后修改网络配置:     另附我的宿主机网络配 ...