How does one populate a displayed form using data from an associated database entry that is selected via a drop-down

Ecnalyr
Ecnalyr used Ask the Experts™
on
I have the following code that allows a teacher to see a drop-down list of available courses to teach, listed by name.  When a teacher selects a dropdown option I would like a form on the view to auto-populate with default values representing the selected course.  What is the most efficient way to populate the fields?  

note: When "Custom" is selected in the drop-down, I want the form that is displayed below the dropdown to have nothing but blank spaces.

CourseController

        // GET: /Course/ApplyToTeach

        public ActionResult ApplyToTeach()
        {
            var course = db.CourseTemplates;
            var model = new ApplyCourseViewModel
            {
                Courses = course.Select(x => new SelectListItem
                {
                    Value = x.Title,
                    Text = x.Title,
                })
            };
            return View(model);
        }

Open in new window

ApplyToTeachViewModel

    public class ApplyToTeachViewModel
    {
        [Display(Name = "selected course")]
        public string SelectedCourse { get; set; }
        public IEnumerable<SelectListItem> Courses { get; set; }
    }

Open in new window


ApplyToTeach (view) - note that all I have here currently is the drop-down menu, I am looking for the most efficient way to add the auto-populating form below this drop-down.

    <h2>ApplyToTeach</h2>

    @using (Html.BeginForm())
    {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Apply To Teach</legend>
            <div class="editor-label">
                Which class would you like to teach? (select "Custom" if you would like to submit a customized class)
            </div>

            <div class="editor-field">
                @Html.DropDownListFor(x => x.SelectedCourse, Model.Courses, "Custom")
                @Html.ValidationMessageFor(model => model.Courses)
            </div>
            <p>
                <input type="submit" value="Submit" />
            </p>
        </fieldset>
    }

Open in new window


The data for the drop-down fields comes from the following model -
CourseTemplates

    public class CourseTemplates
    {
        public int CourseTemplatesID { get; set; }
        public string Title { get; set; }
        public int Credits { get; set; }
        public int AttendingDays { get; set; } // 10, 8, 3, or custom
        public int AttendanceCap { get; set; } // default of 30
        public string Location { get; set; }
        public string Description { get; set; }
    }

Open in new window


The form is actually going to be submitted as a "Course" model, not the "CourseTemplates" model, the "Course" model has more data fields than the "CourseTemplates" model - such as the following:

    public DateTime StartDate { get; set; }
    public bool Approved { get; set; }
    etc. . .

Open in new window


What I have in mind as far as user-experience is that an administrator will go through beforehand and add in a number of possible course options, simply to ease the application process for most teachers (so they don't have to type every detail for every class they apply to teach), but I want the teacher to be able to edit any information before submitting the course for review by an administrator.

Any tips?

p.s. Would it be good design to use AJAX to refresh the page for my current needs?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
I think your best option here is to use an AJAX call to the server to obtain data for your selected CourseTemplate, on your server method you generate the CourseTemplate element with data from database and pass it again to the view through a JSON object.

-You load your view.
-User selects a value in the dropDown --> an AJAX call is sent to the server with this value.
-A method on your controller catches the call an executes, populating a CourseTemplate element and returning it as a JSON object serialization.
-Your client code on the view receives the serialization, builds the JSON object and loads each field on the form with data on JSON object.
-Your user edit data and send the form --> your saving controller method is called and data is saved to database.

Author

Commented:
This appears to be the work-flow I was working toward - thank you very much.  I will work on this throughout the day and if all is well accept this as the solution.
If you find some trouble while working on it post it here and we'll try to help you on the solution.

Author

Commented:
Having trouble getting started.  I am at the point where I am trying to update just part of the page when a user selects an option from the drop-down.  I do not know how to do this properly.

For example, I know that if I want to "Submit" the entire form when a user selects from the dropdown, I would do something like this:

@Html.DropDownListFor(x => x.SelectedCourse, Model.Courses, "Custom", new { onchange = "this.form.submit();" })

Open in new window


. . . but I do not know how to use "onchange" to do something like the following:

(this is something I would attach to an @Ajax.ActionLink that would allow me to replace my target div with a partial view)
new AjaxOptions
{
    UpdateTargetId = "testDiv",
    HttpMethod="GET",
    InsertionMode= InsertionMode.Replace,
}))

Open in new window


How do I trigger the update when a user selects a different option from the dropdown?

edit: this is probably a simple jquery function that I have to write - to be honest I slept quite poorly before I awoke this morning - if this is as stupid as I think it is, please disregard until after I am in a better state of mind.  I will edit or reply when I return refreshed.
So, if I understand you well, you are having trouble making the AJAX call.

Well. From jQuery you can use the .ajax method to simply get a call to any url on your site.

Let's say you have a controller method to load the CourseTemplate element with a given identifier, you can do something like this on your .js file:

$("#yourDropDownListId").change(function () {
    $.ajax({  async: false,
        url: "http://yoursite/yourController/yourMethod/" + $(this).val(),
        success: function (yourMethodReturnValue) {
              //Here eval the JSon value and load it's data into form fields.
        }
    });
})

I hope this helps you.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial