在ASP.NET MVC中使用Jquery基于所选下拉列表更新表

Updating a table based on selected dropdown using Jquery in ASP.NET MVC?

本文关键字：于所选 下拉列表 更新 Jquery NET ASP MVC      更新时间：2023-09-26

我的视图中有下面的代码，一切都很好。我有一个下拉列表，在下拉列表下面有一个表格列表。我想编写一个jquery代码，它一次只显示一个表，具体取决于所选的下拉值。我的第一种方法是将所有表都放在客户端上，然后使用jquery"过滤"它们，第二种方法是使用对服务器的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请求，我正在考虑这样做，但不确定如何进行。

<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对该表进行内联编辑，这样用户就可以提交他们提出的价格。。感谢

首先，我会这样更新您的标记，以保持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/

<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>
相关文章：