首先，新建一个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. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...

  2. PowerShell笔记

    教程: http://www.pstips.net/powershell-online-tutorials/ http://www.3fwork.com/a113/ 1. 查看成员 $MyInvoca ...

  3. RCP：利用actionSet在菜单（menu）里添加内容

    eclipse的菜单menu.工具栏toolbar乃至视图的上下文菜单contextmenu都是使用Action或Command实现的. Action即是 org.eclipse.jface.acti ...

  4. 设计模式之美：State（状态）

    索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):由 ConcreteState 指定它的后继 State. 意图 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改 ...

  5. 千万用户级别应用系统背后的SOA组件化容器

    背景 在<我们的应用系统是如何支撑千万级别用户的>随笔中已经从“宏观”角度去介绍了整个应用系统的布局.组件化是整个系统由头到尾都始终坚持的一个设计原则,其中“SOA组件化容器”也是我们应用 ...

  6. Zookeeper--Zookeeper是什么

    Google的三篇论文影响了很多很多人,也影响了很多很多系统.这三篇论文一直是分布式领域传阅的经典.根据MapReduce,于是我们有了Hadoop:根据GFS,于是我们有了HDFS:根据BigTab ...

  7. 走进AngularJs(三)自定义指令-----（上）

    一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...

  8. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. swift tableview的分割线不能到头

    1,设置tableview的separatorInset, layoutMargins if(myTableView.respondsToSelector("setSeparatorInse ...

  10. WebApi系列~安全校验中的防篡改和防复用

    回到目录 web api越来越火,因为它的跨平台,因为它的简单,因为它支持xml,json等流行的数据协议,我们在开发基于面向服务的API时,有个问题一直在困扰着我们,那就是数据的安全,请求的安全,一 ...