.Net MVC3之1：前台异步获取json数据的实例(1)

最新推荐文章于 2019-11-27 08:49:27 发布

wilsonke

最新推荐文章于 2019-11-27 08:49:27 发布

阅读量1.9k

点赞数

分类专栏： asp.net

asp.net 专栏收录该内容

63 篇文章 0 订阅

订阅专栏

在mvc3中，最让人称道的当然还是路由的方便与先进之处，类似于java中的mvc，加载每一个页面（包括首页），都要先运行该页面对应的后台controller，处理页面的初始化数据（mvc中的数据传递问题这里不再讲述）、域名读取、权限操作等，然后返回相应的页面。本篇文章讲述如何从mvc的前台页面中异步获取后台的json数据。

1.建一个mvc3的项目，取名叫MVC3Test（事先安装mvc3 version：1.13.113.0）

2.修改About.cshtml,如下代码

按 Ctrl+C 复制代码

About.cshtml

@{
ViewBag.Title = "About Us";
}
<script type="text/javascript">
$(function () {
$.ajax({
url: "/Home/GetSchools",
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (data) {
$("#sltSchool").empty();
$("#sltSchool").html(data);
},
error: function ErrorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown +":"+ textStatus);
}
});
// Get the departments depend on the school
$("#sltSchool").change(function () {
GetDepartments($("#sltSchool").val());
});
});

按 Ctrl+C 复制代码

3.创建几个model

(1) TestSchool.cs

按 Ctrl+C 复制代码

(2) TestSchoolDepartment.cs

按 Ctrl+C 复制代码

(3) TestModels.cs

按 Ctrl+C 复制代码

TestModels.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC3Test.Models
{
publicclass TestModels
{
publicstatic List<TestSchool> GetAllSchools()
{
returnnew List<TestSchool>()
{
new TestSchool{Id=1,Name="ABC"},
new TestSchool{Id=2,Name="DEF"},
new TestSchool{Id=3,Name="HIJ"},
new TestSchool{Id=4,Name="LMN"}
};
}

publicstatic List<TestSchoolDepartment> GetAllDepartment()
{
returnnew List<TestSchoolDepartment>()
{
new TestSchoolDepartment{Id=1,SchoolId=1,Name="ABC_D1"},
new TestSchoolDepartment{Id=2,SchoolId=1,Name="ABC_D2"},
new TestSchoolDepartment{Id=3,SchoolId=1,Name="ABC_D3"},
new TestSchoolDepartment{Id=4,SchoolId=2,Name="DEF_D1"},
new TestSchoolDepartment{Id=5,SchoolId=2,Name="DEF_D2"},
new TestSchoolDepartment{Id=6,SchoolId=3,Name="HIJ_D1"},
new TestSchoolDepartment{Id=7,SchoolId=3,Name="HIJ_D2"},
new TestSchoolDepartment{Id=8,SchoolId=3,Name="HIJ_D3"},
new TestSchoolDepartment{Id=9,SchoolId=3,Name="HIJ_D4"},
new TestSchoolDepartment{Id=10,SchoolId=4,Name="LMN_D1"}
};
}

publicstatic List<TestSchoolDepartment> GetDepartmentBySchoolId(int schoolId)
{
List<TestSchoolDepartment> testSchoolDepartment =new List<TestSchoolDepartment>();
foreach (TestSchoolDepartment department in GetAllDepartment())
{
if (department.SchoolId == schoolId)
{
testSchoolDepartment.Add(department);
}
}
return testSchoolDepartment;
}
}
}

按 Ctrl+C 复制代码

4.由于About是在Home页面里的，所以它的controller应该在HomeController里，我们添加两个controller，如下：

按 Ctrl+C 复制代码

HomeController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC3Test.Models;
using System.Text;

namespace MVC3Test.Controllers
{
publicclass HomeController : Controller
{
public ActionResult Index()
{
ViewBag.Message ="Welcome to ASP.NET MVC!";

return View();
}

public ActionResult About()
{
return View();
}

[HttpPost]
public JsonResult GetSchools()
{
StringBuilder sb =new StringBuilder();
sb.Append("<option value=\"-1\">select...</option>");
foreach (var item in TestModels.GetAllSchools())
{
sb.AppendFormat("<option value=\"{0}\">{1}</option>", item.Id, item.Name);
}
string result = sb.ToString();
returnthis.Json(result, JsonRequestBehavior.AllowGet);
}

[HttpPost]
public JsonResult GetSecondCatalog(int schoolId)
{
StringBuilder sb =new StringBuilder();
sb.Append("<option value=\"-1\">select...</option>");
foreach (var item in TestModels.GetDepartmentBySchoolId(schoolId))
{
sb.AppendFormat("<option value=\"{0}\">{1}</option>", item.Id, item.Name);
}
string result = sb.ToString();
returnthis.Json(result, JsonRequestBehavior.AllowGet);
}
}
}

按 Ctrl+C 复制代码

好了，所有的代码都已完成，现在只要编译、运行项目即可。

……欢迎留言！！

wilsonke

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
.Net MVC3之1：前台异步获取json数据的实例(1)

在mvc3中，最让人称道的当然还是路由的方便与先进之处，类似于java中的mvc，加载每一个页面（包括首页），都要先运行该页面对应的后台controller，处理页面的初始化数据（mvc中的数据传递问题这里不再讲述）、域名读取、权限操作等，然后返回相应的页面。本篇文章讲述如何从mvc的前台页面中异步获取后台的json数据。1.建一个mvc3的项目，取名叫MVC3Test（事先安装mvc3 ve
复制链接

扫一扫

专栏目录