MVC 4基于DropDownListFor选择更改多个显示领域 [英] MVC 4 Changing multiple display fields based on DropDownListFor selection

问题描述

<一个href=\"http://stackoverflow.com/questions/31166459/mvc-4-changing-a-field-based-on-dropdownlistfor-selection\">MVC 4更改基于DropDownListFor选择场

首先，几乎与上述相同的问题，但该溶液是不工作的这一个。

First off, almost the same as the above question, but the solution isn't working for this one.

我有一个页面，将举行一个下拉列表。选择后，它会改变基于该选择的显示区域。

I have a page that will hold a dropdown list. after selection it will change the display fields based off the selection.

视图中的JavaScript是：

The javascript in the view is:

<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没有击中或我的方法只是不获取调用。

At the moment the javascript isn't getting hit or my method just isn't getting called.

推荐答案

有一件事你正在做的是不返回从 FillCourseInfo 行动的一个结果。

One thing you are doing is not returning a single result from your FillCourseInfo action.

这意味着你的JSON结果是 StudentCourseDetails 的列表。你将不得不使用 $（'＃日期）VAL（数据[0] .courseDates）; 来得到你的价值观。

This means your json result is a list of StudentCourseDetails. You would have to use $('#Dates').val(data[0].courseDates); to get your values.

或者，如果你只是希望一个值，你可以在你的LINQ查询的末尾使用.FirstOrDefault（）。

Or if you're just expecting a single value you can use .FirstOrDefault() at the end of your linq query.

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捣鼓你。 DotNetFiddle

要在LINQ查询使用的ToString，结果转换到一个列表，然后建立自己的JSON

To use ToString in your linq query, convert the result to a list, then build your 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();

这篇关于MVC 4基于DropDownListFor选择更改多个显示领域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！