Asp.Net MVC 5アクションリンクは、初めてクリックしたときのアクションメソッドを呼び出す

Question

私は電子商取引のWebサイトで作業しています。今私がしようとしているのは、ユーザーが "Open Modal"リンクをクリックすると、モーダルダイアログが開き、製品の詳細が表示されます。

ActionLinkを初めてクリックすると、Product ControllerのQuickViewアクションメソッドが呼び出され、製品の詳細情報が表示されます。ただし、別の製品のActionLinkをクリックすると、QuickViewアクションメソッドが呼び出されません。また、モーダルダイアログの内容には、前の製品の情報が表示されます。基本的には、問題は、アクションメソッドが初めて呼び出され、ActionLinkをクリックするということです。 ActionLinkをもう一度クリックすると、アクションメソッドはもう呼び出されません。ページを右クリックして要素を調べると、モーダルアクションリンクが正しく生成されていることがわかります。私はそれについてとても混乱しています。助けてください。

メインビュー：

<div id="product"> 
    @foreach (var product in Model.Products) 
    { 
     @Html.Partial("ProductSummary", product) 
    } 
</div> 

// The normal bootstrap modal with out any content in the modal-content div. Note that the id matches the data_target from the link 
<div id="modal-container" class="modal fade product_view" tabindex="-1" 
    role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 

     </div> 
    </div> 
</div> 

@section scripts { 
    // The normal bootstrap behavior is to only grab the content for the 
    // modal once, if you need to pull in different partial views then the data on 
    // the modal will have to be cleared. 
<script type="text/javascript"> 
    $(function() { 
     $('#modal-container').on('hidden.bs.modal', function() { 
      $(this).removeData('bs.modal'); 
      $('#modal-container .modal-content').empty(); 
     }); 
    }); 

    // callback from form modal 
    function success() { 
     alert("Success!"); 
    } 
</script> 

製品概要：

<div class="caption"> 
     <h4 class="pull-right">@Model.Price.ToString("c")</h4> 
     <h4> 
      @Ajax.ActionLink(Model.Name, "ProductDetail", new { productId = Model.ProductID, returnUrl = Request.Url.PathAndQuery }, 
       new AjaxOptions { UpdateTargetId = "content", InsertionMode = InsertionMode.Replace }) 
     </h4> 
    </div> 
    <div class="space-ten"></div> 
    <div class="btn-ground text-center"> 
     <button type="button" class="btn btn-primary" onclick="location.href='@Url.Action("AddToCart", "Cart", new { ProductId = Model.ProductID})'"> 
      <i class="fa fa-shopping-cart"></i> Add To Cart 
     </button> 

     <div> 
      // Create a link that calls the controller method that returns the partial view 
      @Html.ActionLink("Open Modal", "QuickView", "Product", new { ProductId = Model.ProductID }, new 
      { 
       // Needed to link to the html of the modal 
       data_target = "#modal-container", 
       // Tells the bootstrap javascript to do its thing 
       data_toggle = "modal" 
      }) 
     </div> 
    </div> 
    <div class="space-ten"></div> 
</div> 

クイックビュー：

<div class="modal-header"> 
    <a href="#" data-dismiss="modal" class="class pull-right"><span 
class="glyphicon glyphicon-remove"></span></a> 
    <h3 class="modal-title">@Model.Name</h3> 
</div> 
<div class="modal-body"> 
    <div class="row"> 
     <div class="col-md-6 product_img"> 
      <img 
src="http://img.bbystatic.com/BestBuy_US/images/products/5613/5613060_sd.jpg" 
class="img-responsive"> 
    </div> 
    <div class="col-md-6 product_content"> 
     <h3 class="cost"><span class="glyphicon glyphicon-usd"></span> @Model.Price </h3> 
     <div class="space-ten"></div> 
     <div class="btn-ground"> 
      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-shopping-cart"></span> Add To Cart</button> 
      <button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-heart"></span> Add To Wishlist</button> 
     </div> 
    </div> 
</div> 

製品contorllerでアクションメソッド：

public ActionResult QuickView(int productId) 
    { 
     Product prod = repository.Products 
      .FirstOrDefault(p => p.ProductID == productId); 

     return PartialView(prod); 
    } 

image of the inspect element

Answer 1

私に提案をくれた皆さん、ありがとうございます。この問題を解決するには、@Anthony McGrath、@ecKOと@Kumar_Vikasが提供するソリューションを組み合わせる必要があります。@Anthonyマクグラスとして

言及：

変更スクリプトから：

$('#modal-container').on('hidden.bs.modal', function() { 
    $(this).removeData('bs.modal'); 
    $('#modal-container .modal-content').empty(); 
}); 

へ：ここ

がソリューションです

その後

var emptyModalContent = function() { 
    $('#modal-container').removeData('bs.modal').find('.modal- 
content').empty(); 
}; 

$('#modal-container').on('hidden.bs.modal', function() { 
    emptyModalContent(); 
}); 

、@ecKOに従ってくださいと@ Kumar_Vikasのアイデアを確認し、@ Html.ActionLからアクションメソッドを呼び出すアクションリンクを変更します@Ajax.ActionLinkへのインク。

Answer 2

は、アクションリンクはサーバーを呼び出そうとする前に、モーダルコンテンツが空であることを確認してください。

モーダルが非表示になるたびにモーダルコンテンツを消去するようなjavascriptコードがあります。最初にアクションリンクをクリックしたときにモーダルに内容が残っている可能性はありますか？

EDIT：アクションリンクがクリックされたときに、モーダルコンテンツを空にonclickの機能を追加すること

してみてください。だから、以下のようにコードを変更することで、あなたのActionLinkの呼び出しでのonclickプロパティを追加します。

変更この：

$('#modal-container').on('hidden.bs.modal', function() { 
    $(this).removeData('bs.modal'); 
    $('#modal-container .modal-content').empty(); 
}); 

へ：

var emptyModalContent = function() { 
    $('#modal-container').removeData('bs.modal').find('.modal-content').empty(); 
}; 

$('#modal-container').on('hidden.bs.modal', function() { 
    emptyModalContent(); 
}); 

とアクションリンクへのonclickプロパティを追加します。

@Html.ActionLink("Open Modal", "QuickView", "Product", new { ProductId = Model.ProductID }, new 
      { 
       // Needed to link to the html of the modal 
       data_target = "#modal-container", 
       // Tells the bootstrap javascript to do its thing 
       data_toggle = "modal", 
       onclick = "emptyModalContent()" 
      })