MVC 4更改基于DropDownListFor选择一个字段 [英] MVC 4 Changing a field based on DropDownListFor selection
本文介绍了MVC 4更改基于DropDownListFor选择一个字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有，也可以是由不同的课程名称的一个DropDownList，内容包括基础上，下拉菜单选项，并在数据库中最高的现有节号的下一个疗程节数的文本框的形式。由JavaScript的一个选择将被调用后，再打电话给我控制器的方法找出哪些章节号应该是，然后填写文本框。
我的DropDownList：控制器
ViewBag.CourseList =新的SelectList（db.CourseLists，CourseTitle，CourseTitle）;
我的DropDownList：查看
@ Html.DropDownListFor（型号=＆GT; model.CourseTitle，
新的SelectList（@ ViewBag.CourseList，值，文本）， - 选择课程 - 新{@id =CourseTitle的onchange =CourseChange（）}）
@ Html.ValidationMessageFor（型号=＆GT; model.CourseTitle）
文本框：
@ Html.EditorFor（型号=＆GT; model.ClassNumber，新{@id =ClassNumber}）
@ Html.ValidationMessageFor（型号=＆GT; model.ClassNumber）
Javascript函数：
＆LT;脚本类型=文/ JavaScript的＆GT;
功能CourseChange（）{
。VAR courseTitle = $（'＃CourseTitle）VAL（）; //总是空
$ .getJSON（NextClassNumber，courseTitle，updateClassNumber）;
}; updateClassNumber =功能（数据）{
$（'＃ClassNumber'）VAL（数据）。
};
＆LT; / SCRIPT＆GT;
当我做出改变我在我的控制器方法被调用，并传递回值，并设置文本框我，但所选项目的价值是通过为空的到来。任何想法，为什么？
:::::::
@model QIEducationWebApp.Models.Course@ {
ViewBag.Title =添加新课程;
}＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =@ Url.Content（〜/脚本/ jquery.validate.unobtrusive.min.js）TYPE =文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js\"></script>
＆LT;脚本的src =// netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js\"></script>
＆LT;脚本的src =// ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js\"></script>
＆LT;脚本的src =// ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js\"></script>
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$（'＃CourseTitle'）。在（'变化'，函数（）{
VAR courseTitle = $（本）.VAL（）;
$阿贾克斯（{
网址：'@ Url.RouteUrl（新{行动=NextClassNumber，控制器=场}）'，
数据：{courseTitle：courseTitle}，
输入：'得到'
}）。完成（功能（数据）{
$（'＃ClassNumber'）VAL（数据）。
}）;
}）;
}）;＆LT; / SCRIPT＆GT;＆LT; H1类=页面页眉＆GT; @ ViewBag.Title＆LT; / H1＆GT;@using（Html.BeginForm（））
{
@ Html.ValidationSummary（真） ＆LT;表类=表＆GT;
＆所述; TR＆GT;
百分位类=表行＆GT;
课程名称：
＆LT; /第i
＆LT; TD类=表行＆GT;
@ Html.DropDownListFor（型号=＆GT; model.CourseTitle1，
@ ViewBag.CourseList为的SelectList， - 选择课程 - 新{@类=表格控，@ ID =CourseTitle}）
@ Html.ValidationMessageFor（型号=＆GT; model.CourseTitle）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
百分位类=表行＆GT;
类别号：
＆LT; /第i
＆LT; TD类=表行＆GT;
@ Html.EditorFor（型号=＆GT; model.ClassNumber，新{@id =ClassNumber}）
@ Html.ValidationMessageFor（型号=＆GT; model.ClassNumber）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
百分位类=表行＆GT;
课程类型：
＆LT; /第i
＆LT; TD类=表行＆GT;
@ Html.DropDownList（CourseType， - 选择类型 - ）
@ Html.ValidationMessageFor（型号=＆GT; model.CourseType）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
百分位类=表行＆GT;
开始＆安培;结束日期：
＆LT; /第i
＆LT; TD类=表行＆GT;
@ Html.EditorFor（型号=＆GT; model.CourseStartDate）
@ Html.ValidationMessageFor（型号=＆GT; model.CourseStartDate）
＆LT; / TD＆GT;
＆LT; TD类=表行＆GT;
@ Html.EditorFor（型号=＆GT; model.CourseEndDate）
@ Html.ValidationMessageFor（型号=＆GT; model.CourseEndDate）
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR＆GT;＆LT; TD类=表行空白＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD类=表行按钮＆GT;
＆LT;输入类=按钮类型=提交值=创建/＆GT;
＆LT;输入类型=按钮级=按钮值=取消
的onclick =location.href ='@ Url.Action（「指数」）'/＆GT;
＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
}
@section脚本{
@ Scripts.Render（〜/包/ jqueryval）
}
解决方案
您code应正常工作，如果被正确生成的选择列表中。
我会用建议的一部分以上，并使用
@ Html.DropDownListFor（型号=＆GT; model.CourseTitle，
（的SelectList）ViewBag.CourseList，
- 选择课程 -
新平变化{=CourseChange（）}）
使用已经提到的，你可以改变你的脚本中使用另一个很好的建议
在而不是
＆LT;脚本类型=文/ JavaScript的＆GT;
$（函数（）{
$（'＃CourseTitle'）。在（'变化'，函数（）{
VAR courseTitle = $（本）.VAL（）;
$ .getJSON（NextClassNumber，courseTitle，功能（数据）{
$（'＃ClassNumber'）VAL（数据）。
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
下面是一个例子dotnetfiddle。 DotNetFiddle
I have a form that has a dropdownlist that is made up of different course names and a textbox that will contain the number of the next course section based on the dropdown selection and its highest existing section number in the database. After a selection is made the javascript will get called, then call my controller method to figure out which section number it should be, and then fill the textbox.
My dropdownlist: Controller
ViewBag.CourseList = new SelectList(db.CourseLists, "CourseTitle", "CourseTitle");
My dropdownlist: View
@Html.DropDownListFor(model => model.CourseTitle,
new SelectList(@ViewBag.CourseList, "Value", "Text"), " -- Select Course -- ", new { @id = "CourseTitle", onchange = "CourseChange()" })
@Html.ValidationMessageFor(model => model.CourseTitle)
Textbox:
@Html.EditorFor(model => model.ClassNumber, new { @id = "ClassNumber" })
@Html.ValidationMessageFor(model => model.ClassNumber)
Javascript functions:
<script type="text/javascript">
function CourseChange() {
var courseTitle = $('#CourseTitle').val(); //Is always null
$.getJSON("NextClassNumber", courseTitle, updateClassNumber);
};
updateClassNumber = function (data) {
$('#ClassNumber').val(data);
};
</script>
When I make a change my method in my controller is called and passes back a value and sets my textbox, but the value for the selected item is coming through as null. Any ideas as to why?
::::EDIT::::
@model QIEducationWebApp.Models.Course
@{
ViewBag.Title = "Add New Course";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
$(function () {
$('#CourseTitle').on('change', function () {
var courseTitle = $(this).val();
$.ajax({
url: '@Url.RouteUrl(new{ action="NextClassNumber", controller="Course"})',
data: { courseTitle: courseTitle },
type: 'get'
}).done(function (data) {
$('#ClassNumber').val(data);
});
});
});
</script>
<h1 class="page-header">@ViewBag.Title</h1>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)
<table class="table">
<tr>
<th class="table-row">
Course Title:
</th>
<td class="table-row">
@Html.DropDownListFor(model => model.CourseTitle1,
@ViewBag.CourseList as SelectList, " -- Select Course -- ", new { @class="form-control", @id="CourseTitle" })
@Html.ValidationMessageFor(model => model.CourseTitle)
</td>
</tr>
<tr>
<th class="table-row">
Class Number:
</th>
<td class="table-row">
@Html.EditorFor(model => model.ClassNumber, new { @id = "ClassNumber" })
@Html.ValidationMessageFor(model => model.ClassNumber)
</td>
</tr>
<tr>
<th class="table-row">
Course Type:
</th>
<td class="table-row">
@Html.DropDownList("CourseType", " -- Select Type -- ")
@Html.ValidationMessageFor(model => model.CourseType)
</td>
</tr>
<tr>
<th class="table-row">
Start & End Date:
</th>
<td class="table-row">
@Html.EditorFor(model => model.CourseStartDate)
@Html.ValidationMessageFor(model => model.CourseStartDate)
</td>
<td class="table-row">
@Html.EditorFor(model => model.CourseEndDate)
@Html.ValidationMessageFor(model => model.CourseEndDate)
</td>
</tr>
<tr><td class="table-row-blank"></td></tr>
<tr>
<td class="table-row-button">
<input class="button" type="submit" value="Create" />
<input type="button" class="button" value="Cancel"
onclick="location.href='@Url.Action("Index")'" />
</td>
</tr>
</table>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
解决方案
your code should work fine if the select list is being generated correctly.
I would use part of the suggestion above and use
@Html.DropDownListFor(model => model.CourseTitle,
(SelectList)ViewBag.CourseList,
" -- Select Course -- ",
new { onchange = "CourseChange()" })
using another good suggestion already mentioned you can change your script to use on instead
<script type="text/javascript">
$(function () {
$('#CourseTitle').on('change', function () {
var courseTitle = $(this).val();
$.getJSON("NextClassNumber", courseTitle, function (data) {
$('#ClassNumber').val(data);
});
});
});
</script>
here is a dotnetfiddle example. DotNetFiddle
这篇关于MVC 4更改基于DropDownListFor选择一个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
