Question

我是MVC的新手，并且使用API服务处理MVC 4并且在将数据传递到部分视图时遇到困难，这是模态弹出窗口，我需要在模态弹出窗口上单击产品列时获取所有这些数据但是它并没有完全正确地开始。我已经将数据传递给了控制器，虽然它已经淘汰但是在模态弹出窗口中看不到。这是我的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

您尝试做的事情不会起作用，因为在应用挖空绑定之前渲染了局部视图，但您想要将挖空数据传递到局部视图。

您应遵循的流程是：

使用占位符渲染主页面以显示部分查看结果
创建ko viewModel和applyBindings
ajax调用Action返回PartialView
将结果放在占位符

这意味着您的主页不应该有任何@Html.Partial()引用您要渲染的局部视图，因为在 knockout之前可以运行。

 <div id="modalPlaceHolder"></div>  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());

就像您可以从控制器操作中发送数据进行查看。希望这会有所帮助。

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

2 个答案: