2015-07-02 2 views
1

MVC 4 Changing a field based on DropDownListFor selectionMVC 4 Изменение несколько полей отображения на основе выбора DropDownListFor

Во-первых, почти такой же, как выше вопрос, но решение не работает для этого.

У меня есть страница, которая будет содержать выпадающий список. после выбора он изменит поля отображения на основе выбора.

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); 
     } 

На данный момент браузер не получая удар или мой метод просто не вызван.

+0

Пара быстрых вопросов - Что такое 'url' вынесенное в JQuery? вы можете вставить это? Также установите «contentType:» application/json'' и попробуйте. HAndle error и посмотреть, какая у вас ошибка. – ramiramilu

+0

Если ваш код списка выбран правильно, вам нужно использовать тот же случай в вашем селекторе JQuery '$ ('# courseName'). On ('change', function() {' – JamieD77

+0

Если вы буквально имеете в виду просто перейти от '$ ('#CourseName') 'to' $ ('# courseName') ', то это не работает –

ответ

2

Одна вещь, вы делаете не возвращает один результат от вашего FillCourseInfo действия.

Это означает, что ваш результат json - это список StudentCourseDetails. Вам нужно будет использовать $('#Dates').val(data[0].courseDates);, чтобы получить ваши значения.

Или, если вы просто ожидаете единственного значения, которое вы можете использовать .FirstOrDefault() в конце вашего запроса linq.

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

Чтобы использовать ToString в вашем запросе Linq, конвертировать результат в виде списка, а затем построить ваш 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(); 
+0

Итак, по какой-то причине в вашем запросе linq вам разрешено использовать .toString(), а я нет. –

+0

это потому что в моем примере он выбирает из 'List <>' вместо 'IEnumerable <>' – JamieD77

+0

Да, заметил, что так эти поля не нужно редактировать. Я попытался использовать только DisplayFor, но это не работает , ничего не подходит, даже если скрипт запущен. Есть ли другой способ использования, который мне просто не хватает? –

0

Изменить ваша функция Javascript с ниже Fuction:

$("#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); 
} 
Смежные вопросы