asp.net-mvc-3 - 使用 bootstrap、Asp.net Mvc 3 和 Backbone 进行火 jquery 不引人注目的验证

Question

我试图在网上找到一些可用的信息，但无法将它们连接在一起。我有一个使用登录页面的应用程序。现在我没有将 View 绑定(bind)到任何模型。但是我有两个输入(用户名和密码)。我想启动 Asp.net Mvc 附带的 jquery 不引人注目的验证功能。以下是示例:

带有 Twitter bootstrap 的 Backbone 模板，它是登录模板(下划线模板引擎)。

@using (@Html.BeginForm("Login", "Home", FormMethod.Post, new { @class = "form-horizontal" }))
               {
               <div class="modal-body">
                   <div class="control-group">
                        <label class="control-label" for="inputEmail">Email</label>
                        <div class="controls">
                            @*<input type="text" id="inputEmail" placeholder="Email">*@
                            @Html.TextBox("Email", "", new { @placeholder = "Email" })
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="inputPassword">Password</label>
                        <div class="controls">
                            <input type="password" id="inputPassword" placeholder="Password">
                        </div>
                    </div>
                    <div class="control-group">
                    @*<div class="controls">
                        <label class="checkbox">
                            <input type="checkbox"> Remember me
                        </label>
                        <button type="submit" class="btn">Sign in</button>
                    </div>*@
                </div>
             </div>
               <div class="modal-footer">
                    @*<a class="btn" href="#" id="closeBtn">Close</a>*@ <button type="submit" class="btn btn-primary" >Login</button>
               </div>
               }  

用于登录 View 的 Coffeescript

require ['backbone','bootstrap','jqValUnobtrusive'],(Backbone) ->   
class LoginView extends Backbone.View

    el:$("#content")        

    initialize: ->                      
        @render()
        @validationOptions = @options.validationOptions

    validationOptions:
        rules:
            'Email':
                required:true
            'user[password]':
                required:true
    close:->
        console.log "hello"
    render : ->     
        $(@el).find("#login").html _.template $("#loginTemplate").html() 

App = new LoginView

我的 Controller 在浏览器没有 JavaScript 的情况下将服务器端逻辑添加到验证规则

[HttpPost]
    [ValidateInput(true)]
    public ActionResult Login(FormCollection Form)
    {
        ViewBag.Message = "Method posted";
        if (Form["Email"] == string.Empty)
        {
            ModelState.AddModelError("Email", "Please Provide a Username");
            ModelState.SetModelValue("Email", ValueProvider.GetValue("Email"));

        }
        return View();
    }

有人能够解决这个问题吗？如何将 Twitter Bootstrap 验证消息与此 jquery 不引人注目的代码一起显示错误？或者扩展 jquery 不引人注目的验证插件以与 twitter bootstrap/backbone 一起执行验证？

我的标准是用户名和密码不应为 NULL 或空白。一个简单的研究案例，用于在没有模型绑定(bind)的情况下验证表单(我不想将登录页面绑定(bind)到任何模型)。而是将 jquery 不引人注目的插件与扩展主干和 twitter bootstrap 样式 Hook !

Answer 1

这是我在使用 mvc 非侵入式验证时用 Bootstrap 样式替换 jquery 错误消息的方法:

 /*
 * Form Validation
 * This script will set Bootstrap error classes when form.submit is called.
 * The errors are produced by the MVC unobtrusive validation.
 */
 $(function () {
     $('form').submit(function () {
         $(this).find('div.control-group').each(function () {
             if ($(this).find('span.field-validation-error').length == 0) {
                 $(this).removeClass('error');
             }
         });

         if (!$(this).valid()) {
             $(this).find('div.control-group').each(function () {
                 if ($(this).find('span.field-validation-error').length > 0) {
                     $(this).addClass('error');
                 }
             });
         }
     });
     $('form').each(function () {
         $(this).find('div.control-group').each(function () {
             if ($(this).find('span.field-validation-error').length > 0) {
                 $(this).addClass('error');
             }
         });
     });
 });
 var page = function () {
     //Update that validator
     $.validator.setDefaults({
         highlight: function (element) {
             $(element).closest(".control-group").addClass("error");
         },
         unhighlight: function (element) {
             $(element).closest(".control-group").removeClass("error");
         }
     });
 } ();
 /* End Form Validation */

这个问题的评论中有一些讨论，但是这个脚本背后的技术是用数据注释装饰的 Asp.Net MVC ViewModel 对象(在我的登录案例中是[必需])，它被传递到 View 并显示为以下内容(除非需要更多内容，否则仅包含相关位)。

@using (Html.BeginForm())
{
    ...
    <div id="errors"></div>
    @Html.ValidationSummary(true, "Sign in was unsuccessful", new { @class = "alert alert-block alert-error" })
    <div id="laatikko" class="well">
        <div class="control-group">
        <label for="kayttajaTunnus" class="control-label">@Kaannokset.Yhteiset.Sähköposti</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.kayttajaTunnus)
            @Html.ValidationMessageFor(m => m.kayttajaTunnus, null, new { @class = "help-inline" })
        </div>
    </div>
    <div class="control-group">
        <label for="salasana" class="control-label">@Kaannokset.Yhteiset.Salasana</label>
        <div class="controls">
            @Html.PasswordFor(m => m.salasana)
            @Html.ValidationMessageFor(m => m.salasana, null, new { @class = "help-inline error" })
        </div>
    </div>
    <input id="signIn" class="btn btn-primary" data-loading-text="Searching for user..." type="submit" value="Sign In" />
}