前端傳值給后台的若干種方式

1、最原始的表單方式

前端：

<form action="/library/test" method="POST">
       <input id="Name" name="Name" type="text" value="">
       <input id="Id" name="Id" type="text" value="">
       <input type="submit" value="Save" />
</form>

后台：

       [HttpPost]
        public ActionResult Test(FormCollection fc)
        {
            Person person=new Person(){Id = fc["Id"], Name = fc["Name"]};

            return Json(person.Id+" "+person.Name, JsonRequestBehavior.AllowGet);
        }

2、使用MVC默認的模型綁定

 [HttpPost]
        public ActionResult Test(Person person)
        {
           return Json(person.Id+" "+person.Name, JsonRequestBehavior.AllowGet);
        }

當前端發送數據后，person已經被填充了

因為在MVC中，Person會默認綁定到后台的參數類型（模型綁定器會去去在請求的各種數據中查找對應的上的字段，若找到，則相應的數據到參數person里面）

 

3、自定義modelbinder綁定

首先，需要一個實現了IModelBinder接口的類，這個類的作用是依據需求，自定義從請求的各種數據（包括表單、URL Query String字）中去查找要填充的值。這些請求數據位於IValueProvider中

    public class PersonModelBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            IValueProvider provider = bindingContext.ValueProvider;
            return new Person
                       {
                           Id = provider.GetValue("Name").AttemptedValue,   //本例中將位於valueProvider請求的數據中key為Name的值賦給Id
                           Name = provider.GetValue("Id").AttemptedValue
                       };
        }
    }

然后創建一個特性類，該類實現了CustomModelBinderAttribute

    public class PersonBinderAttribute : CustomModelBinderAttribute
    {
        public override IModelBinder GetBinder()
        {
            return new PersonModelBinder();
        }
    }

 

最后，使用時，在Person參數前，加上剛剛自定義的特性[PersonBinder]

       [HttpPost]
        public ActionResult Test([PersonBinder]Person person)
        {
           // AddIntoDb(person);
           return Json(person.Id+" "+person.Name, JsonRequestBehavior.AllowGet);
        }

效果：

 

這樣的綁定效果，甚至直接通過訪問http://localhost:11169/library/test?name=Benjamin&id=11223，后台的person也能被填充。

原因是模型綁定器通過valueprovider查找了Url QueryString中相匹配的參數。

 

4、通過手動序列化和反序列化

前端:

 

<script type="text/javascript">
    $(function () {
        var person = new Object();
        person.Id = "112233";
        person.Name = "Benjamin";
        var personStr=JSON.stringify(person);   //使用json2.js的序列化方法
        $.ajax({
            url: window.UrlContent("/Library/Test?tick=" + Math.random()),
            data: { personStr: personStr },
            type: "POST",
            success: function (result) {
            }
        });
    });
</script>

 

 

后台使用Newtonsoft.Json dll 的方法反序列化

 

 public ActionResult Test(string personStr)
        {
           Person person=JsonConvert.DeserializeObject<Person>(personStr);
           return Json(person.Id+" "+person.Name, JsonRequestBehavior.AllowGet);
        }

 

這種方法的優點是，在前端裝配數據時自由度比較大，數據來源不需要僅從表單元素中獲取。