mvc中json格式的使用方法示例
View:
<script type="text/javascript">
$(document).ready(function() {
GetByJquery();
$("#ddlProvince").change(function() { GetCity() });
$("#ddlCity").change(function() { GetDistrict() });
});
function GetByJquery() {
$("#ddlProvince").empty(); //清空省份SELECT控件
$.getJSON("/ajax/GetProvinceList", function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["ProvinceID"])
.text(item["ProvinceName"])
.appendTo($("#ddlProvince"));
});
GetCity();
});
}
function GetCity() {
$("#ddlCity").empty(); //清空城市SELECT控件
var url ="/ajax/GetCityList/" + $("#ddlProvince").val();
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["CityID"])
.text(item["CityName"])
.appendTo($("#ddlCity"));
});
GetDistrict();
});
}
function GetDistrict() {
$("#ddlDistrict").empty(); //清空市区SELECT控件
var url = "/ajax/GetDistrictList/" + $("#ddlCity").val();
$.getJSON(url, function(data) {
$.each(data, function(i, item) {
$("<option></option>")
.val(item["DistrictID"])
.text(item["DistrictName"])
.appendTo($("#ddlDistrict"));
});
});
}
</script>
<table><tr><td><select id="ddlProvince"/></td><td><select id="ddlCity"/></td><td><select id="ddlDistrict" /></td></tr></table>
Controller :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;
namespace MvcBBS.Controllers
{
public class AjaxController : Controller
{
//
// GET: /Ajax/
/// <summary>
/// 获取所有［省份］数据
/// </summary>
public ActionResult GetProvinceList()
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为！");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_Province> modellist = bll.GetProvinceList();
return Json(modellist);
}
/// <summary>
/// 获取某［省份］的所有［城市］数据
/// </summary>
public ActionResult GetCityList(int id)
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为！");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_City> modellist = bll.GetCityList(id);
return Json(modellist);
}
/// <summary>
/// 获取某［城市］的所有［市区］数据
/// </summary>
public ActionResult GetDistrictList(int id)
{
if (!Request.IsAjaxRequest())
{
return Content("请不要非法方法,这是不道德的行为！");
}
BLL.Province bll = new MvcBBS.BLL.Province();
List<MvcBBS.Model.S_District> modellist = bll.GetDistrict(id);
return Json(modellist);
}
}
}
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>SayHello</title>
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script type="text/javascript">
var onsuccess = function () {
alert("提交成功！");
}
$(function () {
$("#jssubmit").click(function () {
$.ajax({
url: "/ajax/SayHello",
type: "POST",
data: "str=" + $("#username").val()+"&pwd=4565",
success: function (data) {
alert(data+"提交成功！");
}
});
});
});
</script>
</head>
<body>
<div>
<% using (Ajax.BeginForm("SayHello", new AjaxOptions { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "divresult", OnSuccess = "onsuccess" }))
{%>
<input type="text" name="str" />
<input type="password" name="pwd" />
<input type="submit" value="Ajax提交" />
<%} %>
</div>
<div id="divresult"></div>
<div>
<input type="text" id="username" />
<input id="jssubmit" type="submit" value=js提交" />
</div>
</body>
</html>
