3

序章

この投稿は、Microsoft MVC ヘルパーとネイティブの jquery ajax の混合に関するものです。途中で遭遇した主な問題は次のとおりです。

  1. 二重投稿投稿
  2. @Html.ValidationMessageFor
    属性を出力しない

要件

  1. フォームを検証して投稿する必要があります (id = "my-form")

  2. フォームは検証属性で装飾されたモデルにバインドされているため、@Html.ValidationMessageFor などのヘルパー メソッドを利用して目立たないメリットを活用したいと考えています。

  3. クライアント側とサーバー側の両方の検証が必要です (サーバー側ではデータベースで一意の名前チェックを行います)

  4. フォームを送信して追加のフォーム データを追加するときに、クライアント側の処理を行う必要があります。

反復ステップ

ステップ1

ネイティブ jquery を使用せずに開始し、Microsoft ヘルパーを使用して ajax フォームを作成しました。

@using (Ajax.BeginForm( ...

すべてが宣伝どおりに機能しました。これにより、目立たない検証が行われましたが、カスタマイズされたフォーム データの投稿要件を満たしていませんでした。

そのため、送信プロセスをオーバーライドすると思いました。

ステップ2

ドキュメントの準備ができたら、新しいイベント ハンドラーを接続します。

$(document).ready(function () 
{
    // Rebind validators
    $.validator.unobtrusive.parse('#my-form');

    // Hook up submit event
    $("#my-form").submit(SubmitForm);
});

そして、私の送信機能では、独自のフォームデータ処理を行うことができます:

function SubmitForm(e) 
{
    // Suppress normal event behaviour
    e.preventDefault();

    // Validate the form
    var valid = $("#my-form").validate();
    if (valid.errorList.length > 0)
        return;

    // Collect up form data manually
    var formData =  ...(code removed for clarity)

    // Display animated gif
    $("#ajax-loader").css("display", "inline")

    // Post Form
    $.post(
            '@Url.Action("MyAction", "MyController")',   // url
            formData,                                   // data
            SuccessFunction                             // success
        )
        .error(ErrorFunction);                         // error
}

さて、シーンは設定されました。

問題

1 つの問題は、2 種類の ajax を混在させていることです。これは二重投稿につながります。fiddler を使用すると、投稿が 2 回行われていることがわかります。(1 回は micosoft フォーム宣言用、もう 1 回は jquery 投稿用) 2 つのハンドラーが接続されているためです。少しグーグルで調べてみると、jqueryを使用して1つのハンドラーを削除している人がいることがわかりましたが、すべてが少し面倒に見えました。

ステップ3

そこで、@using (Ajax.BeginForm( ... 構文を単純なフォーム タグに変更しました。

<form id = "my-form">
   ...
</form>

問題

現在、 @Html.ValidationMessageFor は機能していません。firebug を使用すると、フォーム入力に検証属性が適用されていないことがわかります。

@Html.ValidationMessageFor は、フォーム ヘルパーと組み合わせてのみ機能するようです。

私は Ajax.BeginForm(... を使用できません。

ステップ4

だから私は次に使用しました：

 @using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "my-form" })) 
 {....

私は純粋に Html.BeginForm を使用して、@Html.ValidationMessageFor に処理を実行させています。カスタム イベント ハンドラーがフォーム送信プロセスを引き継ぐため、"MyAction" および "MyController" パラメーターはすべて冗長です。

解決済み

すべてが機能するようになりました

  1. 二重提出禁止
  2. @Html.ValidationMessageFor を使用した目立たない検証
  3. カスタマイズされたフォームの処理/送信
  4. クライアント側とサーバー側の検証

私の質問。

これは正しいアプローチですか？これらの線に沿って他の誰かの経験を聞くことに興味があります.

よろしく

フィル

4

1 に答える 1

0

通常、このタイプのシナリオでは、 Fluent Validationで提案されているアプローチが好きです。さて、まず最初に、JQueryでチェックできるクライアントで検証を生成し、サーバー側で強制検証を作成/生成することもできます。例に示すようにクラスでルールを定義し、そのクラスを使用して検証を確認することを意味します。そのため、サーバー側でチェックします。私は通常、HTMLを書くためだけにajaxを使用します。ほとんどの場合、閉じ括弧やいくつかのことを忘れてしまうため、ヘルパーは優れていますが、Ajax.Beginformをサポートしていません。シンプルなBeginformがいいです。

私は通常、ビューにはシンプルで明確な HTML またはヘルパーが必要であるという経験則に従います。ネストされた div やその他のものを少なくしようとしました。

このトピックについてさらに詳細が必要な場合はお知らせください。これについてウェブ上で見つけることができる良い記事はほとんどありません。必要に応じて、共有できます。

于 2013-01-09T10:27:05.063 に答える