如何将数据从控制器动作传递给局部视图...？

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从你的控制器动作中导出。希望这可以帮助。