在MVC項目中，如何在下拉列表更改值時更新模型？

Question

我有一個使用Kendo控件的MVC項目。其中一個視圖是一個下拉框和文本框。兩者最初都是從模型中獲得它們的價值。如何在用戶從下拉列表中選擇一個項目時更改模型（以及文本框）？

例如，該模型是在控制器設置項的下拉框的原始值填充的基礎上的「常規」和文本框是基於對「小工具」的項目。當用戶選擇從下拉「特殊」，控制器將查詢數據庫以獲取基於「特殊」的數據，發現文本框的新的價值應該說是「裝飾物」，加上「裝飾物的模型和變化文本框 「裝飾物」。

查看

@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的去像下面這段代碼來更新文本框。我寧願不發佈整個頁面。我不希望屏幕「閃爍」;我只想讓用戶從下拉菜單中選擇一個項目，然後爲了更改文本框的值。

需要從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控制器處理。希望它會爲你工作！