Update table when dropdownoption changes

Question

I have a portion of a table whose values depend on the value in my dropdownlist. How can I update the the table when the selected option of the dropdownlist changes.

grid

@foreach (var choice in ViewData.Model.Options where choiceId == ViewData.Model.choiceLevelId)
                    {
                        <tr class='gridrow'>
                            <td>.....

dropdown

 <div class="editor-field">
                @Html.DropDownListFor(model => model.choiceLevelId,
                            (
                             ...

Answer 1

What table are you talking about? ASP.NET MVC has no knowledge of tables or chairs. It works with Models, Controllers and Views.

So you have a View in which you have rendered a <select> box and you want upon changing the value of this select box by the user to invoke a Controller Action passing the newly selected value to the server so that it can perform some processing. Am I right?

You will have to use javascript in your View in order to subscribe to the change event of this dropdown. Then you have a couple of possibilities:

• Use an AJAX request to send the selected value to the server.
• Redirect the current browser (using window.location.href) to the controller action passing it the selected value as action argument.

Depending on your requirements you could pick the technique that suites best for you.

Let me illustrate the first approach with an example using jQuery:

<script type="text/javascript">
    $(function() {
        // subscribe to the .change event of the dropdowns
        $('select').change(function() {
            // fetch the newly selected value
            var selectedValue = $(this).val();
            // send it as an AJAX request to some controller action
            $.post('@Url.Action("Foo")', { value: selectedValue }, function(result) {
                // this will be invoked in the case of success of the AJAX call
                // TODO: do something with the results returned by the controller action
            });
        });
    });
</script>

and your controller action that will handle the AJAX request:

[HttpPost]
public ActionResult Foo(string value)
{
    // this action will be invoked when the user changes the selection
    // in one of the dropdown lists and passed the newly selected value.
    // So using this new value you could perform the desired processing
    // on your model here and return a view. Since this action was invoked
    // with an AJAX call you could return a JSON string to the client indicating
    // the success or failure of whatever processing you were intending to perform 
    // here

    ...

}

---

UPDATE:

If you wanted to submit the form containing the dropdowns when the selection changes you could use the following:

<script type="text/javascript">
    $(function() {
        // subscribe to the .change event of the dropdowns
        $('select').change(function() {
            // trigger the submission of the containing form:
            $(this).closest('form').submit();
        });
    });
</script>