3

と を使用ASP.NET MVC 4してjQuery Validateいます。

ページにテキストボックスとボタンがあります。これはボタンであり、送信ボタンではありません。ボタンをクリックすると、テキスト ボックスに入力された数値が検証され、2 つの部分ビューのうちの 1 つが表示されます。

ここに私のHTMLマークアップがあります:

@Html.TextBoxFor(x => x.ChangeIncidentNumber)
<button id="verifyButton" type="button">Verify</button>
@Html.ValidationMessageFor(x => x.ChangeIncidentNumber)

jQuery Validate を使い始める前に、次のようにしました。

$(document).ready(function () {
     $('#verifyButton').click(function () {
          $.ajax(
          {
               type: "POST",
               url: "/Server/GetChangeIncidentDetails",
               data: { changeIncidentNumber: $('#ChangeIncidentNumber').val() },
               dataType: "html",
               success: function (result) {
                    var domElement = $(result);
                    $("#changeIncidentDetails").html(domElement);
               }
          });
     });
});

私のGetChangeIncidentDetails行動方法：

public ActionResult GetChangeIncidentDetails(string changeIncidentNumber)
{
     ImplementationType implementationType = GetImplementationType(changeIncidentNumber);

     try
     {
          if (implementationType == ImplementationType.Change)
          {
               Change change = changeService.FindChangeByNumber(changeIncidentNumber);
               if (change != null)
               {
                    ChangeViewModel viewModel = Mapper.Map<ChangeViewModel>(change);

                    return PartialView("ChangeInformation", viewModel);
               }
               else
               {
                    // If it is null then I want to display an error message on the front end
               }
          }
          else if (implementationType == ImplementationType.Incident)
          {
               // Code is almost similar as above
          }
          else
          {
          }
     }
     catch (Exception ex)
     {
          // Handle error
     }
}

上記のアクション メソッドに入る前に、jQuery Validate を画像に追加して、クライアント側の検証を処理しました。これは私が現在持っているものです：

$(document).ready(function () {
     $("#searchForm").validate({
          rules: {
               ChangeIncidentNumber: "required"
          },
          messages: {
               ChangeIncidentNumber: "Required"
          }
     });

     $('#verifyButton').click(function () {
          $('#searchForm').valid();
     });
});

2 つをマージする方法がわかりません。検証と ajax 呼び出しを一緒に実行できますか。別々にしておく必要がありますか。また、クライアント側のエラー メッセージを表示するにはどうすればよいif change == nullですか?

4

1 に答える 1

1

私はあなたができると信じています：

  $('#verifyButton').click(function () {
          $('#searchForm').validate();

          if($('#searchForm').valid()){    
              $.ajax({
                   type: "POST",
                   url: "/Server/GetChangeIncidentDetails",
                   data: { changeIncidentNumber: $('#ChangeIncidentNumber').val() },
                   dataType: "html",
                   success: function (result) {
                       var domElement = $(result);
                       $("#changeIncidentDetails").html(domElement);
                       }
              });
          }
     });

構文を正確にチェックしなかったことに注意してください } または )

エラーを返すには、次のようなアクション メソッドから json オブジェクトを返すことができます。

{success:true/false, 
 data:"jsondatafromactionmethod",
 error:"errormessagehere"}

成功した場合は、html の置換/挿入を実行します。それ以外の場合は、任意の方法でエラーを表示します。

于 2013-03-20T09:35:58.347 に答える