2

以下はMVC3の私のエリアです

ここに画像の説明を入力

モデル

public class AdminModule
{
    [Display(Name = "My Name")]
    [Required]
    public String MyName { get; set; }
}

部分図

@model _1.Areas.Admin.Models.AdminModule
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <p id="getDateTimeString">
    </p>
    <input type="submit" value="Click here" id="btn" />
}

<script language="javascript" type="text/javascript">
    $('#btn1').click(function () {
        debugger;
        var $form = $("#myForm");

        // Unbind existing validation
        $form.unbind();
        $form.data("validator", null);

        // Check document for changes
        $.validator.unobtrusive.parse(document);

        // Re add validation with changes
        $form.validate($form.data("unobtrusiveValidation").options);

        if ($(this).valid()) {
            var url = '@Url.Action("Index_partialPost", "Admin", 
                                                new { area = "Admin" })';
            $.post(url, null, function (data) {
                alert(data);
                $('#myForm').html(data);
            });
        }
        else

        return false;
    });
</script>

コントローラーのアクション

[HttpPost]
public ActionResult Index_partialPost(AdminModule model)
{
    return PartialView("_PartialPage1", model);
} 

[HttpGet]
public ActionResult Index_partial()
{
    return PartialView("_PartialPage1");
}

フォームを送信して必須フィールドを空のままにするたびに。それは私が思うサーバーに行きます。ここで調べた...

ここに画像の説明を入力

私の混乱は=> 以下のコードを変更して、 $.post を使用してクライアント側でモデルに記載されているのと同じ検証メッセージを表示するにはどうすればよいですか?

4

1 に答える 1

2

目立たないクライアント側の検証を有効にすることができます。次のスクリプト参照を追加することから始めます。

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

その後：

@model _1.Areas.Admin.Models.AdminModule
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <p id="getDateTimeString"></p>
    <input type="submit" value="Click here" />
}

<script type="text/javascript">
    $('#myForm').submit(function () {
        if ($(this).valid()) {
            $.post(this.action, $(this).serialize(), function(data) {
                $('#myForm').html(data);

                $('#myForm').removeData('validator');
                $('#myForm').removeData('unobtrusiveValidation');
                $.validator.unobtrusive.parse('#myForm');
            });
        }
        return false;
    });
</script>

アップデート：

実際のコードをメールで送っていただいたので、非常に多くの問題があることがわかりました。それらすべてを検討する代わりに、すべてをゼロから完全に書き直すことを好みます。

したがって、次のことから始め~/Areas/Admin/Views/Shared/_LayoutPage1.cshtmlます。

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        <ul>
            <li>@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
        </ul>
        @RenderBody()
    </div>
    <script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js" type="text/javascript"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

すべてのスクリプトをファイルの最後に移動し、カスタム スクリプトを配置する専用のセクションを追加したことに注目してください。

次に、 に移動します~/Areas/Admin/Views/Admin/Index.cshtml。

@model _1.Areas.Admin.Models.AdminModule
@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_LayoutPage1.cshtml";
}

<div id="formContainer" data-url="@Url.Action("Index_partial", "Admin", new { area = "Admin" })"></div>
<input id="BTN" type="button" value="Button" />

@section Scripts {
    <script type="text/javascript" src="@Url.Content("~/areas/admin/scripts/myscript.js")"></script>
}

このボタンは送信するフォームに含まれていないため、ボタンのタイプを から に置き換えましたsubmit。また、あなたが持っていbuttonた要素を取り除きました。これは役に立たないだけでなく、無効なマークアップである DOM で重複した ID になってしまいました。また、コンテナー div で HTML5 属性を使用して、フォームをロードするサーバー側スクリプトの URL を示しました。そして、このファイルで最後に行ったのは、レイアウトで以前に定義したセクションをカスタム スクリプトでオーバーライドすることでした。<p>id="myForm"data-urlscripts

次の部分はカスタム スクリプトです: ~/areas/admin/scripts/myscript.js:

$('#BTN').click(function () {
    var $formContainer = $('#formContainer');
    var url = $formContainer.attr('data-url');
    $formContainer.load(url, function () {
        var $form = $('#myForm');
        $.validator.unobtrusive.parse($form);
        $form.submit(function () {
            var $form = $(this);
            if ($form.valid()) {
                $.post(this.action, $(this).serialize(), function (data) {
                    $form.html(data);
                    $form.removeData('validator');
                    $form.removeData('unobtrusiveValidation');
                    $.validator.unobtrusive.parse($form);
                });
            }
            return false;
        });
    });
    return false;
});

ここではかなり標準的なコードです。ボタンのクリック イベントをサブスクライブし、AJAX 呼び出しを使用してパーシャルを読み込みます。これが完了するとすぐに、目立たない検証フレームワークに、新しく追加されたコンテンツを DOM に解析するように指示します。.submit次のステップは、イベントをサブスクライブしてフォームを AJAXify することです。また、successハンドラーではコンテナーのコンテンツを再度置き換えるため、目立たない検証フレームワークに新しいコンテンツを解析するよう指示する必要があります。

最後にパーシャル:

@model _1.Areas.Admin.Models.AdminModule

@using (Html.BeginForm("Index_partialPost", "Admin", FormMethod.Post, new { id = "myForm" }))
{
    @Html.LabelFor(i => i.MyName)
    @Html.TextBoxFor(i => i.MyName)
    @Html.ValidationMessageFor(i => i.MyName)
    <p id="getDateTimeString"></p>
    <input type="submit" value="Click here" />
}

ここで、javascript の痕跡を完全に取り除いたことに気付くでしょう。javascript は別のファイルに属します。ビューとは関係ありません。マークアップとスクリプトを混在させないでください。個別のスクリプトを使用すると、動的マークアップが大幅に小さくなるだけでなく、外部スクリプトのブラウザ キャッシュ、縮小化などを利用できます。このパーシャルで気付くもう 1 つのことは、<script>ノードを削除することです。 jQuery と jQuery.validate スクリプトを参照していた場所。レイアウトですでにそれを行っています。2 回繰り返さないでください。

于 2013-02-07T07:43:31.960 に答える