1

この部分ビューを1ページに複数回レンダリングしています。

@model POS.Domain.Entities.Category

<div class = "category" id= "@Model.Name">
    <h2>@Model.Name</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            $('#divResult').load("@Url.Action("ProductList" , "Product", new {category = Model.Name})");
        }
    </script>
    <div id="divResult">
    </div>
</div>

アイデアは、誰かがGet Partial Viewリンクをクリックすると、カテゴリ値を使用して私のProductListアクションによって生成された部分ビューをコントローラにロードし、その部分ビューを適切なdivに追加するというものです。ProductModel.NamedivResult

問題は、ページが読み込まれた後、ユーザーがいずれかのGetPartialViewリンクをクリックすると、最終カテゴリに含まれる製品のリストが読み込まれ、それらが最上位のdivResultdivに追加されることです。

jQueryを使用して情報を適切にロードするようにスクリプトを変更する際のガイダンスを少し期待しています。また、この部分ビューが読み込まれるたびにスクリプトを繰り返すべきではないと感じています。。。Get Partial Viewでは、ユーザーがリンクの1つをクリックすると、次のようになる適切なjQueryスクリプトをどのように記述すればよいでしょうか。

  • リンクの親divのIDを取得します（@ModelName）
  • そのIDを使用して、アクションを呼び出します。@Url.Action("ProductList", "Product", new {category = **that id**})";
  • そのアクションによって返された部分ビューを、divResultこのステップの2つ上のステップで見つかった親div内にあるIDを持つdivに追加します

アップデート

これが私の見解からのHTMLです：

<div class = "category" id= "Balls">
    <h2>Balls</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            var $category = $(this).closest(".category");
            var categoryName = $category.attr("id");
            //var categoryName ="Balls";
            $('.divResult').load("/Product/ProductList",
                {category: categoryName});
        }
    </script>
    <div class="divResult">
    </div>   
</div>
<div class = "category" id= "Drinks">
    <h2>Drinks</h2>
    <a href='javascript:getView();'>Get Partial View</a>
    <script type="text/javascript">
        function getView() {
            var $category = $(this).closest(".category");
            var categoryName = $category.attr("id");
            //var categoryName ="Balls";
            $('.divResult').load("/Product/ProductList",
                {category: categoryName});
        }
    </script>
    <div class="divResult">
    </div>   
</div>

の値を手動で渡すとBalls、カテゴリcategoryNameから商品を受け取ることができますが、使用すると、を取得します。Ballsvar categoryName = $(this).closest(".category").attr("id");undefined

たぶん、HTMLを見ることが役立つでしょうか？

4

1 に答える 1

2

load 関数の 2 番目のパラメーターを使用して、load 要求と共にデータを渡すことができます。http://api.jquery.com/load/ を確認してください

getView 関数を次のように変更します。

function getView(e) {
  e.preventDefault();
    var $category = $(this).closest(".category");
  var categoryName = $category.attr("id");
   $('.divResult', $category).load("@Url.Action("ProductList" , "Product")", {
     category: categoryName
    });
}

更新: ページ上の複数の要素に同じ ID を使用することはできません。また、部分ビューを複数回ロードして追加しているため、同じ ID を持つ複数の要素で終了します。部分ビューを次のように変更します (ID の代わりにクラスを使用します)。

@model POS.Domain.Entities.Category

<div class = "category" id= "@Model.Name">
    <h2>@Model.Name</h2>
    <a href='/get-partial-view'>Get Partial View</a>
    <div class="divResult">
    </div>
</div>

getView 関数を親ビューに移動します。

<script type="text/javascript">
        function getView() {
                var categoryName = $(this).closest(".category").attr("#id");
                $('.divResult').load("/Product/ProductList",
                        {category: categoryName});
        }

        $(function(){
            $(".category").on("click", "a", getView);
        });
</script>
于 2012-07-18T12:41:46.677 に答える