メインアクションがAJAXから呼び出されたときにリダイレクトToActionが機能しない

Question

ASP.NET MVC Core 1.1アプリケーションでは、OrdersMainビューに続いて、入力タグが表示され、そのタグの下に、既存のすべての注文のリストが表示されます。ビューのAdd Orderボタンをクリックすると、次のアクションメソッドAddOrder(...)が呼び出され、最初に注文がデータベースに追加され、OrdersMain(...)アクションにリダイレクトされます。しかし、リダイレクト部分は機能しません。注文は正常にデータベースに追加されます。ただし、OrdersMainビューは更新されていないため、追加された直後に新たに追加されたオーダーはOrdersMainビューに表示されません。 質問：ここで紛失している可能性があり、注文が追加された後にOrdersMainビューに新しい注文を表示させる方法はありますか？ 注：：私はFormとHttpPostを使用することで上記が達成できることを知っています。しかし、私はAJAXコールを使用して同じことを達成することに興味があるとHttpGet

OrdersMain.cshtmlビュー：[アクションOrdersMainから呼び出さ]

@model MyProj.Models.MyViewModel 
... 
... 
Add Order: <input ....../> 
... 
List of Existing Orders: 
<div>...</div> 
... 
@section scripts 
{ 
    <script> 
    $(document).ready(function() { 

$('.Addbtn').click(function() { 

    var newOrdVal = $('.txtAddRec').val(); 

      $.ajax({ 
     url: '@Url.Action("AddOrder", "ContrlName")', 
       data: { sNewOrdVal: newOrdVal }, 
       contentType: 'application/json', 
       type: 'GET', 
       success: function(obj) { 
      alert('Suceeded'); 
     }, 
       error: function(obj) { 
      alert('Error occurred'); 
     } 
    }); 
}); 


    }); 
    </script> 
} 

コントローラー：

[HttpGet] 
public async Task<IActionResult> AddOrder(string sNewVal) 
{ 

    if (ModelState.IsValid) 
    { 
     try 
     { 
      ProdOrder oRac = new ProdOrder { orderName = sNewVal }; 

      if (oRec != null) 
      { 
       _context.ProdOrder.Add(oRec); 
       await _context.SaveChangesAsync(); 
      } 
      return RedirectToAction("OrdersMain"); //this should reload the page and will display the new value on the list of orders on the page 
     } 
     catch 
     { 
      return NotFound(); 
     } 
    } 

    return RedirectToAction("OrdersMain"); 
} 

Answer 1

ajaxフォームの送信時にリダイレクト応答を返すのは意味がありません。リダイレクト応答（302応答）は、通常のフォーム送信を行うときに便利です。

また、アクションメソッドをHttppostアクションにすることをおすすめします。データを更新するメソッドはすべてPOSTでなければなりません。

ページの更新に関する問題に対処するオプションはほとんどありません。

1. AJAX呼び出しがこのアプローチでは

を行った場合、それはデータの新しいセットを反映しているので、あなたはすでにページ内の項目のリストについては、マークアップをUDPATEリスト上の部分ページ更新を行います。これは複数の方法で行うことができます。 1つは、すべてのアイテムのhtmlマークアップを再度取得し、アイテムのリストを保持しているコンテナを更新するために、単にajax呼び出しを行うことです。別のオプションは、アクションメソッドが新しい単一項目に必要なマークアップを返し、jQuery append()メソッドを使用して既存のリストに追加することです。

以下のサンプルは、新しいアイテムのIDが保存されているJSONレスポンスを返します。そのアイテムを取得するために別のajax呼び出しを行います。あなたのAddOrderアクションメソッドを想定し

$(document).ready(function() { 

    $('.Addbtn').click(function (e) { 

     e.preventDefault(); 
     var newOrdVal = $('.txtAddRec').val(); 

     $.ajax({ 
      url: '@Url.Action("AddOrder", "Home")', 
      data: { sNewVal: newOrdVal }, 
      type:'POST' 
     }).done(function(res) { 
       if (res.status === "success") { 
       $.get("@Url.Action("GetItem")?id=" + res.newItemId, function(newItem) { 
        $("#listContainer").append(newItem); 
       }); 
       } 
     }).fail(function(a, b, c) { 
     console.log('ajax call failed'); 
     }); 

    }); 

}); 

は、新しいアイテムIDを持つJSONレスポンスを返し、あなたはアクションIDを取るGetItemを取得し、リストに新しい項目のために必要なマークアップを返しています。

[HttpPost] 
public async Task<IActionResult> AddOrder(string sNewVal) 
{ 
    ProdOrder oRac = new ProdOrder { orderName = sNewVal }; 
    _context.ProdOrder.Add(oRec); 
    await _context.SaveChangesAsync(); 
    return Json(new {status = "success", newItemId = oRec.Id}); 
} 
public ActionResult GetItem(int id) 
{ 
    var t=db.ProdOrder.Find(id); 
    //I am simply returning the orderName wrapped in p tag. 
    // You may change this to call a Partial view 
    // which returns the markup for the single item 
    return Content("<p>" + t.orderName + "</p>"); 
} 

2.リロードページ

あなたのAJAX呼び出しの成功ハンドラではJavaScriptを使用して、ページをリロードすることができます。

$.ajax({ 
    // your ajax params 
}).done(function(res){ 
    window.location.href = window.location.href; 

}).fail(function(a, b, c) { 
    console.log('ajax call failed'); 
}); 

私はページをリロード好むではないでしょう。これは私のAJAXフォームの使用目的を完全に破っているからです。

角度のようなフロントエンドMV *フレームワークを使用する場合は、リスト内の項目をレンダリングするために使用されるデータソース（配列でもよい）を削除するだけです。

Answer 2

ajax postまたはajax getを新しいviewに移動することはできません。 ajaxを使用する場合、viewはObjに配置されます。これを行うには、submitまたはRe locationページが必要です。その場合、リダイレクトの実行は正しく行われます