ajaxでサブミットした後にフォームを置き換えます

Question

私はajaxリクエストを稼働させることができましたが、コントローラのアクションから戻ってきたレスポンスに基づいてフォームを終了したいと思います。私は私のURLを更新せず、私のアクションメソッドをヒットすることができる午前

<form asp-controller="MyController" asp-action="Create" data-ajax" data-ajax-method="POST"> 
    <div class="form-group"> 
    <label asp-for="Email"></label> 
    <input asp-for="Email" class="form-control"> 
    </div> 
    <div class="form-group"> 
    <label asp-for="Comment"></label> 
    <input asp-for="Comment" class="form-control"> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 

：

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

public IActionResult Create(MyviewModel model) 
{ 
    if(!ModelState.IsValid) 
    { 
    return BadRequest(ModelState); 
    } 

    var r = _context.Save(model); 

    if(r.IsError) 
     prepare error message and send them back 

    return OK(r.Data); 
} 

かみそりとにかく十分に話を、私はこれらの行で何かを持っています。私は要求を処理することができます。しかし、私はどのように応答を取得し、それに応じて行動するのですか？私はそれを集めたdata-ajax-successと-failure私の友人かもしれないが、私はどのように考えている。 、エラーの場合は

<div class="alert alert-success" role="alert">Comment successfully submitted</div>. 

バックサーバーから来ているエラーを読み、ユーザーに警告：

は、私は基本的にのようなもので、成功したフォームを交換したいです。この場合、ユーザーが再試行できるようにフォームを保管してください。

私はこのjavascriptの世界では全く新しい、誰かが最小限の作業のソリューションを提供するか、正しい方向に私を指差しますか？

Answer 1

ご希望の場合は、JavaScriptコードを使用しないでください。

例のように、フォームタグにdata-ajax-modeおよびdata-ajax-update属性を追加します。

コントローラから、正しいメッセージを設定した後にPartialViewを返します。

<div id="myDiv"> 
    @if (ViewBag.SuccessMessage != null) 
    { 
     <div class="alert alert-success" role="alert">@Html.Raw(ViewBag.SuccessMessage)</div> 
    } 
    else 
    { 
     <form asp-controller="MyController" asp-action="Create" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#myDiv"> 
      <div class="form-group"> 
       <label asp-for="Email"></label> 
       <input asp-for="Email" class="form-control"> 
      </div> 
      <div class="form-group"> 
       <label asp-for="Comment"></label> 
       <input asp-for="Comment" class="form-control"> 
      </div> 
      @if (ViewBag.ErrorMessage != null) 
      { 
       <div class="alert alert-danger" role="alert">@Html.Raw(ViewBag.ErrorMessage)</div> 
      } 
      <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
    } 
</div> 

フォームのポストアクションでは、正しいメッセージを設定し、PartialViewと同じビューを返します。

[HttpGet] 
public IActionResult Create() 
{ 
    return View(); 
} 

[HttpPost] 
public IActionResult Create(MyviewModel model) 
{ 
    if(!ModelState.IsValid) 
    { 
     ViewBag.ErrorMessage = "Input not valid!"; 
     return PartialView(model); 
    } 

    var r = _context.Save(model); 

    if(r.IsError) 
    { 
     ViewBag.ErrorMessage = "Error when saving..."; 
     return PartialView(model); 
    } 

    ViewBag.SuccessMessage = "Created successfully!"; 
    return PartialView(model); 
}