Using Jquery to collect data, use data to get a Partial View from the controller, and append the passed information to the end of a page

Ecnalyr
Ecnalyr used Ask the Experts™
on
I am attempting to append a partial view to the end of my 'currently displayed page' when a selection from a dropdown menu is chosen.

This is the dropdown from my view:

    <div>
            @Html.DropDownListFor(x => x.DropDownInfo, Model.Info, "DefaultSelection")
            @Html.ValidationMessageFor(model => model.Courses)
    </div>

Open in new window


I am in most need here in my Jquery.  What do I need to do to append the PartialView that is returned by my controller (pasted below)?  My current Jquery:

    $(document).ready(function() {
        $("#DropDownInfo").change(function() {
            var strSelected = "";
            $("#DropDownInfo option:selected").each(function() {
                strSelected += $(this)[0].value;
            });
            var url = "/Controller/PreFillMethod/?MethodString=" + strSelected;

            $.post(url, function(data) {
                //*****
                // Assuming everything else is correct,
                // what do I do here to have my partial view returned 
                // at the end of the currently displayed page?
                //*****
            });
        });
    });

Open in new window


This is the part of my controller that replies with a PartialView (I want the string from the dropdown selection to be passed into this controller to ultimately be used to fill in a field in the PartialView's form) :

    public PartialViewResult PreFillCourse(string selectedFromDropDown)
    {
        ViewBag.selectedString = selectedFromDropDown;
        MyViewModel preFill = new MyViewModel
        {
            Title = selectedFromDropDown, // I am using this to pre-fill a field in a form
        };
        return PartialView("_PartialViewForm", preFill);
    }

Open in new window

The Partial View (in the case that it matters):

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

            <div class="editor-label">
                @Html.LabelFor(model => model.Title)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Title)
                @Html.ValidationMessageFor(model => model.Title)
            </div>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

Open in new window

I am open to suggestions if I am approaching the situation entirely incorrectly.

My goal is to have a user select a 'template' from the drop-down menu and have that template's data autopopulate into a form below the drop-down.

My Jquery is very rough - I am using this post as a guide
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Solved:
Needed to choose a div in my view to append, such as:

<div id ="divToAppend">
</div>

Open in new window


Then change my Jquery to:

$(document).ready(function() {
    $("#DropDownInfo").change(function() {
        var strSelected = "";
        $("#DropDownInfo option:selected").each(function() {
            strSelected += $(this)[0].value;
        });
        var url = "/Controller/PreFillMethod/?MethodString=" + strSelected;

        $.post(url, function(data) {
             $('#divToAppend').html(data);

            //*****
            // Assuming everything else is correct,
            // what do I do here to have my partial view returned 
            // at the end of the currently displayed page?
            //*****


          });
    });
});

Open in new window

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