.Net MVC3 中前台异步获取json数据的实例
在mvc3中，最让人称道的当然还是路由的方便与先进之处，类似于java中的mvc，加载每一个页面（包括首页），都要先运行该页面对应的后台controller，处理页面的初始化数据（mvc中的数据传递问题这里不再讲述）、域名读取、权限操作等，然后返回相应的页面。本篇文章讲述如何从mvc的前台页面中异步获取后台的json数据。
1.建一个mvc3的项目，取名叫MVC3Test（事先安装mvc3 version：1.13.113.0）
2.修改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());
});
});
function GetDepartments(sId) {
$.ajax({
url: " /Home/GetSecondCatalog " ,
type: " POST " ,
contentType: " application/json; charset=utf-8 " ,
data: " {schoolId: " + sId + " } " ,
dataType: " json " ,
success: function (data) {
$( ' #sltDepartment ' ).empty();
$( ' #sltDepartment ' ).html(data);
},
error: function ErrorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown + " : " + textStatus);
}
});
}
</ script >
< div >
< h2 >
About </ h2 >
< p >
Put content here.
</ p >
< div >
< span >
< label >
School :
</ label >
< select id ="sltSchool" >
< option value ="-1" > select... </ option >
</ select ></ span > < span style ="margin-left: 50px" >
< label >
Department : </ label >
< select id ="sltDepartment" >
< option value ="-1" > select... </ option >
</ select >
</ span >
</ div >
</ div >
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());
});
});
function GetDepartments(sId) {
$.ajax({
url: " /Home/GetSecondCatalog " ,
type: " POST " ,
contentType: " application/json; charset=utf-8 " ,
data: " {schoolId: " + sId + " } " ,
dataType: " json " ,
success: function (data) {
$( ' #sltDepartment ' ).empty();
$( ' #sltDepartment ' ).html(data);
},
error: function ErrorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown + " : " + textStatus);
}
});
}
</ script >
< div >
< h2 >
About </ h2 >
< p >
Put content here.
</ p >
< div >
< span >
< label >
School :
</ label >
< select id ="sltSchool" >
< option value ="-1" > select... </ option >
</ select ></ span > < span style ="margin-left: 50px" >
< label >
Department : </ label >
< select id ="sltDepartment" >
< option value ="-1" > select... </ option >
</ select >
</ span >
</ div >
</ div >
@{
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());
});
});
function
GetDepartments(sId) {
$.ajax({
url:
"
/Home/GetSecondCatalog
"
,
type:
"
POST
"
,
contentType:
"
application/json; charset=utf-8
"
,
data:
"
{schoolId:
"
+
sId
+
"
}
"
,
dataType:
"
json
"
,
success:
function
(data) {
$(
'
#sltDepartment
'
).empty();
$(
'
#sltDepartment
'
).html(data);
},
error:
function
ErrorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown
+
"
:
"
+
textStatus);
}
});
}
</
script
>
<
div
>
<
h2
>
About
</
h2
>
<
p
>
Put content here.
</
p
>
<
div
>
<
span
>
<
label
>
School :
</
label
>
<
select
id
="sltSchool"
>
<
option
value
="-1"
>
select...
</
option
>
</
select
></
span
>
<
span
style
="margin-left: 50px"
>
<
label
>
Department :
</
label
>
<
select
id
="sltDepartment"
>
<
option
value
="-1"
>
select...
</
option
>
</
select
>
</
span
>
</
div
>
</
div
>
3.创建几个model
(1) TestSchool.cs
using
System;using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC3Test.Models
{
public class TestSchool
{
public int Id { get ; set ; }
public string Name { get ; set ; }
}
}
(2) TestSchoolDepartment.cs
using
System;using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC3Test.Models
{
public class TestSchoolDepartment
{
public int Id { get ; set ; }
public int SchoolId { get ; set ; }
public string Name { get ; set ; }
}
}
(3) TestModels.cs
using
System;using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC3Test.Models
{
public class TestModels
{
public static List < TestSchool > GetAllSchools()
{
return new 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 " }
};
}
public static List < TestSchoolDepartment > GetAllDepartment()
{
return new 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 " }
};
}
public static 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;
}
}
}
4.由于About是在Home页面里的，所以它的controller应该在HomeController里，我们添加两个controller，如下：
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
{
public class 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();
return this .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();
return this .Json(result, JsonRequestBehavior.AllowGet);
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC3Test.Models;
using System.Text;
namespace MVC3Test.Controllers
{
public class 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();
return this .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();
return this .Json(result, JsonRequestBehavior.AllowGet);
}
}
}
好了，所有的代码都已完成，现在只要编译、运行项目即可。