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

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

Zach · Accepted Answer · 2013-02-12 17:29:27Z

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/

edited Feb 12, 2013 at 17:29

answered Feb 12, 2013 at 15:46

Zach

3,2271 gold badge23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ren Over a year ago

Hi..I tried the above solution..All the tables are still visible initially..and when i select a year from dropdown, can't see any table at all..Any help please ?

Zach Over a year ago

Add the following style: <div id="@string.Format("dropDownDiv_{0}", item.Year)" class="dropDownDiv" style="display: none;">

Ren Over a year ago

could you please try posting a similar one on Jsfiddle ? thanks

Ren Over a year ago

Tried that as well. I can't see tables at all now. Any suggestions ?

Zach Over a year ago

Had to change find to filter - added js fiddle.

AliRıza Adıyahşi · Accepted Answer · 2013-02-12 15:35:11Z

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>

answered Feb 12, 2013 at 15:35

AliRıza Adıyahşi

15.9k24 gold badges118 silver badges198 bronze badges

1 Comment

Ren Over a year ago

Thanks again..!!..I will get my first method working and then will use this..I'll try to create a new JsonResult on the server-side and will update the table using your script..will keep the thread updated..

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related