如何將數據從控制器動作傳遞給局部視圖...？

Question

我是新來的MVC和MVC 4與API服務工作，並卡住了數據傳遞到局部視圖這是模式彈出，我需要獲取所有這些數據點擊產品欄上的模式彈出窗口，但它的不完全hapening.I已經通過數據即productid到控制器雖然淘汰賽js它的來臨，但在模式彈出不可見。 這裏是我的js代碼：

var ProductViewModel = function() { 
     var self = this; 
     $.ajax({ 
     url: urlProduct + '/AllProducts/', 
     async: false, 
     dataType: 'json', 
     success: function (json) { 
      self.productsData = json; 
     } 
    }); 
    self.getModalProductInfo = function (product) { 
     alert("Get Product Info - for ID:" + product.ProductId);  
     var self = this; 
     $.ajax({ 
      url: urlProduct + '/Modalpopup/' + product.ProductId, 
      //url : '@Url.Action("/Modalpopup/", "Products")'+=product.ProductId, 
      //url += '/?min=' + ui.values[0] + '&max=' + ui.values[1]; 
      //$("#ajaxresult").load(url), 
      //'@{Html.RenderAction("Modalpopup", "Products",new {id=product.ProductId});}'    
      async: false, 
      dataType: 'json', 
      success: function (json) { 
       self.modalPopupdata = json; 

      } 
     }); 
     } 

} 

ko.applyBindings(new ProductViewModel()); 

，是我的產品頁面：

<div class="span3" style="margin-right:-1em;"> 
      <ul class="thumbnails" style="height:280px;"> 
        <li > 

        <div class="thumbnail zoom" id="wrapper"> 

       <a href="#portfolioMod1" data-toggle="modal" data-bind="click:$parent.getModalProductInfo"> 
       <div data-bind="foreach:ProductImages"> 
       <!-- ko if: SortOrder === 1--> 
        <img data-bind="attr:{src:Product_Image_path}" /> 
       <!-- /ko -->  
       </div>      
       </a> 


       <!-- Start: Modal -->    
       @Html.Partial("_ProductModalPopup") 
       <!-- End: Modal --> 

<div id="SL13" style="margin-bottom:0px; border-bottom:1px solid #dedede; height:20px">3 colors</div> 

<div class="text" style="display:none;"><img src="~/Images/thumb1.gif" /><img src="~/Images/thumb2.gif" /> 
<img src="~/Images/thumb3.gif" /><img src="~/Images/arrow.gif" align="right"/></div> 



<div style="margin-bottom: -3px;" data-bind="text:ProductName" ></div> 
<div ng-controller="RatingDemoCtrl"><rating value="rate" max="5" readonly="isReadonly"></rating></div> 
    <div style="font-weight: lighter;margin-bottom: 5px;" data-bind="foreach:ProductInfo" > 
       <!-- ko if: Key === 'Price'--> 
        <span style="color:#fe3c3e;" data-bind="text:Value"></span> 
       <!-- /ko -->  
</div> 

<div class="text" id="SD1" > 
<button type="submit" class="btn btn-inverse btn-small" onclick="redirect13();" > 
<small style=" font-size:8px; "><strong>ADD TO BAG</strong> 
</small> 
</button> 
<span style="float:right" align="top"><button type="submit" class="btn btn-danger btn-small" onclick="redirect12();" > 
<small style=" font-size:8px; ">CHECK OUT</small> 
</button> 
</span> 
</div> 
<div data-bind="text:ProductId" style="display:none"><div> 
    <input id="pid" data-bind="text:ProductId" /> 
           </div> 
         </li> 
       </ul>  
      </div>   
</div> 

，並在那裏@ Html.Partial（ 「_ ProductModalPopup」）是局部視圖。 控制器動作動作是：

public ActionResult Modalpopup(int id) 
     { 
      ModalPopup modalid = new ModalPopup(); 
      modalid.Productid = id; 
      ViewBag.Pid = id; 
      ViewBag.ModalPopup = modalid.Productid; 
      ViewBag.Message = "The ProductID:"; 
      return PartialView("_ProductModalPopup",id); 
     // return RestJsonCRUD.InvokeReadCall(URL + "/ProductRest/GetProductDetailsByID/" + id, null); 
     } 

任何一個可以幫助我在整理從上面的代碼中的問題。

Answer 1

你想要做的是不會工作，因爲局部視圖是在應用挖空綁定之前渲染的，但是你想要將挖空數據傳遞給局部視圖。

應該執行的流程是這樣的：

1. 渲染主頁與佔位局部視圖結果
2. 創建KO視圖模型和applyBindings
3. Ajax調用的行動，返回一個PartialView
4. 將結果放在佔位符中

這意味着您的主頁不應該有一個ny @Html.Partial()指的是你想渲染的局部視圖，因爲在敲擊可以運行之前渲染的是。

<!-- Start: Modal -->    
    <div id="modalPlaceHolder"></div> 
<!-- End: Modal --> 

self.getModalProductInfo = function (product) { 
    alert("Get Product Info - for ID:" + product.ProductId);  
    var self = this; 
    $.ajax({ 
     url: urlProduct + '/Modalpopup/' + product.ProductId, 
     type: 'GET', // you're getting html, not posting anything 
     success: function (partialViewResult) { 
      $('#modalPlaceholder').html(partialViewResult); 

     } 
    }); 
    } 

Answer 2

你可以嘗試這樣的，

public ActionResult MyPartialView(int id) 
{ 
ModalPopup pop=repository.GetModalPop(id); 
return View(pop); 
} 

您可能局部視圖，

@{ 
Layout=null; 
} 
@model Project.Models.ModalPop 
<h1>@Model.Name</h1> 
... 
... 
... 

，您可以使用Ajax調用像加載這個局部視圖，

$('#divPlaceholder').load('/Home/MyPartialView?id='+$('#txt').val()); 

就像你可以發送數據到vi從你的控制器動作中導出。希望這可以幫助。