MVC 4更改基于DropDownListFor选择一个字段 [英] MVC 4 Changing a field based on DropDownListFor selection
问题描述
我有,也可以是由不同的课程名称的一个DropDownList,内容包括基础上,下拉菜单选项,并在数据库中最高的现有节号的下一个疗程节数的文本框的形式。由JavaScript的一个选择将被调用后,再打电话给我控制器的方法找出哪些章节号应该是,然后填写文本框。
我的DropDownList:控制器
ViewBag.CourseList =新的SelectList(db.CourseLists,CourseTitle,CourseTitle);
我的DropDownList:查看
@ Html.DropDownListFor(型号=> model.CourseTitle,
新的SelectList(@ ViewBag.CourseList,值,文本), - 选择课程 - 新{@id =CourseTitle的onchange =CourseChange()})
@ Html.ValidationMessageFor(型号=> model.CourseTitle)
文本框:
@ Html.EditorFor(型号=> model.ClassNumber,新{@id =ClassNumber})
@ Html.ValidationMessageFor(型号=> model.ClassNumber)
Javascript函数:
<脚本类型=文/ JavaScript的>
功能CourseChange(){
。VAR courseTitle = $('#CourseTitle)VAL(); //总是空
$ .getJSON(NextClassNumber,courseTitle,updateClassNumber);
}; updateClassNumber =功能(数据){
$('#ClassNumber')VAL(数据)。
};
< / SCRIPT>
当我做出改变我在我的控制器方法被调用,并传递回值,并设置文本框我,但所选项目的价值是通过为空的到来。任何想法,为什么?
:::::::
@model QIEducationWebApp.Models.Course@ {
ViewBag.Title =添加新课程;
}<脚本的src =@ Url.Content(〜/脚本/ jquery.validate.min.js)TYPE =文/ JavaScript的>< / SCRIPT>
<脚本的src =@ Url.Content(〜/脚本/ jquery.validate.unobtrusive.min.js)TYPE =文/ JavaScript的>< / SCRIPT>
&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屋!