如何将数据从控制器操作传递到部分视图......？答案

【问题标题】：How to pass the data from controller action to partial view...?如何将数据从控制器操作传递到部分视图......？
【发布时间】：2013-08-29 10:31:32
【问题描述】：

我是 MVC 新手，正在使用 API 服务开发 MVC 4，并且卡在将数据传递到模态弹出窗口的部分视图中，我需要在单击模态弹出窗口上的产品列时获取所有这些数据，但是它并没有完全正确。我已将数据（即 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);
        }

谁能帮我从上面的代码中整理问题。

【问题讨论】：

所以您的Modalpopup 操作是返回部分视图_ProductModalPopup，我认为这很可能是HTML，但您的ajax 调用期待json。如果将dataType 更改为'HTML' 会怎样？

标签： javascript jquery asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案1】：

你可以这样试试，

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

这样，您可以从控制器操作发送数据以查看。希望这会有所帮助。

【讨论】：

【解决方案2】：

您尝试执行的操作不起作用，因为分部视图是在应用剔除绑定之前呈现的，但您希望将剔除数据传递给分部视图。

你应该遵循的流程是这样的：

使用占位符呈现主页以获取部分视图结果
创建 ko viewModel 和 applyBindings
ajax 调用返回 PartialView 的 Action
将结果放在占位符中

这意味着您的主页不应有任何 @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);

       }
    });
  }

【讨论】：