javascript - 在 MVC 项目中，当下拉列表更改值时如何更新模型？

Question

我有一个使用 Kendo 控件的 MVC 项目。其中一个 View 上有一个下拉框和文本框。两者最初都是从模型中获取它们的值。当用户从下拉列表中选择一个项目时，如何更改模型(以及文本框)？

例如，将模型填充到 Controller 中，将下拉框所基于的项目的原始值设置为“常规”，将文本框所基于的项目的原始值设置为“小部件”。当用户从下拉列表中选择“Special”时， Controller 将查询数据库以获取基于“Special”的数据，发现文本框的新值应为“Doodads”，将“Doodads”添加到模型中并更改将文本框设置为“Doodads”。

查看

@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);
}

型号

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

我想要的是从 javascript 获取类似于下面这段代码的内容来更新文本框。我不想发布整个页面。我不想让屏幕“闪烁”；我只希望用户从下拉列表中选择一个项目并更改文本框值。

需要从 jQuery 获取类似的内容而不提交表单:

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);
}

Answer 1

JQuery 是一个很好的起点。如果我理解正确的话，您只想在更改下拉列表的值后查询数据库，然后将文本框的值更改为相应的更改。

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

    }

这是 JQuery AJAX 到 MVC Controller 交易的一个相当淡化的版本。希望它对你有用!