0

MVC 3 を学習し、AJAX を使用して MVC でクライアント側の検証を使用しようとしています。

記事Call MVC 3 Client Side Validation for ajax postsに提案を含めましたが、これは私にとってはうまくいきません。私は何が欠けていますか??

私は申請書に以下を含めました。

ルート web.config ファイル:

<appSettings>
    <add key="webpages:Version" value="1.0.0.0" />
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

レイアウト ページのスクリプト:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

私のモデル:

[Table("Person")]     
public class Person
    {
        [Key]
        public int PersonID { get; set; }
        [Column("FullName")]
        [Required(ErrorMessage = "Give me a name.")]
        public string NameFull { get; set; }
        [Required(ErrorMessage = "Give me an email.")]
        public string EmailAddress { get; set; }
        [Required(ErrorMessage = "Give me a mobile number.")]
        public string MobileNo { get; set; }
        [ForeignKey("Agency")]
        [Required(ErrorMessage = "Give me an agency.")]
        public int AgencyID { get; set; }
        public virtual Agency Agency { get; set; }
    }

ajax 呼び出しを行うメソッド (onclick イベントで発生):

function LoadPage(SFORM, SACTION, SMETHOD) {
    $('#divLoading').slideDown(1);
    var doc = document.getElementById(SFORM)
    var dataform = $(doc).serialize();
    var $form = $(doc);
    if ($form.valid()) { 
        //Ajax call here 
        $.ajax({
            type: SMETHOD,
            url: SACTION,
            data: dataform,
            complete: function () {
                $("#divLoading").slideUp(1, function () { FinishLoad() });

            },
            success: function (data) {
                $("#divMain").html(data)

            }
        });
    }
}

ビュー (.cshtml):

<form id="frmCreate" name="frmCreate">
    @Html.ValidationSummary(true)
            <fieldset>
                <legend>Person</legend>

                <div class="editor-label">
                    @Html.LabelFor(model => model.NameFull)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.NameFull)
                    @Html.ValidationMessageFor(model => model.NameFull)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.EmailAddress)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.EmailAddress)
                    @Html.ValidationMessageFor(model => model.EmailAddress)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.MobileNo)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.MobileNo)
                    @Html.ValidationMessageFor(model => model.MobileNo)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.AgencyID, "Agency")
                </div>
                <div class="editor-field">
                    @Html.DropDownList("AgencyID", String.Empty)
                    @Html.ValidationMessageFor(model => model.AgencyID)

                </div>

                <p>
                   <input type="button" value="Create" onclick="LoadMenuItem('frmCreate','@Url.Action("Create", "Person")', 'POST')" />
                </p>
            </fieldset>
</form>
4

1 に答える 1

0

それを理解したようですが@using (Html.BeginForm(null, null, FormMethod.Get, new { name = "validator", id = "validator" }))、標準タグではなくフォームを作成するために使用し、検証したいビューの下部にあるスクリプトを使用して検証したいフォームを割り当てる必要があるようです$.validator.unobtrusive.parse("#validator");

これの素晴らしい点は、レイアウト ページに別の ID を持つ「親フォーム」があり、検証済みフォームと一緒に投稿したい隠しフィールドをラップすることができ、親フォームを投稿するだけでよいことです。検証は$.validator.unobtrusive.parse("#validator");、部分ビューのスクリプト内で割り当てたフォームで引き続き行われます。

于 2012-07-31T14:24:06.180 に答える