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

Question

I am new to MVC and working on MVC 4 with API services and got stuck at the passing of data to partial view which is modal popup,and i need to get all those data on clicking on the products column on modal popup but its not hapening exactly.I have passed the data ie productid to the controller though knockout js its coming but not visible on modal popup. Here is my js code:

    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());

And is my products page:

    <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>

and where @Html.Partial("_ProductModalPopup") is the partial view. The controller action action is:

  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);
        }

Can any one help me in sorting the problems from the above code .

Answer 1

What you're trying to do isn't going to work because the partial view is rendered before the knockout bindings are applied, but you want to pass knockout data to the partial view.

The flow you should follow is this:

1. Render Main Page with placeholder for partial view result
2. Create ko viewModel and applyBindings
3. ajax call for to Action that returns a PartialView
4. Place the result in the placeholder

This means that your main page shouldn't have any @Html.Partial() referring to the partial view you want to render, because that's rendered before knockout can run.

<!-- 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

You can try like this,

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

your partial view probably,

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

and you can load this partial view using ajax calls like,

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

like that you can send data to view from your controller action. Hope this helps.