In an MVC project, how do you update the model when a drop down list changes value?

Question

I have a MVC project using Kendo controls. On one of the views is a drop down box and text box. Both are initially getting their values from the model. How can I change the model (and therefore the text box) when the user selects an item from the drop down?

For example, the Model is filled in the controller setting the original value of the item the drop down box is based on to "General" and the item the text box is based on to "Widgets". When the user selects "Special" from the drop down, the controller would query the database to get data based on "Special", find that the new value of the text box should say "Doodads", add "Doodads to the model and change the text box to "Doodads".

View

@model GPC.Models.ModelInstrumentListingDetail
@using (Html.BeginForm("InstrumentListingDetailClick", "Home", FormMethod.Post, new { id = "InstrumentListingDetailForm" }))
{
<div id="divInstrumentListingDetailHeader" class="detailDivs">
    <table>
        <tr>
        <tr>
            <td style="text-align: right;" class="dropdowns">
                <label>Category:</label>
            </td>
        </tr>
    </table>
</div> // divInstrumentListingDetailHeader

<div id="divInstrumentListingDetailBody" class="detailDivs details">
    <table class="details">
        @*Field 1*@
        <tr>
            <td style="text-align: right;">
                @Html.DisplayFor(m => m.Label1)
            </td>
            <td width="2px;">&nbsp;</td>
            <td class="dropdowns">
                @Html.TextBoxFor(m => m.Field1, new { @class = "details" })
            </td>
        </tr>
    </table>
</div> // divInstrumentListingDetailBody
}

<script>
function onChange_ddInstrumentCategory(arg) {
    var categoryID = $(arg).find('option:selected').val();

    // Update model based on the category ID

}
</script>

Controller

public ActionResult InstrumentListingEdit(TblInstrumentTag model)
{
    TblInstrumentTag currentInstrumentTag = data.GetInstrumentTagByID(model.InstrumentTagID);

    // Fill Category drop down
    List<TblInstrumentFormCategory> categories = data.GetAllCategories();

    // Create model
    ModelInstrumentListingDetail detailModel = new ModelInstrumentListingDetail
    {
        InstrumentTagID = currentInstrumentTag.InstrumentTagID,
        InstrumentCategory = categories.FirstOrDefault().InstrumentFormCategoryID,
        Field1 = currentInstrumentTag.FormCategory1Value1,
        Label1 = categories.FirstOrDefault().Label1 + ":",
        ieInstrumentCategories = new SelectList(categories, "InstrumentFormCategoryID", "InstrumentFormCategoryName")
     };

     return View("InstrumentListingEdit", detailModel);
}

Model

public class ModelInstrumentListingDetail
{
    // Drop down ID's
    public int InstrumentTagID { get; set; }
    public int InstrumentCategory { get; set; }

    // Detail fields
    public string Field1 { get; set; }

    // Detail labels
    public string Label1 { get; set; }

    // Drop downs for add/edit page
    public IEnumerable<SelectListItem> ieInstrumentCategories { get; set; }
}

What I'd like is to get from the javascript to something like this code below to update the text box. I'd rather not post the entire page. I don't want the screen to "blink"; I just want the user to select an item from the dropdown and for the textbox value to change.

Need to get from jQuery to something like this without submitting the form:

public ActionResult UpdateModel(TblInstrumentTag model, int newCatgoryID)
{
TblInstrumentTag currentInstrumentTag = data.GetInstrumentTagByID(model.InstrumentTagID);

// Fill Category drop down
List<TblInstrumentFormCategory> categories = data.GetAllCategories();

// Create model
ModelInstrumentListingDetail detailModel = new ModelInstrumentListingDetail
{
    InstrumentTagID = currentInstrumentTag.InstrumentTagID,
    InstrumentCategory = categories.FirstOrDefault().InstrumentFormCategoryID,
    Field1 = currentInstrumentTag.FormCategory2Value1, // <- Value of Field 1 has changed
    Label1 = categories.FirstOrDefault().Label1 + ":",
    ieInstrumentCategories = new SelectList(categories, "InstrumentFormCategoryID", "InstrumentFormCategoryName")
};

return View("InstrumentListingEdit", detailModel);
}

Thanks for the reply, but that's not what I'm doing at all. The drop down list doesn't have the value I want to put into the text box and no place on the client-side has the value. I want to take the value from the drop down list (client-side), query the database in the controller (server-side), and return a value from the database to the text box (client-side). Let me know if this helps clarify this and if you can help. — boilers222, Jul 10 '15 at 20:55
Makes more sense now. Unless the Kendo control allows Ajax updates, you will need to update it yourself (e.g. using Ajax calls to the server, in response to changes on the page, to get the new list items). — iCollect.it Ltd, Jul 10 '15 at 21:02

score 0 · Answer 1 · answered Jul 11 '15 at 20:01

JQuery is a good place to start. If I understand correctly, you only want to query the DB after changing the drop down's value, and then changing the value of the textbox to the corresponding change.

JQuery:

$(document).ready(function(){
    $('#myDropDown').change(selectionChange());
});

function selectionChange() {
    var dropDownValue = $('#myDropDown').val();
    var textBox = $('#myTextBox');

        $.ajax({
            url: "/mycontroller/querydb",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(dropDownValue),
            success: function (data, status) {
                textBox.val(data);
            },
            type: "post"
        });

    return;
}

Controller:

[HttpPost]
    public JsonResult QueryDB(string dropDownValue)
    {
       string newTextBoxValue = string.Empty;

       //your db code

        return Json (newTextBoxValue) );

    }

It's a fairly watered down version of a JQuery AJAX to MVC Controller deal. Hopefully it will work for you!

Thanks for the reply; I'll give this a shot. Is there anyway to use jquery ajax to update the entire model instead of just one text field? I only included one text field in my example for brevity, but in reality there are several that need changed. My hope is that when the drop down selection is changed, the entire model's values can be updated. Any suggestions. — boilers222, Jul 13 '15 at 11:59
I understand. Sounds like you need to use more of MVC's built-in Ajax helper to submit the form's model values rather than posting/refreshing the whole page. Take a look at Ajax.BeginForm instead of HTML.BeginForm. I myself haven't used this yet but it may serve your purpose perfectly. Here's a link to give you some good idea how to go about it! http://stackoverflow.com/questions/15440041/mvc4-pass-model-via-ajax-beginform — Jason Roner, Jul 14 '15 at 15:24

In an MVC project, how do you update the model when a drop down list changes value?

1 Answers1