Question

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

例如，模型在控制器中填充，将下拉框所基于的项目的原始值设置为＆＃34; General＆＃34;以及文本框基于＆＃34; Widgets＆＃34;的项目。当用户选择＆＃34;特殊＆＃34;从下拉菜单中，控制器将查询数据库以获取基于＆＃34; Special＆＃34;的数据，发现文本框的新值应该说＆＃34; Doodads＆＃34;，添加＆＃34;对模型进行装饰并将文本框更改为＆＃34; Doodads＆＃34;。

查看

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

控制器

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获取类似下面代码的内容来更新文本框。我不想发布整个页面。我不希望屏幕显示为＆＃34;闪烁＆＃34 ;;我只希望用户从下拉列表中选择一个项目，然后更改文本框值。

需要在不提交表单的情况下从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;
}

控制器：

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

       //your db code

        return Json (newTextBoxValue) );

    }

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

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

1 个答案: