Question

I have two models:

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

and

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

in my View there is a form to add the class:

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

I would like to add a drop-down menu to the Class View, which lists all the available professors. Professors are in db, and I can easily make a call to db from controller and load all professors in to some list/array.
I need help with how to populate the drop-down with professors using jQuery.

Answer 1

In your controller:

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

Then in your view:

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

Then you load the drop down using 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));
            });

        });
}

This assumes that Id and Name are properties of your object. You could use ID and FullName depending on which drop down you’re loading. I also use T4MVC to get the different method names.

Hope this helps,