5

ネットで入手できる情報を少し探してみましたが、まとめることはできませんでした。ログインページを利用するアプリケーションがあります。現在、ビューをどのモデルにもバインドしていません。ただし、2 つの入力 (ユーザー名とパスワード) があります。Asp.net Mvc に付属している jquery の目立たない検証機能を起動したいと考えています。サンプルは次のとおりです。

ログイン テンプレート (アンダースコア テンプレート エンジン) である Twitter ブートストラップを使用したバックボーン テンプレート。

@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>
               }

ログイン ビューの 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

そして、ブラウザからの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();
    }

誰かがこの問題に光を当てることができますか? エラーを表示するために、この jquery の目立たないコードで Twitter ブートストラップ検証メッセージを配置する方法は? または、jquery 控えめな検証プラグインを拡張して、twitter ブートストラップ/バックボーンと連携して検証を実行しますか?

私の基準は、ユーザー名とパスワードが NULL または空白であってはならないということです。モデル バインドなしでフォームを検証するための単純なケース (ログイン ページをどのモデルにもバインドしたくない)。むしろ、バックボーンと Twitter のブートストラップ スタイルを拡張して、jquery の控えめなプラグインを接続します。

4

3 に答える 3

9

mvc控えめな検証を使用するときに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" />
}
于 2012-10-11T10:43:01.193 に答える
3

ミカの答えは的を射ている。これに追加する唯一のことは、ユーザーが実際にページのエラーを修正したときに機能するようにすることです。これを行うには、MVC の検証概要コードをオーバーライドして、.control-group から .error クラスも削除する必要があります。これを追加したMiikaのコードは次のとおりです。

$(function() {
    var validator = $('form').data('validator');
    var aspErrorPlacement = validator.settings.errorPlacement;
    validator.settings.errorPlacement = function (error, element) {
        aspErrorPlacement(error, element);
        if (error.length > 0 && error[0].innerHTML === "") {
            error.closest('div.control-group').removeClass('error');
        }
    };
    $('span.field-validation-valid, span.field-validation-error').each(function () {
        $(this).addClass('help-inline');
    });

    $('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('div.control-group').each(function () {
                if ($(this).find('span.field-validation-error').length == 0) {
                    $(this).removeClass('error');
                }
            });
        } else {
            $(this).find('div.control-group').each(function () {
                var control = $(this).find('span.field-validation-error')
                if (control.length > 0) {
                    $(this).addClass('error');
                }
            });
        }
    });
});

これでうまくいくはずです。

于 2012-10-12T22:01:09.503 に答える
1

ASP.NET MVC のこの場所は、本当に何と言うか... 壊れている?

提案された解決策を見てきましたが、気に入ったものが見つからなかったので、自分で書きました。

2 つの問題があります:
1) 強調表示/非強調表示の実行方法をオーバーライドする必要があります
2) 2 つ目の問題は最初の問題が原因であり、jquery.validation.unobtrusive.js. 問題は、動作方法が原因で、setDefaultsメソッドを使用して強調表示/非強調表示をオーバーライドできないことです。jquery.validatejquery.validation.unobtrusive.js

したがって、解決策は次のとおりです。

(function ($) {
  $.fn.bootstrapifyValidation = function () {
    var caller = this;
    function boostrapHighlight(element) {
        $(element).closest(".control-group").addClass("error");
        $(element).trigger('highlated');
    };

    function boostrapUnhighlight(element) {
        $(element).closest(".control-group").removeClass("error");
        $(element).trigger('unhighlated');
    };

    caller.each(function (i, o) {
        var settings = $(o).data('validator').settings;
        settings.highlight = boostrapHighlight;
        settings.unhighlight = boostrapUnhighlight;
    });

    caller.find("div.validation-summary-errors").addClass("alert alert-block alert-error");
 }
})(jQuery)

$(function () {
   $('form').bootstrapifyValidation();
})
于 2013-07-11T13:24:17.060 に答える