首先，新建一个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=1,
Name="曹操",
Age=1500,
Sex="男"
},
new Student()
{
ID=2,Name="孙权",Age=2000,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 = 0; 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=1,
Name="曹操",
Age=1500,
Sex="男"
},
new Student()
{
ID=2,Name="孙权",Age=2000,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>
运行程序，之后，得到的是相同的结果：
总结：这个文章主要是记录自己工作中遇到的问题，前端的ＣＳＳ，ｊｓ不熟悉，加以巩固！！！
时间： 2024-12-31 07:11:13