Question

I’ve got the below code on my view, and everything is working fine. I’ve got a dropdown, and got a list of tables below the drop-down. I’d like to write a jquery code that only displays one table at a time depending on the selected drop-down value. My first method would be having all the tables on client-side and just ‘filtering’ them using jquery, and my second method would be using an ajax request to the server and updating the table. Please have a look at the code below. Any help would be greatly appreciated – Thanks

  <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>

For Ajax Request, I’m thinking to do something like this, but not sure how to proceed.

<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>

Also, at some point I would like to enable inline editing on this table using ajax, so that the users can submit their proposed price..Thanks

Answer 1

First I would update your markup like so in order to keep id’s unique and to add a nice means of selecting the divs:

<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>

and then you can filter by year like so without the ajax request if they’re all on the page:

$(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/