首先，新建一个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. java 多线程（synchronized）

    package com.example; public class App { public static void main(String[] args) { doRunable dr = new ...

  2. UWP开发随笔——UWP新控件！AutoSuggestBox！

    摘要 要开发一款优秀的application,控件肯定是必不可少的,uwp就为开发者提供了各种各样的系统控件,AutoSuggestBox就是uwp极具特色的控件之一,也是相对于之前win8.1的ua ...

  3. EF 外键问题

    在做一个评论功能的时候,发现用户的id不对,打开数据库一看,莫名其妙的新增了几个用户.明显是将外键中的用户新增到用户表中了. 评论表: public class CourseComment : Bas ...

  4. js实现快速排序

    非原创: var quickSort = function(arr){ if(arr.length<=1){return arr;} var pivotIndex = Math.floor(ar ...

  5. js模版引擎handlebars.js实用教程——with-终极this应用

    返回目录 <!DOCTYPE html> <html> <head> <META http-equiv=Content-Type content=" ...

  6. 《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!

    <30天自制操作系统>笔记(01)——hello bitzhuwei's OS! 最初的OS代码 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以 ...

  7. IOS Animation-CABasicAnimation、CAKeyframeAnimation详解&区别&联系

    1.先看看网上流传的他们的继承图: 从上面可以看出CABasicAnimation与CAKeyframeAnimation都继承于CAPropertyAnimation.而CAPropertyAnim ...

  8. JavaScript语法、对话框。分支语句

    一.用法 其所在的位置有三块,1.head里面  2.body里面  3.</html>后   一般都写在</html>后 其用法为<script></scr ...

  9. Java程序员的日常—— IOUtils总结

    以前写文件的复制很麻烦,需要各种输入流,然后读取line,输出到输出流...其实apache.commons.io里面提供了输入流输出流的常用工具方法,非常方便.下面就结合源码,看看IOUTils都有 ...

  10. 使用 flow.ci 实现 Android 自动化测试与持续集成

    在上篇文章--如何实现 Android 应用的持续部署中,我们使用的是 flow.ci + Github + fir.im 实现 Android 应用的持续部署.对于 Android 开发者,他们可能 ...