Как передать данные от действия контроллера на частичный просмотр ...?

Question

Я новичок в MVC и работал над MVC 4 с сервисами API и зациклился на передаче данных на частичное представление, которое является модальным всплывающим окном, и мне нужно получить все эти данные при нажатии на столбец продуктов по модальному всплытию, но его а не точно. Я передал данные, т. е. 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. Создать kò ViewModel и 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 ew от вашего действия контроллера. Надеюсь это поможет.