MVC 4基于DropDownListFor选择更改多个显示字段
MVC 4 Changing multiple display fields based on DropDownListFor selection
MVC 4基于DropDownList更改字段用于选择
首先,与上面的问题几乎相同,但解决方案对这个问题不起作用。
我有一个页面,里面会有一个下拉列表。选择后,它将根据选择更改显示字段。
视图中的javascript是:
<script type="text/javascript">
$(function(){
$('#courseName').on('change', function () {
var courseID = $(this).val();
var studentID = '@ViewBag.StudentID';
$.ajax({
url: '@Url.Action("FillCourseInfo", "Student")',
data: {StudentID: studentID, CourseID: courseID},
type: 'get'
}).done(function(data){
$('#courseStartDate').text(data.courseStartDate);
$('#courseEndDate').text(data.courseEndDate);
$('#projectName').text(data.projectName);
$('#graduated').text(data.graduated);
});
});
});
</script>
视图:
<tr>
<th class="table-row">
Course Title:
</th>
<td class="table-row">
@Html.DropDownListFor(m => m.courseName,
@ViewBag.courseList as SelectList, " -- Select Course -- ",
new { @class = "form-control" })
</td>
</tr>
<tr>
<th class="table-row">
Start & End Date:
</th>
<td class="table-row">
<label id="#courseStartDate" class="form-control">@Model.courseStartDate</label>
</td>
<td class="table-row">
<label id="#courseEndDate" class="form-control">@Model.courseEndDate</label>
</td>
</tr>
<tr>
<th class="table-row">
Project:
</th>
<td class="table-row">
<label id="#projectName" class="form-control">@Model.projectName</label>
</td>
</tr>
<tr>
<th class="table-row">
Graduated:
</th>
<td class="table-row">
<label id="#graduated">@Model.graduated</label>
</td>
</tr>
和控制器方法:
[HttpGet]
public JsonResult FillCourseInfo(int StudentID, int CourseID)
{
var ret = (from e in db.Enrollments
join c in db.Courses on e.CourseID equals c.CourseID
where e.StudentID == StudentID && e.CourseID == CourseID
select new
{
courseStartDate = c.CourseStartDate,
courseEndDate = c.CourseEndDate,
projectName = e.Project.ProjectTitle,
graduated = e.Graduated
}).ToList()
.Select(a => new StudentCourseDetails() {
courseStartDate = a.courseStartDate.ToString("MMM d, yyyy"),
courseEndDate = a.courseEndDate.ToString("MMM d, yyyy"),
projectName = a.projectName,
graduated = a.graduated.Value.ToString()
}).FirstOrDefault();
string sd = ret.courseStartDate;
string ed = ret.courseEndDate;
string pn = ret.projectName;
string g = ret.graduated;
return Json(ret, JsonRequestBehavior.AllowGet);
}
目前javascript没有被命中,或者我的方法没有被调用。
您正在做的一件事是不从FillCourseInfo
操作返回任何结果。
这意味着您的json结果是StudentCourseDetails
的列表。您必须使用$('#Dates').val(data[0].courseDates);
才能获得您的值。
或者,如果您只期望一个值,则可以在linq查询的末尾使用.FirstOrDefault((。
var ret = (from e in db.Enrollments
join c in db.Courses on e.CourseID equals c.CourseID
where e.StudentID == StudentID && e.CourseID == CourseID
select new StudentCourseDetails
{
courseDates = c.CourseStartDate.ToString() + " " + c.CourseEndDate.ToString(),
projectName = e.Project.ProjectTitle,
graduated = e.Graduated
}).FirstOrDefault();
我为你创建了另一个.NET FiddleDotNetFiddle
要在linq查询中使用ToString,请将结果转换为列表,然后构建json
var ret = (from e in db.Enrollments
join c in db.Courses on e.CourseID equals c.CourseID
where e.StudentID == StudentID && e.CourseID == CourseID
select new
{
courseStartDate = c.CourseStartDate,
courseEndDate = c.CourseEndDate,
projectName = e.Project.ProjectTitle,
graduated = e.Graduated
}).ToList()
.Select(a => new StudentCourseDetails() {
courseDates = a.courseStartDate.ToString() + " " + a.courseEndDate.ToString(),
projectName = a.projectName,
graduated = a.graduated
}).FirstOrDefault();
使用以下功能更改Javascript函数:
$("#CourseName").change(function () {
var courseID = $(this).val();
$.ajax({
type: 'POST',
url: '@Url.Action("FillCourseInfo","Student")', // we are calling json method
dataType: 'json',
data: { StudentID: @ViewBag.studentID, CourseID, courseID },
success: function (ret) {
$('#Dates').val(ret.courseDates);
$('#Project').val(ret.projectName);
$('#Graduated').val(ret.graduated);
},
error: function (ex) {
//alert('Failed to retrieve states.' + ex);
}
});
return false;
});
使用以下功能更改控制器功能
public JsonResult FillCourseInfo(int StudentID, int CourseID)
{
var ret = (from e in db.Enrollments
join c in db.Courses on e.CourseID equals c.CourseID
where e.StudentID == StudentID && e.CourseID == CourseID
select new StudentCourseDetails
{
courseDates = c.CourseStartDate.ToString() + " " + c.CourseEndDate.ToString(),
projectName = e.Project.ProjectTitle,
graduated = e.Graduated
});
return Json(ret);
}
相关文章:
- 如果选择单选按钮,则显示字段
- 将单击事件添加到显示字段
- 如何在android中提取和显示字段
- yii2:依赖于Action的条件显示/显示字段
- ExtJs组合框显示字段编码
- 用于显示字段的工具提示和显示 Jquery 验证中的错误的工具提示器
- 根据输入值隐藏/显示字段
- 实时表编辑其他 mySQL 表中的显示字段
- ExtJS 5:显示字段绑定性能
- EXT JS :在组合框中,如何为不在存储中的记录设置显示字段
- 带有模板的显示字段
- ExtJS 4 组合框在表单绑定上显示值字段而不是显示字段
- web2py控件窗体,选择选项时显示字段
- HTML表单根据所选内容切换隐藏/显示字段
- 隐藏和显示字段集
- 如何制作html5和java脚本中所需的显示字段?下面是我的代码
- Javascript:阻止浏览器在按下向下键时显示字段的输入历史记录
- 反应 ― 显示字段但获取对象
- 如何根据编辑页上复选框中的值隐藏和显示字段
- 在asp.net中选择单选按钮值时隐藏/显示字段