在 Asp.Net MVC 中，当控件值更改时，没有像在 Web 表单中那样的回发行为。您仍然可以发布表单，并且在操作方法中，您可以读取选定的值（发布的值）并加载文本框的值并再次呈现页面。这是完整的表格发布。但是使用 ajax 有更好的方法来做到这一点，因此用户不会体验到完整的页面重新加载。
您所做的是，当用户更改下拉列表时，获取所选项目的值并调用您的服务器以获取您想要在输入字段中显示的数据并进行设置。
为您的页面创建一个视图模型。
public class CreateViewModel
{
public int Width { set; get; }
public int Height{ set; get; }
public List<SelectListItem> Widgets{ set; get; }
public int? SelectedWidget { set; get; }
}
现在在 GET 动作中，我们将创建一个 this 的对象，初始化 Widgets 属性并发送到视图
public ActionResult Create()
{
var vm=new CreateViewModel();
//Hard coded for demo. You may replace with data form db.
vm.Widgets = new List<SelectListItem>
{
new SelectListItem {Value = "1", Text = "Weather"},
new SelectListItem {Value = "2", Text = "Messages"}
};
return View(vm);
}
你的创建视图被强类型化为CreateViewModel
@model ReplaceWithYourNamespaceHere.CreateViewModel
@using(Html.BeginForm())
{
@Html.DropDownListFor(s => s.SelectedWidget, Model.Widgets, "Select");
<div id = "editablePane" >
@Html.TextBoxFor(s =>s. Width,new { @class ="myEditable", disabled="disabled"})
@Html.TextBoxFor(s =>s. Height,new { @class ="myEditable", disabled="disabled"})
</div>
}
上面的代码将为 SELECT 元素呈现 html 标记，并为宽度和高度呈现 2 个输入文本字段。 （在页面上做一个“查看源代码”并查看）
现在我们将有一些 jQuery 代码，它监听 SELECT 元素的 change 事件并读取所选项目的值，对服务器进行 ajax 调用以获取所选小部件的高度和宽度。
<script type="text/javascript">
$(function(){
$("#SelectedWidget").change(function() {
var t = $(this).val();
if (t !== "") {
$.post("@Url.Action("GetDefault", "Home")?val=" + t, function(res) {
if (res.Success === "true") {
//enable the text boxes and set the value
$("#Width").prop('disabled', false).val(res.Data.Width);
$("#Height").prop('disabled', false).val(res.Data.Height);
} else {
alert("Error getting data!");
}
});
} else {
//Let's clear the values and disable :)
$("input.editableItems").val('').prop('disabled', true);
}
});
});
</script>
我们需要确保在 HomeController 内部有一个名为 GetDetault 的操作方法来处理 ajax 调用。
[HttpPost]
public ActionResult GetDefault(int? val)
{
if (val != null)
{
//Values are hard coded for demo. you may replae with values
// coming from your db/service based on the passed in value ( val.Value)
return Json(new { Success="true",Data = new { Width = 234, Height = 345}});
}
return Json(new { Success = "false" });
}