0

ビューに以下のコードがあり、すべて正常に動作しています。ドロップダウンがあり、ドロップダウンの下にテーブルのリストがあります。選択したドロップダウン値に応じて、一度に 1 つのテーブルのみを表示する jquery コードを書きたいと思います。私の最初の方法は、すべてのテーブルをクライアント側に置き、jquery を使用してそれらを「フィルタリング」することです。2 番目の方法は、サーバーへの ajax リクエストを使用してテーブルを更新することです。以下のコードを見てください。どんな助けでも大歓迎です - ありがとう

  <div id="dropDown" class="span11">
    <div class="row-fluid">
        <div class="span4">
            Select Year of Manufacturing
        </div>
        <div class="span8">
            @Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, @productItems)
        </div>
    </div>
    foreach (var item in Model.Products) {
    <h3>@item.Year</h3>
    <div id="dropDownDiv">
        <table class="table table-bordered">
            <tr>
                <th>
                    ProductId
                </th>
                <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    Price
                </th>
                <th>
                    Proposed Price
                </th>
            </tr>
            <tr>
                <td>@item.Id
                </td>
                <td>@item.Name
                </td>
                <td>
                    @item.Description
                </td>
                <td>@item.Price
                </td>
                <td>
                    <input type="number" />
                </td>
            </tr>
        </table>
    </div>
    } 
</div>

Ajax Request については、このようなことを考えていますが、どのように進めればよいかわかりません。

<script>
    //Filter By Year
    $(function () {
        $("select#Year").change(function (evt) {
            if ($("select#Year").val() != "-1") {
                $.ajax({
                    url: "/AjaxDropDown/FilterByYear",
                    type: 'Post',
                    data: { Year: $("select#Year").val() },
                    success: function (data) {  
                                     //Need some code here

                    }
                });
            }
        });
    });

</script>

また、ある時点で、ユーザーが提案された価格を送信できるように、このテーブルで ajax を使用してインライン編集を有効にしたいと考えています..ありがとう

4

2 に答える 2

1 
<script>
//Filter By Year
$(function () {
    $("select#Year").change(function (evt) {
        if ($("select#Year").val() != "-1") {
            $.ajax({
                url: "/AjaxDropDown/FilterByYear",
                type: 'Post',
                data: { Year: $("select#Year").val() },
                success: function (data) {  
                    var records = $.evalJSON(data);
                    var Years= $("select#Year");

                    // clear all previous options 
                    $("select#Year > option").remove();

                     // populate the records
                     for (i = 0; i < records.length; i++) {
                         Years.append($("<option />").val(records[i].Value).text(records[i].Text));
                     }
                }
            });
        }
    });
});
</script>
于 2013-02-12T15:35:11.393 に答える
1

最初に、id を一意に保ち、div を選択するための優れた手段を追加するために、マークアップを次のように更新します。

<div id="dropDown" class="span11">
    <div class="row-fluid">
        <div class="span4">
            Select Year of Manufacturing
        </div>
        <div class="span8">
            @Html.DropDownListFor(x => x.Products.SingleOrDefault().Year, productItems)
        </div>
    </div>
    foreach (var item in Model.Products) {
    <div id="@string.Format("dropDownDiv_{0}", item.Year)" class="dropDownDiv">
        <h3>@item.Year</h3>
        <table class="table table-bordered">
            <tr>
                <th>
                    ProductId
                </th>
                <th>
                    Name
                </th>
                <th>
                    Description
                </th>
                <th>
                    Price
                </th>
                <th>
                    Proposed Price
                </th>
            </tr>
            <tr>
                <td>@item.Id
                </td>
                <td>@item.Name
                </td>
                <td>
                    @item.Description
                </td>
                <td>@item.Price
                </td>
                <td>
                    <input type="number" />
                </td>
            </tr>
        </table>
    </div>
    } 
</div>

そして、それらがすべてページにある場合、ajaxリクエストなしで、年ごとにフィルタリングできます。

$(function () {
    $("#Year").change(function (evt) {
        var year = $("#Year").val();
        // Hide all divs with class dropDownDiv but show the one with the appropriate id
        $('.dropDownDiv').hide().filter('#dropDownDiv_' + year).show();
    });
});

jsFiddle: http://jsfiddle.net/dg5bZ/6/

于 2013-02-12T15:46:01.803 に答える