How to return a dynamic number of multiple partial views inside another partial view

Question

I want to return a dynamic number of multiple partial views inside another partial view in the controller, and inject it to the DOM using an Ajax call. The user is going to select a package (radio buttons) and depending on this package I need to return X number of forms to be filled by the user.

This is my Ajax code:

$(function() {
    var serviceURL = "/NewOrderRequestForms/GetFormsToCreateNewOrderRequest";

    $(":radio").change(function() {
        $.ajax({
            url: serviceURL,
            type: "POST",
            data: { account: $("#AccountId").val(), serviceAvailabilityPackageId: $(":radio:checked").val() },
            success: function(xhrData) {
                populateNORForms(xhrData);
            },
            error: function() {
            alert("error");
        }
        });
    });
});

My controller method looks like the following:

public virtual ActionResult GetFormsToCreateNewOrderRequest(Guid account, int serviceAvailabilityPackageId)
{
    var customerNumber = _authorizationUtil.GetAccount(account).CustomerNumber;
    var result = _customFormService.GetFormsToCreateNewOrderRequest(customerNumber.Value,
        serviceAvailabilityPackageId).Select(x => x.FormKey);

    var forms = CustomFormUtil.GetCustomMetaPartial(result);

    //I am confused here
    //return PartialView(something)
}

CustomFormUtil.GetCustomMetaPartial(result) is going to return an IEnumerable<string> of 1 to 6 strings for example "form1, form3" or "form1, form2, form3, form6" etc. I am using this to return a Dictionary of View names and Models to add them in my ultimate partial view.

//Dictionary for Custom Meta Partialviews
public static Dictionary<string, CustomMetaPartialViewModel> CustomMetaPartial2 = new Dictionary<string, CustomMetaPartialViewModel>() 
{
    {"form1_v1", new CustomMetaPartialViewModel(MVC.Service.NewOrderRequestForms.Views.form1_v1, new form1_v1())},
    {"form2_v1", new CustomMetaPartialViewModel(MVC.Service.NewOrderRequestForms.Views._form2_v1,new form2_v1())},
    ...
    {"form7_v1",  new CustomMetaPartialViewModel(MVC.Service.NewOrderRequestForms.Views._form7_v1,new form7_v1())}
};

My question is: how can I add these partial Views with Models into another big partial view and send this one back to the View?

I don't understand why this should be a problem. Can you post your partial views and the main view? — ataravati, Mar 04 '15 at 19:46
By the way, it seems like you have over-complicated a very simple requirement. — ataravati, Mar 04 '15 at 19:49
Because I want to return this Parent view, with multiple and different view-models. And I can't find the proper way to add of those views into the main views and return it. — Guillermo Sánchez, Mar 04 '15 at 20:18
Could you share your thought about a better way to do this, I can't think in another solution for my issues, I was thinking to have a separate Ajax call to render each partial view individually, but I think performance wise is not the best solution. — Guillermo Sánchez, Mar 04 '15 at 20:20
You can create child actions for each partial view in the main partial view, and load/reload them as needed using an ajax call. But, I need to see your partial views in order to give you a more detailed answer. — ataravati, Mar 04 '15 at 21:39

score 0 · Answer 1 · answered Mar 06 '15 at 22:30

Ok, I have my answer for this, instead of using Ajax to call the List of string I am using to create a PartialView that renders everything I need.

This is my AJAX call

    $(function () {
    var serviceURL = "/NewOrderRequestForms/GetFormsToCreateNewOrderRequest";

    $(":radio").change(function () {
        $.ajax({
            url: serviceURL,
            type: "POST",
            data: { account: $("#AccountId").val(), serviceAvailabilityPackageId: $(":radio:checked").val() },
            success: function (xhrData) {
                $('#NORForms').html(xhrData);
            },
            error: function () {
                alert("error");
            }
        });
    });
});

And the function in the controller is the following:

        public virtual ActionResult GetFormsToCreateNewOrderRequest(Guid account, int serviceAvailabilityPackageId)
    {
        var customerNumber = _authorizationUtil.GetAccount(account).CustomerNumber;
        var result = _customFormService.GetFormsToCreateNewOrderRequest(customerNumber.Value,
            serviceAvailabilityPackageId).Select(x => x.FormKey);

        return PartialView(Views.GenericParentView, result);
    }

I am getting all the information I need from the View, however, instead of returning a List of Strings to the callback in Ajax, I am returning a PartialView having the list of Strings that I needed as the parameter that I need to render the partials Views. Here is the new Partial View that handles this.

    @using UI.Shared.Utils
@model IEnumerable<string>
    @{
        var forms = CustomFormUtil.GetCustomMetaPartial2(Model);
        var result = forms.Select(x => x.Model);  
    }


    @using (Html.BeginForm(MVC.Service.NewOrderRequest.Index(new TdlMasterModel()), FormMethod.Post))
        {
            foreach (var form in forms)
            {
                { Html.RenderPartial(form.View, form.Model); }
            }
            <p style="clear: both">
                <input id="submitNOR" type="submit" value="Submit" style="float: right" />
            </p>
        }

I am sending a list of Strings, and using it to spit out a Dictionary with Model,Views and I am rendering them in the partial view, using a foreach loop. Saving me at the end some extra Ajax calls, in resume I was tackling my problem the wrong way.

How to return a dynamic number of multiple partial views inside another partial view

1 Answers1