2016-11-14 5 views
4

を処理しています。私はAjaxとJqueryを初めて使用していますので、私はあなたが何かばかげたことをしようとしている場合に私を許してください。 MVC 5とAjax.Beginform 、 と私は何をしようとしている私は私がそれを正しく取得しているModelStateとJqueryの検証作業をしている場合は、検証エラーが見つかった場合は再びビューを返します、jQueryとそれを検証する必要があるajaxフォームを持って、Ajax.BeginForm 2つの異なるonSuccessレスポンス、MVC 5、C#

[HttpPost] 
public ActionResult Index(AddProduct model) 
{ 
    if (ModelState.IsValid) 
    { 
     // connect to the database save data etc... 
     return PartialView("~/Views/Shared/_MyModal.cshtml"); 
    } 
    else 
    { 
     return View(model); 
    } 
} 

私はデータを保存し、部分ビューを返す必要がありModelState.IsValid場合:私は、検証メッセージは、ここで例えば、ユーザーのブラウザに表示されますので、私のフォームを更新する必要があり、この場合には、私のコントローラであり、 それ以外の場合は、検証メッセージを表示するために全体のビューを返し、それを行うには、私はAjaxフォームのTargetIdを更新して、 と、ここでAjaxフォーム:他の

<div id="result"> 
@using (Ajax.BeginForm("Index", new AjaxOptions 
    { 
     InsertionMode = InsertionMode.Replace, 
     UpdateTargetId = "result", 
     HttpMethod = "POST", 
     OnBegin = "onBegin();", 
     OnComplete = "onCompleated();", 
     OnSuccess = "onSuccess()", 
     OnFailure = "onFailure()" 
})) 
{ 
@Html.ValidationSummary(true) 
<div id="form1" class="form-horizontal"> 
    <div class="row"> 
     <div class="form-group"> 
      @Html.LabelFor(m => m.Name, new { @class = "col-md-2 control-label" }) 
      <div class="col-md-10"> 
       @Html.TextBoxFor(m => m.Name, new { @class = "form-control"  }) 
       @Html.ValidationMessageFor(m => m.Name, String.Empty, new { @class = "text-danger" }) 
      </div> 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(m => m.Price, new { @class = "col-md-2 control-label" }) 
      <div class="col-md-10"> 
       @Html.TextBoxFor(m => m.Price, new { @class = "form-control" }) 
       @Html.ValidationMessageFor(m => m.Price, String.Empty, new { @class = "form-help form-help-msg text-red" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      <button class="btn btn-default col-md-2 col-md-offset-2" type="submit">Save &nbsp;&nbsp;</button> 
     </div> 
    </div> 
</div> 
} 
    </div> 

私は部分的なビューを返し、ブートストラップモーダルと私はそのままそれを維持する必要があるとだけ表示AJAXフォームするtargetIdを更新しない、この場合には必要として表示されますモーダルですが、問題はModelState.IsValidまたはIs not Validの両方で発生します。ajax形式のすべてのレスポンスをonSuccessメソッドで発生させます。これは正常かどうかわからず、javascriptのonsuccess()メソッドです。

function onSuccess() { 
    $('#myModal').modal('hide') 
    $("#resultModal").modal({ 
     backdrop: 'static', 
     keyboard: false 
    }); 
    $('#resultModal').on('hidden.bs.modal', function (e) { 
     window.location = "/product"; 
    }); 
} 

$(# 'myModal')。モーダル( 'hide')は進行中です。私は投稿が終了した後に非表示にし、次のステップは結果を表示します。

  • iは、検証エラーが存在しことが起こるならばうまくAjaxフォームでUpdatetargetIdを使用してフォームを更新するために取得するが、私は戻っていた場合、それはどのような方法が起こるのです:検証エラーなしで細かい実行し、 問題があります検証エラーまたは私のためにモーダルを気遣っている部分的なビューは、両方の状況でフォームが消えて、それは何か私はやらなければならないことです 私は場合にはフォームを保持する必要がありますeturnコンテンツは部分的なビューであり、ModelStatの検証エラーで更新されました。多分私はすべてを理解できませんが、もし私がいたら、私は軌道に戻すための説明が必要です。

  • 私は醜いコードをやっていましたが、上記のようにonSuccess()Mehtodが好きではありませんでした。私は結果を閉じるときにイベントを使用しました。きれいで、私はそれが好きではない、私は存在するなら何かプロフェッショナルが必要です。

は、事前にありがとう

+0

ねえ、私の解決策をチェックしましたか? – MDDDC

+0

申し訳ありませんが、私はそれをチェックして正直言って、あなたがあなたのソリューションが私に便利なので、私が考えたのは初めての見解です。私はそれを試してみたいと思っていますが、私はそれがうまくいくと思いますあなたの答えは十分ですが、あなたが投稿したコントローラにいくつかのコードエラーがあると思います。それから、もう一度あなたに感謝します.. –

+0

ありがとう、それは魅力的な作品です^ _ ^! 私はそれを長く適用するのに時間がかかりました。私はそれに多大な貢献をしてくれました。もう一度あなたに感謝しています。 このソリューションのプロフェッショナルな強化が見つかった場合、回答を更新してください。 –

答えて

2

私は完全にあなたの問題を理解し、私はあなたに私はこのケースを処理するために使用しています方法を示すために準備ができています。

したがって、ModelStateが有効かどうかに依存しないたびにonSuccessメソッドが呼び出されるため、応答を少しずつ処理する必要があります。 だからあなたの[HttpPost]この方法は、次のようになります。

[HttpPost] 
     public ActionResult Index(AddProduct model) 
     { 
      if (ModelState.IsValid) 

      { 
       return Json(new {isValid = true, data = this.RenderPartialViewToString("ViewWhenModelStasteIsValid",model,false)}); 
      } 
      else 
      { 
       return Json(new { isValid = false, data = this.RenderPartialViewToString("ViewWhenModelStasteIsNotValid", model, false) }); 
      } 
     } 

public static string RenderPartialViewToString(this Controller controller, string viewName, object model) 
     { 
      if (string.IsNullOrEmpty(viewName)) 
      { 
       viewName = controller.ControllerContext.RouteData.GetRequiredString("action"); 

      } 
      controller.ViewData.Model = model; 

      using (var sw = new StringWriter()) 
      { 
       var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName); 
       var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw); 
       viewResult.View.Render(viewContext, sw); 
       return sw.GetStringBuilder().ToString(); 
      } 
     } 

フォームからUpdateTargetIdを脱いで、成功関数に手動でそれを処理する必要がありますビューで。

だからあなたのするonSuccess関数は、あなたがONSUCCESS =「するonSuccess()」からフォームに変更する必要がありますので、するonSuccess関数に応答データを渡すようにしてください。この

function onSuccess(result, ref) { 
     if (result.isValid) { 
      jQuery("#result).html(result.data); 
      } else { 
      jQuery("#form1").html(result.data); 
     } 
    } 

のようになります。OnSuccess = "onSuccess(data、this)"

だからあなたの形式は次のようになります。

@using (Ajax.BeginForm("Index", new AjaxOptions 
    { 
InsertionMode = InsertionMode.Replace, 
HttpMethod = "POST", 
OnBegin = "onBegin();", 
OnComplete = "onCompleated();", 
OnSuccess = "onSuccess(data,this)", 
OnFailure = "onFailure()" 
})) 

これは何が必要であると思います。

+0

この回答をお試しいただきありがとうございます。それは非常に有用な1日のサー! –

関連する問題