前端基於easyui的mvc擴展(續)


回顧及遺留問題

  上一篇講解了基於easyui的mvc擴展的基本實現,已經降低了在mvc內使用easyui的難度,但是仍然還有一些問題:

  1. 當我們要給生成的控件設置一些其他的屬性(如:id)或者想要設置easyui控件的一些其他的可配置項
  2. 對於form表單提交時,也要讓form表單基於easyui的驗證機制來進行驗證

  這里要先提一下,上一篇的TagBuilder並不是微軟自帶的(位於System.Web.Mvc下),而是自己實現的,理由嘛,既然我們編碼了mvc下對於easyui的擴展,那么同樣也可以去擴展普通的web form(后面的文章會再進行擴展),TagBuilder的實現方式跟微軟提供的很相像,大家自己實現吧,^_^。

實現

  由於所要增加的額外屬性是以key、value方式存在的,如:id="myId" or onclick="findRecords"等,那么我們看以通過增加一個Dictionary<string, string>參數的方式來將我們需要的配置傳給構造easyui html的方法,大致的代碼如下:

Html.Combobox(m => m.StateId, "States", new Dictionary<string, string>
{
    { "id", "cboState" },
    { "data-options", "width: 100, editable: false" }
})

  TagBuilder內只要對傳入的字典進行此存儲,然后在生成Html的時候將KeyValuePair<string, string>轉化為key="value"形式的字符串就可以了。

  而對於form表單結合easyui的驗證原本easyui便提供了form表單的功能,只需要我們使用如下代碼,便可以進行驗證:

$('#myForm').form({
    onSubmit: function(){
        var isValid = $(this).form('validate');
        return isValid;
    },
    success: function(data){
        //這里不像jQuery那樣可以返回json對象,data永遠都是一個字符串,除非使用ajax form表單進行自己的擴展
    }
});

  由於mvc內對於表單驗證已經提供了支持,但是因為我們自己進行了自定義的擴展,那么在執行controll的Action的時候,mvc雖然會幫我們對表單的實體進行驗證,但並不會主動在驗證失敗的情況下阻止Action的執行,因此我們需要自己尋找其他的方式在表單實體驗證失敗的情況下,將失敗的信息返回到客戶端進行提示。

  我們知道所有的Controller都繼承自System.Web.Mvc.Controller(它是繼承自IController的),System.Web.Mvc.Controller有一個受保護的OnActionExecuting方式,當我們對方法的ActionExecutingContext的Result進行賦值的情況下,它會阻止原本要繼續執行的Action的觸發,而且Result內的值會回傳給客戶端,因此我們可以在此方法內對於表單實體是否驗證失敗來完成我們的操作,代碼如下:

protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
    if (ViewData.ModelState.IsValid)
    {
        base.OnActionExecuting(filterContext);
    }
    else
    {
        filterContext.Result = Content("{\"success\":false, \"message\":\"表單數據異常\"}");
    }
}

  這里要注意了,如果使用mvc自帶的Json方法來回傳數據的話,傳遞到客戶端永遠都只是{},這里大家可以使用Json.Net來將對象轉化為json。

  到了這里,該有的功能我們基本上都已經完成了,其實還有一些小問題沒有解決,那就是當我們配置控件屬性的時候,如果是函數的情況下,就只能將函數必須是全局的或者要寫在屬性的值里面,實在很不方便,或者大家可以跟我一樣,用其他的屬性來代替這些配置,我使用的方式如下:

@Html.Combobox(m => m.StateId, "States", new Dictionary<string, string>
{
    { "easyui", "onSelect:selectState,formatter:formatterState" }
})

@Html.Linkbutton("上傳", new Dictionary<string, string>
{
    { "bind": "click:uploadFile" }
})

  然后在js文件或者<script>腳本內對以上的格式進行解析,這樣就可以根據自己的方式來聲明函數了。

  其次就是老是要寫一大串的字典來聲明額外的屬性實在是很麻煩的事情,那么也可以使用json的方式將字符串直接寫入,代碼如下:

@Html.ValidatePassword(m => m.Password, @"{ validType: 'remote[\'/user/CheckPassword\', \'password\']', invalidMessage: '密碼有誤!' }")

  那么只要在后台將其解析為Dictionary<string,string>就可以了,方便了許多,有其他喜歡的格式也可以自己去定義,然后編碼相關的解析方法也是可以實現的。

  那么今天的后續部分就到這里結束了,有錯誤的地方請大家指出,謝謝大家!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM