首先，新建一个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. Win10 UWP开发中的重复性静态UI绘制小技巧 1

    介绍 在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态的界面设计.比如:画许多等距的线条,画一圈时钟型的刻度线,同特别的策略排布元素,等等. 读者可能觉得这些需求十分简单, ...

  2. 渣渣小本求职复习之路每天一博客系列——Java基础（9）

    ———————————————————————今天不闲聊————————————————————————————— 第十一章:线程 第四节:synchronized与同步 首先,我们来看一段代码: p ...

  3. 依据BOM和已经存在的文件生成其他种类的文件

    在BOM中记录中有物料编码,物料名称,物料规格等,而且依据BOM已经生成了一些的文件,如采购规格书,这个时候需要生成相应的检验规格书模板,可以使用下面的VBA代码,具体代码如下: Function I ...

  4. [蓝牙] 3、 剖析BLE心率检测工程

    位于:<KEIL path> \ARM\Device\Nordic\nrf51822\Board\pca10001\s110\ble_app_hrs Heart Rate Example ...

  5. SignalR + KnockoutJS + ASP.NET MVC4 实现井字游戏

    1.1.1 摘要 今天,我们将使用SignalR + KnockoutJS + ASP.NET MVC实现一个实时HTML5的井字棋游戏. 首先,网络游戏平台一定要让用户登陆进来,所以需要一个登陆模块 ...

  6. 《轻量级Java Web整合开发入门SSH》 - 快速理解Java框架的又一积木

           学习JAVA不难,难的是没有多余的时间给你仔细学习.       伴随着项目的不断跟进,责任重于泰山,必须快速提升.       我不能期望把一本书或者一个项目完全吃透,只希望能用数量去 ...

  7. 转载：Spring AOP (下)

    昨天记录了Spring AOP学习的一部分(http://www.cnblogs.com/yanbincn/archive/2012/08/13/2635413.html),本来是想一口气梳理完的.但 ...

  8. angularjs定义全局变量

    angularjs定义全局变量 三种方法 直接外层定义全局变量 利用ng的value定义全局变量 利用ng的constant定义全局变量 Takl is cheap, Show me the code ...

  9. sdk更新代理设置

    sdk更新代理设置 http://www.cnblogs.com/zhoujg/p/4560998.html

  10. DOM对象模型四大基本接口

    本文向大家描述一下DOM对象模型的四个基本接口,在DOM对象模型接口规范中,有四个基本的接口:Document,Node,NodeList以及NamedNodeMap. 在DOM对象模型接口规范中,有 ...