ボタンを押してページを更新する

Question

初心者デベロッパーここはスタックオーバーフローに関する私の最初の質問です。私は開発者としての私の最初の役割を果たしており、他の誰かが始めたアプリを仕上げるというタスクが与えられており、ユーザーが特定のボタンをクリックしたときにページを更新するのは苦労している。

ページにはアイテムのリストがあり、各アイテムの横にチェックボックスがあり、チェックマークを付けて[アイテムの削除]ボタンをクリックできます。理論的には、そのボタンをクリックすると、ページが完成したときにページが更新されるか、少なくともリストのあるページのセクションがリフレッシュされるはずです。アイテムが削除されていますが、リフレッシュが機能していないため、削除するアイテムが実際に画面から消える前に、ページを手動で更新する必要があります。

はここで、コントローラのボタンの背後にあるものです：

[HttpPost] 
     public ActionResult UpdatePartStatus(List<tblPart> parts, tblArea area) 
     { 
      _LookupService.UpdatePartStatus(parts); 
      // return RedirectToAction("Details", area); 
      // return Redirect("~/Details"); 
      return RedirectToAction("Parts", "Menu", false); 
      // <% return Response.Redirect(Request.RawUrl); %> 
      // return Response.Redirect(Request.RawUrl); 
      // return Page.Redirect(Page.Request.RawUrl, false); 
      // return Redirect(Request.UrlReferrer.ToString()); 
      // return View(); 
      // return Redirect(HttpContext.Request.UrlReferrer.AbsoluteUri); 

     } 

コメントアウトだ最初の行は、以前の開発者はそれを左方法です。コメントアウトされている他のすべての行は、私がこれまで試みてきたもので、どれも有効ではありません。コメントアウトされていないものが、これを投稿する前に試した最後のものです。これらの試みのほとんどは、スタックオーバーフロー

を上まわり、ここで検索した結果であり、ここでは詳細ビューからスクリプトです：

<script> 
    $('#btnAjax').click(function() { 

      ....validation code I removed for this post.... 

      $.ajax({ 
       type: 'post', 
       url: '/Parts/UpdatePartStatus', 
       contentType: 'application/json; charset=utf-8', 
       data: JSON.stringify(data), 
       dataType: 'json' 
      }) 
     } 
    }); 
</script> 

は、そして、ここで私はいくつかの他の記事で参照を見てきましたMapRouteコードですこのトピック：

routes.MapRoute(
       name: "Default", 
       url: "{controller}/{action}/{id}", 
       defaults: new { controller = "Parts", action = "Menu", id = UrlParameter.Optional } 

は、彼らが出る前に、以前の開発者が言った最後のものは、これは普通のすべての標準的なMVC、何もありませんが、私はアイデアを実行しているということでした。

誰もが提供できる考えやアドバイスを感謝します。

おかげ

Answer 1

は、単純にAjaxのリクエストにsuccess機能を追加します。

$.ajax({ 
    type: 'post', 
    url: '/Parts/UpdatePartStatus', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(data), 
    dataType: 'json', 
    success: function() { 
     location.reload(); 
    } 
}) 

Answer 2

あなたが質問で共有コードは、現在のページをリロードする何かを持っていません。サーバーに送信するajaxフォームを作成しているように見えます。したがって、リダイレクト応答を返すのは実際には意味がありません。

ページをリロードする場合は、done ajaxコールのイベントで行うことができます。

$.ajax({ 
    type: 'post', 
    url: '/Parts/UpdatePartStatus', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(data) 
}).done(function(res){ 
    window.location.href = window.location.href; // This will reload the page 
}).fail(function(a, b, c) { 
    console.log('ajax call failed'); 
    }); 

しかし、再びページをリロードしている場合は、Ajaxのポストをやってのポイントは何ですか？ページを再現する代わりに、javascriptを使用して削除した特定のDOM要素を単に削除することができます。これにより、ページ全体が再ロードされることなく、ユーザーに部分的なページ更新エクスペリエンスが与えられます。

削除したアイテムのIDがわかっている場合は、削除したアイテムのIDをjQueryセレクタで使用して削除できます。

var idOfDeletedItem = "someDomElementId"; 
$.ajax({ 
    type: 'post', 
    url: '/Parts/UpdatePartStatus', 
    contentType: 'application/json; charset=utf-8', 
    data: JSON.stringify(data) 
}).done(function(res){ 
    // Let's remove that DOM element from the DOM 
    $("#"+idOfDeletedItem).remove(); 

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

Answer 3

あなたがアヤックスを使用している場合、あなたは私にとって

public JsonResult UpdatePartStatus(List<tblPart> parts, tblArea area) 
    { 
     _LookupService.UpdatePartStatus(parts); 

     return Json(null); //This will always return a null result to your ajax call indicating a success 
    } 

を使用する必要があり、私は通常、JSONの結果をこのように返します：行う、

try { 
    LookupService.UpdatePartStatus(parts); 
    return Json(new { Success = true}); 
} 
catch { 
    return Json(new { Success = false}); 
} 

そして、あなたのAJAX呼び出し中にこれは：

$.ajax({ 
type: 'post', 
url: '/Parts/UpdatePartStatus', 
contentType: 'application/json; charset=utf-8', 
data: JSON.stringify(data), 
dataType: 'json', 
success: function(result) { 
    if (result.Success) 
     location.reload(); 
    } else { 
     alert("Delete failed"); 
    } 

} 
})