解决MVC添加自定义模型绑定ModelBinder

解决MVC添加自定义模型绑定ModelBinder

在MVC中，我们有可能会自定义一些自己想要接收的参数，那么可以通过ModelBinder去实现.

 

新建一个JObjectModelBinder类

 public class JObjectModelBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
            var stream = controllerContext.RequestContext.HttpContext.Request.InputStream;
            stream.Seek(0, SeekOrigin.Begin);
            string json = new StreamReader(stream).ReadToEnd();
            return JsonConvert.DeserializeObject<dynamic>(json);
        }
    }

然后在MVC路由中去注册，添加完成之后我们就可以在MVC中可以接收JObject参数

public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            //for dynamic model binder
            ModelBinders.Binders.Add(typeof(JObject), new JObjectModelBinder()); 

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional },
                namespaces: new string [] { "XXXXXX" }
            );
        }
    }

引入一个JS类库

var fwytech = {};

function obj2str(o) {
    var r = [];
    if (typeof o == "string") return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    if (typeof o == "undefined") return "undefined";
    if (typeof o == "object") {
        if (o === null) return "null";
        else if (!o.sort) {
            for (var i in o)
                r.push("\"" + i + "\"" + ":" + obj2str(o[i]))
            r = "{" + r.join() + "}"
        } else {
            for (var i = 0; i < o.length; i++)
                r.push(obj2str(o[i]))
            r = "[" + r.join() + "]"
        }
        return r;
    }
    return o.toString();
}

//form表单转化成JS的Json对象
fwytech.serializeObject = function (form) {
    var o = {};
    $.each(form.serializeArray(), function (index) {
        if (o[this['name']]) {
            o[this['name']] = o[this['name']] + "," + this['value'];
        } else {
            o[this['name']] = this['value'];
        }
    });
    return o;
};

//将JS的Json对象转化成Json字符串
fwytech.jsonToString = function (o) {
    var r = [];
    if (typeof o == "string")
        return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t") + "\"";
    if (typeof o == "object") {
        if (!o.sort) {
            for (var i in o)
                r.push(i + ":" + obj2str(o[i]));
            if (!!document.all && !/^\n?function\s*toString\(\)\s*\{\n?\s*\[native code\]\n?\s*\}\n?\s*$/.test(o.toString)) {
                r.push("toString:" + o.toString.toString());
            }
            r = "{" + r.join() + "}";
        } else {
            for (var i = 0; i < o.length; i++)
                r.push(obj2str(o[i]));
            r = "[" + r.join() + "]";
        }
        return r;
    }
    return o.toString();
};

前台UI界面

<h2>Login</h2>    
    <div id="message" style="font-size:16px; color:red"></div>
    <form id="frmlogin" name="frmlogin">
        用户名:<input type="text" id="usercode" name="usercode" /><br />
        密码:<input type="password" id="password" name="password" />
        <input type="button" onclick="login()" value="提交" />
    </form>

<script>
     function login() {
            var form = $("#frmlogin");
            var message = $("#message");
            var oUser = fwytech.serializeObject(form);
            //alert(user.usercode);
            console.log(oUser);
            var userString = fwytech.jsonToString(oUser);
            $.ajax({
                type: "POST",
                url: "/ShopCard/DoLogin",  //提前的url
                //data: ko.toJSON(self.form),  //把表单元素自动序列化为josn模型
                data:userString,
                dataType: "json",
                contentType: "application/json",
                success: function (d) {  //提交成功后的回调函数
                    if (d.status == 'success') {
                        message.html("登陆成功正在跳转，请稍候...");
                        window.location.href = location.href;
                        //window.location.href = "/Home/Index";
                    } else {
                        message.html(d.message);
                    }
                },
                error: function (e) {  //提交发生错误之后的客户端回调函数
                    message.html(e.responseText);
                },
                beforeSend: function () {  //在ajax请求发送前等待时触发的事件
                    form.find("input").attr("disabled", true);
                    message.html("正在登陆处理，请稍候...");
                },
                complete: function () { //请求发送后的事件处理，主要防止重复提交
                    form.find("input").attr("disabled", false);
                }
            });
        }
</script>

后台的控制器及相应的service层

　　　　[HttpPost]
        public JsonResult DoLogin(JObject request)
        {
            var message = new Sys_userService().Login(request);
            return Json(message, JsonRequestBehavior.DenyGet);
        }

        public ViewResult Login()
        {
            return View();
        }

public class Sys_userService
    {
        public object Login(JObject request)
        {
            var UserCode = request.Value<string>("usercode");
            var Password = request.Value<string>("password");

            //用户名密码检查
            if (String.IsNullOrEmpty(UserCode) || String.IsNullOrEmpty(Password))
                return new { status = "error", message = "用户名或密码不能为空！" };

            //用户名密码验证
            var result = UserCode.Equals("admin") && Password.Equals("123456");

            if (!result)
                return new { status = "error", message = "用户名或密码不正确！" };

            //返回登陆成功
            return new { status = "success", message = "登陆成功！" };
        }
    }

这样操作就可以在前台form表单中接受的json字符串提交到后台，通过Jobject对象接收，其实在后台中也是一个Json对象！！