引子:電子商務網站支付功能頁面往往會有很多信息,對于這些信息的保存,往往是分步完成的,那么使用Ajax最合適不過了,比如其中的收貨人信息模塊。這些信息的新建和編輯保存都是用Ajax來完成的。那么有幾種方式完成這個操作呢,我想到如下幾種。
先來看看該功能的截圖:
一般情況下這些信息會對應一個實體類,就命名為:ReceiverInfo,簡單起見,我定義ReceiverInfo如下:
1、將需要的值拼接成json文本,再Action里面處理
?
首先您需要將要保存的值拼接成一個json文本,類似:
var test = "{ ReceiverId: 5, ReceiverName: 'will', Sex: 'F', CreateDate: '2011-02-21' }";
然后用Jquery保存到數據庫,代碼如下:
$.ajax({
??? url: "/Home/test1",
??? type: "post",
??? cache: false,
??? data: test
});
然后您在Action里面這樣操作:
StreamReader reader = new StreamReader(Request.InputStream);
string bodyText = reader.ReadToEnd();
JavaScriptSerializer js = new JavaScriptSerializer();
ReceiverInfo receiver = js.DeserializeReceiverInfo>(bodyText);
//保存。。。
2、利用自定義的ModelBinder實現
JsonBinder
1
public class JsonBinderT> : IModelBinder
2 {
3???? public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
4???? {
5???????? StreamReader reader = new StreamReader(controllerContext.HttpContext.Request.InputStream);
6???????? string json = reader.ReadToEnd();
7
8???????? if (string.IsNullOrEmpty(json))
9???????????? return json;
10
11???????? JavaScriptSerializer serializer = new JavaScriptSerializer();
12???????? object jsonData = serializer.DeserializeObject(json);
13???????? return serializer.DeserializeT>(json);
14???? }
15 }
我們繼承IModelBinder接口,實現其方法:
public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
即可。我們可以在Action里面這樣使用:
public ActionResult Test1([ModelBinder(typeof(JsonBinderReceiverInfo>))] ReceiverInfo receiverInfo)
這樣我們自定義的IModelBinder就會取代DefaultModelBinder完成數據綁定。
3、直接傳遞一個Json對象
?
上面兩種方法并沒有利用MVC的System.ComponentModel.DataAnnotations進行有效的數據驗證。您可能需要自己手動驗證,無疑增加了工作量。
我們試試這種方式。
前端的寫法:
var b = {
??? ReceiverId: 5,
??? ReceiverName: "will",
??? Sex: "F",
??? CreateDate: "2011-02-21"
};
$.ajax({
??? url: "/Home/test1",
??? type: "post",
??? cache: false,
??? data: b,
??? success: function(data) { alert(data.message); },
??? error: function(xhr, a, b) { alert(xhr.responseText); }
});
Action的寫法:
public ActionResult Test1(ReceiverInfo receiverInfo)
我們能正常的得到綁定后的數據。而且我們還能利用System.ComponentModel.DataAnnotations進行數據驗證。我們為ReceiverInfo做如下改動:
[System.ComponentModel.DataAnnotations.Required(ErrorMessage = "收貨人必須填寫")]
public string ReceiverName { get; set; }
并在前端為ReceiverName賦值為空字符串,再次執行,得到提示:
很好,不過我們有新的要求了,那就是傳遞更復雜的對象,比如對象套嵌對象,對象有集合屬性,這種方式不能勝任了。
4、利用MvcFutures的JsonValueProviderFactory
每一版的MVC都有一個MvcFutures,里面會有一些額外的功能,這些功能有些會加入下一個版本中,而這些功能在某些時候很有用處。我查看了里面的類,發現有一個類JsonValueProviderFactory正是處理復雜對象的提交和數據驗證。由于json對象需要特定解析才能使用默認的DefaultModelBinder,而這個解析過程需要在ValueProvider階段完成,所以需要實現特定的ValueProvider給DefaultModelBinder。我們需要實現一個ValueProviderFactory和IValueProvider,而MVC里面的DictionaryValueProvider(繼承了IValueProvider)已經足夠使用了,所以只需要繼承ValueProviderFactory實現其方法:public override IValueProvider GetValueProvider(ControllerContext controllerContext)即可,具體代碼您可以看JsonValueProviderFactory。
我們定義另一個類:
ReceiverInfoChild
public class ReceiverInfoChild
{
??? [System.ComponentModel.DataAnnotations.Required(ErrorMessage = "ChildId必須填寫")]
??? public string ChildId { get; set; }
}
并為類ReceiverInfo增加一個屬性public List ReceiverInfoChild { get; set; }
我們把JsonValueProviderFactory拿出來放在項目里面,然后在Global.asax里面注冊一下,就可以使用了。
protected void Application_Start()
{
??? AreaRegistration.RegisterAllAreas();
??? RegisterRoutes(RouteTable.Routes);
??? ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}
因為JsonValueProviderFactory中有:if (!controllerContext.HttpContext.Request.ContentType.StartsWith("application/json", StringComparison.OrdinalIgnoreCase))來判斷進來的請求是不是json對象,所以我們提交數據的時候需要這樣寫:
var ReceiverInfo = [
??????????? {
??????????????? ReceiverInfoChild: [{ ChildId: "1" }, { ChildId: "11"}],
??????????????? ReceiverId: 5,
??????????????? ReceiverName: "will",
??????????????? Sex: "F",
??????????????? CreateDate: "2011-02-21"
??????????? },
??????????? {
??????????????? ReceiverInfoChild: [{ ChildId: "2" }, { ChildId: "22"}],
??????????????? ReceiverId: 5,
??????????????? ReceiverName: "will",
??????????????? Sex: "F",
??????????????? CreateDate: "2011-02-21"
??????????? }
??????????? ];
$.ajax({
??? url: "/Home/test1",
??? type: "post",
??? cache: false,
??? contentType: "application/json;charset=utf-8",
??? data: JSON.stringify(ReceiverInfo),
??? success: function(data) { alert(data.message); },
??? error: function(xhr, a, b) { alert(xhr.responseText); }
});
其中JSON.stringify(ReceiverInfo)是將json對象轉換成字符串,您可以到
這里
下載該類庫。
在Action里面,我們這樣寫就可以了:
public ActionResult Test1(ListReceiverInfo> receiverInfo)
看一下調試的結果:
完全正常綁定了值。我們再看看數據驗證:
至此,我們實驗了四種方案:
第一種方案,最麻煩,而且容易出錯(可能跟我個人不喜歡拼接字符串有關系);
第二種方案,有一定的通用性,但是不利于數據驗證;
第三種方案,通用,可以進行有效的數據驗證,應對一般的需求夠用了,但是處理更復雜的對象不行;
第四種方案,幾乎可以處理我們遇到的所有情況
另外,這是在ASP.NET MVC2中的使用,到了ASP.NET MVC3,微軟已經把JsonValueProviderFactory作為內置的功能了。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
