CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-ajaxasp.net-mvc-partialview
Rani Radcliff
Rani Radcliff

Reputation: 5084

Append Multiple PartialViews after Selection in Dropdownlist

I have a view that loads multiple partial views for each "Unit" in the model. If the user changes the selection in the "Assessment" dropdownlist, I need to re-render the partials with the correct Units. When the page loads it loads with the following:

                <div class="kt-portlet__body" id="unitSection" >
                    @if (Model.Units != null)
                    {
                        foreach (var unit in Model.Units)
                        {
                            Html.RenderPartial("UnitGapRow", unit);
                        }
                    }
                </div>

I am making an ajax call when the user changes the selection in the dropdownlist like this:

        $('#AssessmentId').change(function (e) {
           var assessmentId = $(this).val();
           getUnits(assessmentId);
        });

    function getUnits(assessmentId) {
    $('#unitSection').html('');
    $.ajax({
        url: "@(Url.Action("GetRequirementUnits", "Config", new { area = "Competency" }))",
        data: {
            AssessmentId: assessmentId,
            RequirementId: "@Model.RequirementId"
        },
        type: "POST",
        success: function (data) {
            for (var unit in data) {
                $('#unitSection').append(@Html.RenderPartial("UnitGapRow",unit));
            }
        }
    })
}

Everything works except the rendering of the partial for each unit. I tried using load method, but it "replaces" as opposed to "appending" each partial.

Any assistance is greatly appreciated.

Upvotes: 0

Views: 32

Answers (1)

Rani Radcliff
Rani Radcliff

Reputation: 5084

I was able to "chain" "load()" method with a loop in order to render the partials. Since load() replaces, I dynamically created divs, appended to original div and used the dynamically created div to call the load method:

    function getUnits(assessmentId) {
    $('#unitSection').html('');
    $.ajax({
        url: "@(Url.Action("GetRequirementUnits", "Config", new { area = "Competency" }))",
        data: {
            AssessmentId: assessmentId,
            RequirementId: "@Model.RequirementId"
        },
        type: "POST",
        success: function (data) {

            var i = 0;
            for (var x = 0; x < data.length; x++) {
                var unit = data[x];
                var unitId = unit.UnitId;
                $('#unitSection').append('<div id="div' + i + '"></div>');
                $('#div' + i).load('@Url.Action("GetRequirementUnit", "Config", new { area = "Competency" })?UnitId=' + unitId);
                i++;
            }
        }
    })
}

I hope this helps someone else.

Upvotes: 1

Related Questions