web-dev-qa-db-ja.com

クライアントフォームの検証がMVCのモーダルダイアログで機能しない

作成フォームをモーダルダイアログに変更していますが、jquery控えめな検証が機能しなくなり、修正方法がわかりません。

Index.cshtmlには、モーダルダイアログをトリガーするためのリンクがあります。

<a href="#" id="createCustomer">Create</a>
@section scripts{
<script type="text/javascript">
$('#createCustomer').on('click', function () {
        $.get('/Customer/Create', function (data) {
            $('#modalContainer').html(data);
            $('#myModal').modal({});
        });
    });

Create.cshtmlは部分的なビューです。

@model Demo.Web.Models.CustomerVm
@using (Html.BeginForm("Create", "Customer", FormMethod.Post, new { @id="createForm" }))
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true)

        <div class="form-group">
            @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")        
}

コントローラには、フォームの作成のために部分的なビューを返すactionmethodがあります。

public ActionResult Create()
    {
        return PartialView("Create");
    }

モーダルを表示

public class CustomerVm
{
    [Required]
    public int Id { get; set; }
    [Required]
    public string Name { get; set; }        
}

モーダルダイアログに変更する前は..すべてが機能していましたが、今は修正方法がわかりません。ダイアログで検証を機能させるにはどうすればよいですか？明らかに、クライアントスクリプトの検証ルールを書き直したくありません..ビューモデルから機能させたいです..ありがとう。

asp.net-mvcdata-annotationsunobtrusive-validationasp.net-mvc-viewmodel
12
lawphotog

ページの読み込み時にフォームがページに追加されないため、控えめな検証ではフォームが取得されません。これを修正するには2つの方法があります。

  1. 初期ロード時にフォームをページに含めます。これにより、フォームが認識され、検証が行われます。部分ビューを非表示のdivにスローできます。次に、JavaScriptはモーダルダイアログを表示するだけです。
  2. フォームをページに追加した後、目立たない検証でフォームを手動で登録します。 $.validator.unobtrusive.parse("#id-of-the-form");のようなもの
44
cadrell0

ダイアログを動的にロードする場合は、含まれている要素の変更イベントに控えめな検証を登録するだけです。

$('#modal-container').change(
    function() {
        $.validator.unobtrusive.parse("#your-form-id");
});
5
ComeIn

フォームの作成ビューに次のスクリプトを追加するだけです。

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" 
    type="text/javascript">
</script>

<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" 
    type="text/javascript">
</script>
2
Sam

作成ページの部分ビュー->モーダルヘッダー、モデルボディ、モーダルフッター、および<script>your code </script>内のjavascriptコード-<script>your code</script>を@section Scripts{}に入れないでください。

1
Sanjay