Ajax使用mvc_H5之家 - 中国HTML5教程资源分享第一站

在 ASP.NET MVC beta 中我们可以使用 Ajax.BeginForm, Ajax.ActionLink 来进行 Ajax 调用，同样我们也可以使用一些支持 Ajax 框架如 jQuery 来简化对 ajax 的调用。 1. ASP.NET MVC beta 中内置了 AJAX 的支持，但是我们必须引入 MicrosoftAjax.js, MicorsoftMvc

Ajax.js.

2. 由于 ASP.NET MVC 已经集成了 jQuery,所以我们也可以很方便的使用 jQuery 的 Ajax 功能

上图的代码展示了前台的三种方式（1）Ajax.BeginForm

这里涉及到如何附加表单之外的参数到远程，实际上我们只需要附加到 post 的 url 后就行了,例如把 action 改为 AjaxGetJSON?name=jack,或者 AjaxGetJSON/jack 然后配置 route 就可以 (2) Ajax.ActionLink

附加参数和上面相同 (3) jQuery.ajax 参看上图的 GetByJquery()函数 3.后台代码第一个直接返回 Json 数据，第二个，第三个都是通过用户控件来返回 Html.

public JsonResult AjaxGetJSON(Person p) { Thread.Sleep(3000); return this.Json(p); } public ActionResult AjaxGetString() { Person p = new Person { FirstName = "Bill", LastName = "Gates" }; return View("AjaxContent",p); } public ActionResult AjaxByJquery() { Person p = new Person { FirstName = "Bill", LastName = "Gates" }; return View("AjaxContent", p); }

4. AjaxContent 用户控件内容

通过上面的方法，我们很容易模仿原来 webservice 方式的调用，把 ajax 的功能放到一个统一的 controller 里，比如叫 AjaxServiceController.

这是第一使用 Jquery 实现城市三级数据联动的实例！之前本人没有使用过 Jquery，在 WebForm 的开发过程中，很多时候用的是 ASP.NET Ajax,ajaxPro +JavaScript,从未使用过 JS 框架，最近在学习 ASP.NET MVC,在最新的发布版本中，已经集成了 Jquery 1.3.1，自然，也要学一学！发现使用 Jquery 代码果然写得比原始 JS 优雅！只是语法和方法太多，现在还没弄熟，还需要时间来学习．．．．．这次是第一次使用 Jquery 写客户端脚本，如果大家发现更好的实现方法，请给我留言！谢谢！注明：ASP.NET MVC 1.0 ,作者:0x001; View: 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 using using using

System.Linq; System.Web; System.Web.Mvc; 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); } } } 我比较喜欢使用三层＋工厂模式来读写数据，O/R Mapping 不太适合我的要求！我们写的项目经常不是为了方便移植，而是选择明确的数据库，需要更高的性能，更强的业务逻辑！大家看到上面的代码，应该很熟悉，从数据库读数据到 List<> 中返回，并使有 ASP.NET MVC 内置的 Json 方法转换数据并 Response． DAL: DAL // BLL,Model 就不贴出来了！ using using using using using using System; System.Data; System.Text; System.Data.SqlClient; System.Collections.Generic; DBUtility;//请先添加引用

namespace MvcBBS.DAL { public class Province { public Province() {} /// /// /// /// <summary> 获取所有省份数据 </summary> <returns></returns>

public List<Model.S_Province> GetProvinceList() { StringBuilder strSql = new StringBuilder(); strSql.Append("SELECT ProvinceID,ProvinceName "); strSql.Append(" FROM S_Province "); List<Model.S_Province> modelList = new List<MvcBBS.Model.S_Province>(); SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString()); while (dr.Read()) { Model.S_Province _model = new MvcBBS.Model.S_Province(); _model.ProvinceID = int.Parse(dr["ProvinceID"].ToString()); _model.ProvinceName = dr.GetString(1); modelList.Add(_model); } dr.Close(); return modelList; } /// <summary> /// 获取某省份的所有城市数据 /// </summary> /// <param name="ProvinceID"></param> /// <returns></returns> public List<Model.S_City> GetCityList(int ProvinceID) { StringBuilder strSql = new StringBuilder(); strSql.Append("SELECT CityID,CityName,ZipCode"); strSql.Append(" FROM S_City "); strSql.Append(" WHERE ProvinceID="); strSql.Append(ProvinceID.ToString()); List<Model.S_City> modelList = new List<MvcBBS.Model.S_City>(); SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString()); while (dr.Read()) { Model.S_City _model = new MvcBBS.Model.S_City(); _model.CityID = int.Parse(dr["CityID"].ToString()); _model.CityName = dr.GetString(1);

_model.ZipCode = dr.GetString(2); _model.ProvinceID = ProvinceID; modelList.Add(_model); } dr.Close(); return modelList; } /// <summary> /// 获取某城市的所有市区 /// </summary> /// <param name="CityID"></param> /// <returns></returns> public List<Model.S_District> GetDistrict(int CityID) { StringBuilder strSql = new StringBuilder(); strSql.Append("SELECT DistrictID,DistrictName"); strSql.Append(" FROM S_District "); strSql.Append(" WHERE CityID="); strSql.Append(CityID.ToString()); List<Model.S_District> modelList = new List<MvcBBS.Model.S_District>(); SqlDataReader dr = DbHelperSQL.ExecuteReader(strSql.ToString()); while (dr.Read()) { Model.S_District _model = new MvcBBS.Model.S_District(); _model.DistrictID = int.Parse(dr["DistrictID"].ToString()); _model.DistrictName = dr.GetString(1); _model.CityID = CityID; modelList.Add(_model); } dr.Close(); return modelList; } } }