首先，新建一个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. 用UWP实现一个和win10设置页面类似的布局

    不知道有人注意过Win10中的设置页面的布局没?那个页面会根据不同的窗口宽度来调节显示的内容,甚至来后退按钮的操作在不同的宽度也是不同的,看图: 是不是有点cool呢,这篇文章,我们就来做一个类似的布 ...

  2. 移动APP的自动化测试

    开发移动应用,最耗时耗力的就是手动测试APP的每个功能点或修复bug.有人就会提议App的业务逻辑可以使用nUnit或xUnit测试单元来辅助完成.那用户界面要如何测试?众所周知,移动设备多种多样,数 ...

  3. Mysql日常开发注意要点

    1.MySQL存储引擎介绍 MyISAM:低版本MySQL默认的MySQL插件式存储引擎,存储文件易损坏,不支持事务.InnoDB:目前默认的MySQL存储引擎,用于事务处理应用程序,具有众多特性,包 ...

  4. C struct结构体内存对齐问题

    在空间看到别人的疑问引起了我的兴趣,刚好是我感兴趣的话题,就写一下.为了别人的疑问,也发表在qq空间里.因为下班比较晚,10点才到家,发表的也晚.其实是个简单的问题.  直接用实例和内存图说明: #i ...

  5. Android消息机制

    每一个Android应用在启动的时候都会创建一个线程,这个线程被称为主线程或者UI线程,Android应用的所有操作默认都会运行在这个线程中. 但是当我们想要进行数据请求,图片下载,或者其他耗时操作时 ...

  6. osgi 2

    基础的API BundleActivator  BundleContext ServiceReference HelloServiceFactory ServiceTracker osgi 疑惑: I ...

  7. iOS 向模拟器里添加照片

    iOS 向模拟器里添加照片 模拟器里Photos最开始时是没有照片的,有时我们做Demo时需要Photos里面的照片做测试,这时就需要把Mac上的照片导入到模拟器里.步骤如下: 1,打开模拟器 2,选 ...

  8. Ubuntu & MacOS安装Mysql & connector

    Ubuntu & MacOS安装Mysql & connector 1. 安装MySql sudo apt-get install mysql-server apt-get insta ...

  9. MVVM架构~knockoutjs系列之数组的$index和$data

    返回目录 已经写了很多knockoutjs的文章了,今天在review代码时,忽然看到一个问题,在knockout环境下,如何遍历一个简单的数组?对于遍历对象组件的数组来说,很容易,直接foreach ...

  10. Docker容器入门

    为什么要看docker 从去年起就或多或少的接受了docker的熏陶,主要还是Infoq在去年有很多关于docker的实践视频讲座,记得有一篇是<Docker在雪球的技术实践>,当时听的也 ...