0

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

上記のコードから問題を分類するのを手伝ってくれる人はいますか。

4

2 に答える 2

0

このように試すことができます。

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

そのように、コントローラーアクションから表示するデータを送信できます。お役に立てれば。

于 2013-08-29T12:22:42.853 に答える
0

ノックアウト バインディングが適用される前に部分ビューがレンダリングされるため、あなたがしようとしていることはうまくいきませんが、部分ビューにノックアウト データを渡したいとします。

従うべきフローは次のとおりです。

  1. 部分ビュー結果のプレースホルダーを含むメイン ページをレンダリングする
  2. ko viewModel を作成し、applyBindings
  3. PartialView を返すアクションへの ajax 呼び出し
  4. 結果をプレースホルダーに配置する

これは、ノックアウトが実行される前に@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);

       }
    });
  }
于 2013-08-29T12:17:37.163 に答える