你從未知道如此強大的ASP.NET MVC DefaultModelBinder

看到很多ASP.NET MVC項目還在從request.querystring或者formContext里面獲取數據，這實在是非常落后的做法。也有的項目建了大量的自定義的modelbinder，以為很牛，實際上也落后的很。

 

ASP.NET MVC提供了IModelBinder的默認實現，這個實現的類就叫DefaultModelBinder。我們在寫代碼的時候，幾乎感覺不到這個類的存在，因為這個類自動將request信息解析成action參數。本文將向大家展示這個類是多么強大，可以拯救大量的代碼。

 

先看個例子。假如有如下表單，用於編輯用戶信息以及該用戶的時間表。在這個例子中，我要利用DefaultModelBinder自動將整個表單數據解析成復雜實體類的實例。一行手工解析的C#代碼都不用寫。

 

 

對應的controller的代碼如下，很簡單：

public class DemoController : PublicControllerBase
{
    public ActionResult UserEditor()
    {
        return View();
    }

    [HttpPost]
    public string SaveUser(DemoUser user)
    {
        var result = string.Empty;
        if (user != null)
        {
            result = Serializer.ToJson(user);
        }
        return result;
    }
}

 

相關的實體類的定義，也很簡單：

public class DemoUser
{
    public string Username { get; set; }
    public string Email { get; set; }
    public string Language { get; set; }
    public Gender Gender { get; set; }
    public int[] RoleIds { get; set; }
    public List<ScheduledJob> Jobs { get; set; } 
}

public class ScheduledJob
{
    public string Job { get; set; }
    public string From { get; set; }
    public string To { get; set; }
}

public enum Gender
{
    Unknown = 0,
    Male = 1,
    Female = 2
}

 

請注意SaveUser這個action的參數，一個比較復雜的實體類的對象。DefaultModelBinder會自動將這個復雜的表單解析出來。這個保存的action將參數user直接序列化JSON字符串返回到瀏覽器。

 

下面看看HTML和JS。

 

HTML：

<form id="formUserEditor" action="/demo/saveuser" method="POST">
    <table class="form">
        <colgroup>
            <col width="100"/>
            <col width="auto"/>
        </colgroup>
        <tbody>
            <tr>
                <td>用戶名：</td>
                <td>
                    <input id="txtUsername" type="text" name="username" />
                </td>
            </tr>
            <tr>
                <td>Email：</td>
                <td>
                    <input id="txtEmail" type="text" name="email" />
                </td>
            </tr>
            <tr>
                <td>語言：</td>
                <td>
                    <select id="ddlLanguages" name="language">
                        <option value="zh-cn">中文</option>
                        <option value="en-us">英文</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>性別：</td>
                <td id="genders">
                    <input type="radio" name="gender" value="@(Taoad.Web.Publics.Controllers.Gender.Unknown)" id="rdUnknown" />
                    <label for="rdUnknown">未知</label>
                    
                    <input type="radio" name="gender" value="@(Taoad.Web.Publics.Controllers.Gender.Male)" id="rdMale" />
                    <label for="rdMale">男</label>
                    
                    <input type="radio" name="gender" value="@(Taoad.Web.Publics.Controllers.Gender.Female)" id="rdFemale" />
                    <label for="rdFemale">女</label>
                </td>
            </tr>
            <tr>
                <td>角色：</td>
                <td id="roles">
                    <input type="checkbox" name="roleids" value="1" id="cb1" />
                    <label for="cb1">管理員</label>
                    
                    <input type="checkbox" name="roleids" value="2" id="cb2" />
                    <label for="cb2">部門經理</label>
                    
                    <input type="checkbox" name="roleids" value="3" id="cb3" />
                    <label for="cb3">客戶</label>
                </td>
            </tr>
            <tr>
                <td>時間：</td>
                <td>
                    <ul id="jobs">
                        
                    </ul>
                    <input type="button" value="添加" id="btnAddJob"/>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="保存" id="btnSave"/>
                    <input type="button" value="取消" id="btnCancel" />
                </td>
            </tr>
        </tbody>
    </table>
</form>
<hr/>
<div id="json">
    
</div>

 

JS：

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnAddJob").click(function() {
            var $newLi = $(html);
            $("#jobs").append($newLi);
            bindLi($newLi);
        });

        $("#btnSave").click(function() {
            var data = $("#formUserEditor").serialize();
            $("#jobs li").each(function(i) {
                var prefix = "&jobs[" + i + "]";
                data += prefix + ".job=" + $(this).find(".job-id").val();
                data += prefix + ".from=" + $(this).find(".job-from").val();
                data += prefix + ".to=" + $(this).find(".job-to").val();
            });
            demo.ajax.post("/demo/saveuser", data, function(json) {
                $("#json").html(json);
            });
        });
    });

    function bindLi(li) {
        $(li).find(".btn-add").click(function () {
            var $li = $(this).closest("li");
            var $newLi = $(html);
            $li.after($newLi);
            bindLi($newLi);
        });
        $(li).find(".btn-delete").click(function () {
            $(this).closest("li").remove();
        });
    }

    var html = '<li>\
                    <select class="job-id">\
                        <option value="job1">工作1</option>\
                        <option value="job2">工作2</option>\
                    </select>\
                    <input type="text" placeholder="開始時間"  class="job-from"/>\
                    ————\
                    <input type="text" placeholder="結束時間"  class="job-to"/>\
                    <a href="javascript:void(0);" class="btn-add">添加</a> |\
                    <a href="javascript:void(0);" class="btn-delete">刪除</a>\
                </li>';
</script>

 

如果是如下的表單數據：

 

點擊保存之后，返回的JSON數據為：

 

可以看到所有的表單數據都保存成功了。

 

再看看request信息：

 

請注意content-type的值。

 

實際上，POST到服務器的表單數據只是一個字符串，如下：

 

復制出來就是下面這樣的字符串：

 ajax=true&username=leo&email=leo%40gmail.com&language=zh-cn&gender=Unknown&roleids=1&roleids=3&jobs[0].job=job1&jobs[0].from=9:00&jobs[0].to=10:00&jobs[1].job=job2&jobs[1].from=10:00&jobs[1].to=11:00 

 

由此可知，可用JS來拼接字符串，將整個表單通過鍵值對的形式序列化成一個字符串，再將該字符串傳到服務器，這時DefaultModelBinder就可以自動解析實體類了。

 

關鍵點在於，對於List或者數組類型的數據，要加上數組下標。這樣，任意復雜的數據結構，DefaultModelBinder都可以自動解析了。

 

思考一：

如果表單數據的鍵帶有”demouser”的前綴，如下所示，那么這個action的參數還能自動解析嗎?

 Demouser.username=leo&demouser.email=[e-mail]&demouser.jobs[0].job=job1&..... 

 

Action如下：

[HttpPost]
public string SaveUser(DemoUser user)
{
    var result = string.Empty;
    if (user != null)
    {
        result = Serializer.ToJson(user);
    }
    return result;
}

 

如果action參數名稱又改成demouser呢？

 

思考二：

如果將action的參數名稱改成如下代碼所示，那么是否可以自動解析？（表單數據不帶”demouser”前綴）

 ajax=true&username=leo&email=leo%40gmail.com&language=zh-cn&gender=Unknown&roleids=1&roleids=3&jobs[0].job=job1&jobs[0].from=9:00&jobs[0].to=10:00&jobs[1].job=job2&jobs[1].from=10:00&jobs[1].to=11:00 

 

Action如下：

[HttpPost]
public string SaveUser(DemoUser demoUser)
{
    var result = string.Empty;
    if (demoUser != null)
    {
        result = Serializer.ToJson(demoUser);
    }
    return result;
}

 

思考三：

如果action的參數是用另一個類包起來了，如下代碼所示，那么表單數據應該是怎么樣的字符串才能使DefaultModelBinder可以自動解析？

public class UserEditorViewModel
{
    public DemoUser DemoUser { get; set; }
}

[HttpPost]
public string SaveUser(UserEditorViewModel model)
{
    var result = string.Empty;
    if (model != null)
    {
        result = Serializer.ToJson(model);
    }
    return result;
}

 

思考四：

如果action是這樣定義的，那么表單數據的字符串又該怎么拼？

[HttpPost]
public string SaveUser(DemoUser demoUser, List<ScheduledJob> scheduledJobs)
{
    var result = string.Empty;
    if (demoUser != null)
    {
        demoUser.Jobs = scheduledJobs;
        result = Serializer.ToJson(demoUser);
    }
    return result;
}

 

歡迎討論。