Динамически заполнить раскрывающийся с помощью JQuery в ASP.Net MVC3

Question

У меня есть две модели:

public class ProfessorModels 
{ 
    public string FullName { get; set; } 
    public int ID { get; set; } 
} 

и

public class ClassModels 
{ 
    public int ID { get; set; } 
    public string Professor { get; set; } 
    public decimal Name { get; set; } 
} 

на мой взгляд, есть форма для добавления класса:

@model MvcApp.Models.ClassModels 

@{ 
    ViewBag.Title = "Create"; 
} 

<h2>Create</h2> 

<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> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 
    <fieldset> 
     <legend>ClassModels</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.Name) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.Name) 
      @Html.ValidationMessageFor(model => model.Name) 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

Я хотел бы добавить раскрывающееся меню в представление класса, в котором перечислены все доступные профессора. Профессора находятся в db, и я могу легко сделать вызов db из контроллера и загрузить всех профессоров в некоторый список/массив. Мне нужна помощь в том, как заполнить раскрывающийся список преподавателями, используя jQuery.

Answer 1

В контроллере:

[HttpGet] 
    public virtual JsonResult LoadInfo() 
    { 
     var query = _repository.GetInformation(); //Here you return the data. 
     return Json(query, JsonRequestBehavior.AllowGet); 
    } 

Тогда в вашей точки зрения:

<select id="info"></select> 

Затем загрузите падение вниз с помощью JQuery

function LoadInfo() { 

    $.getJSON("@Url.Action(MVC.ControllerName.MethodName())", null, 
     function (data) { 

      $("#info").empty(); 

      $.each(data, function() { 
       $("#info").append($("<option />").val(this.Id).text(this.Name)); 
      }); 

     }); 
} 

Это предполагает, что Id и имя свойства вашего объекта. Вы можете использовать ID и FullName, в зависимости от того, какой снимок вы загружаете. Я также использую T4MVC для получения разных имен методов.

Надеюсь, что это поможет,

Answer 2

Уже action метод, который возвращает список Proffessors

public ActionResult GetProfessors() 
{ 
    var professorList=repo.GetProfessors(); //get list of professor object 
    return Json(professorList,JsonRequestBehavior.AllowGet); 
} 

Теперь на ваш взгляд, Есть DropDown

<select id="listProfessors"></select> 

Использование JQuery Ajax для загрузки данных на этот элемент в документе ready мероприятие. Добавьте приведенный ниже сценарий в свой вид.

<script type="text/javascript"> 
    $(function(){ 
    var items=""; 
    $.getJSON("@Url.Action("GetProfessors","YourControllerName")",function(data){ 

     $.each(data,function(index,item){ 
      items+="<option value='"+item.ID+"'>"+item.FullName+"</option>"; 
     }); 
     $("#listProfessors").html(items); 
    }); 

    });  
</script> 

Если предположить, что имя контроллера является YourController и у вас есть JQuery загружены в эту страницу должным образом.