JQuery Ajaxの後にパーシャルビューが適切にレンダリングされない

JQuery Ajaxを使用してAsp.Net MVC Partial Viewでフォームの投稿を送信します。JQuery Ajaxの後にパーシャルビューが適切にレンダリングされない

パーシャルビューは、ブートストラップタブのタブの1つの内側にあります（4つのタブがあり、各タブにはパーシャルビューがあります）。また、これらのタブをすべてカバーするビューがあります。そして、すべてをカバーするレイアウトがあります。

これは、カバービュー内のパーシャルビューのアクションメソッドの呼び出しです：

@Html.Action("AddProductPartial", "Products")

パーシャルビューのアクション：

[HttpPost] 
     public ActionResult AddProductPartial(ProductCategoryBrand pcb) 

     { 
      if (ModelState.IsValid) 
      { 
       Product p = new Product(); 
       p.CategoryID = Convert.ToInt32(pcb.CategoryViewModel.Kategori); 
       p.BrandID = Convert.ToInt32(pcb.BrandViewModel.BrandName); 
       p.ExchangeName = pcb.ExchangeViewModel.ExchangeName; 

       ProductRepository prep = new ProductRepository(); 
       prep.AddProduct(p) 
      } 
      loadBrands(); 
      getRates(); 

      return View(pcb); 

     }

jQueryのアヤックス：

$('#saveProduct').click(function() { 

    $.ajax({ 
     url: "/Products/AddProductPartial", 
     type: 'POST',   
     data: "{'CategoryID':" + categoryID + ", 'BrandID':" + brandID + ",'ExchangeName':" + exchangeName + "}", 
     async:true,    
     contentType: "application/json; charset=utf-8", 
     dataType: "json",   
     success: function (data) { 
      alert("success"); 
     }, 
     error: function (xhr, status, error) { 
      alert(xhr.responseText) 

     } 
    }); 
});

これらの記述を移入以下dropdownlisforからdb。私はこれらのメソッドを追加しました。なぜなら、部分ビューのdropdownlistforがAjaxのサブミット後にnull例外を与えていたからです。

loadBrands(); 
getRates();

これらのステートメントを追加した後、問題が発生しました。

サブミット後、パーシャルビューが奇妙にレンダリングされています。ブートストラップのナビゲーションタブは表示されなくなりました。パーシャルビューをカバーするビューはレンダリングされないためです。私は、この行を変更する場合：

return Partial View(pcb);

に

return View(pcb);

をその後独立し、すべてのレイアウトから、唯一のパーシャルビュー自体をレンダリングします。

助けてください。ありがとう。ここで

出典

2017-06-13 Zeynep

私はAjaxコードを見ることができますか？おそらく、ajax関数の成功のコールバックでは、部分を含むHTML要素の代わりにWebページ全体を置き換えています。 –

JQuery Ajaxコードを追加しました。 @ChristopherMMillerコードが長すぎると思われるので、パラメータを短縮しました – Zeynep

'@ Html.Action（" AddProductPartial "、" Products "）'を '@ Html.Partial（" AddProductPartial "）'とあなたの 'public ActionResult AddProductPartial '成功/エラー/新製品IDなど – JamieD77

は、部分図の最も単純な例である：

public class HomeController : Controller 
{ 
    [HttpPost] 
    public PartialViewResult GetXlFile() 
    { 
     return PartialView("_ExcelGrid"); 
    } 

    public ActionResult GetXlFile(int? id) 
    { 
     return View(); 
    }

_ExcelGrid.cshtml共有に：

A Partial View Info

ビュー：

<!DOCTYPE html> 
@*credit to 
    https://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor*@ 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index800</title> 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $('#pvButton').click(function (event) { 
       $.ajax({ 
        url: this.action, 
        type: "POST", 
        data: $(this).serialize(), 
        success: function (result) { 
         $('#result').html(result); 
        } 
       }); 
       return false; 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form> 
     <div> 
      <input id="pvButton" type="button" value="OK" /> 
      <div id="result"></div> 
     </div> 
    </form> 
</body> 
</html>

出典

2017-06-13 23:20:02 kblau

JQuery Ajaxの後にパーシャルビューが適切にレンダリングされない

答えて

関連する問題