Build input dynamically from View Model in an ajax response

Question

I have a controller action that sends down a collection of ApiViewModel Types. Each view model represents a different API that can be executed server-side, and output the response in the browser through an ajax call using jquery. The server generates the HTML so all I have to do is insert the server-side HTML into the current page.

Some of the APIs can only execute if they are given some parameters. I'm trying to do this in a generic fashion. When the user clicks the run button, I display a model Bootstrap dialog. Within this dialog I'd like to provide the input options for the parameters on the API selected.

This is my HTML for the modal dialog

<div class="modal fade"
     id="appParameters"
     role="dialog"
     aria-labelledby="appParametersLabel">
    <div class="modal-dialog"
         role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="appParametersLabel"></h4>
            </div>

            <div class="modal-body" id="appDialogBody">

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

i have enough information to send to the server, letting the server know what API is going to be executed, and what View Model needs to go with it. What I'm not sure of though is how should I put together the HTML on the server side, so that I can send the HTML to the client and have the MVC validation attributes still work for client-side validation?

The javascript I'm using to send the data to the server, and add the servers HTML to the DOM is this. If no View Model is required, I just make a request to the server to execute the app and output the server-side response HTML. I think I don't need to do anything in regards to my Java Script below to handle the validation stuff; not sure though.

$('.btn-success').click(function () {
    var button = $(this);
    var appId = $(this).data("app");
    var vmRequired = $(this).data("vm-required");

    if (!vmRequired) {
        var url = "/Home/RunApp?appId=" + appId;
        $.get(url, function (data) {
            $("div[data-app='" + appId + "']").html(data);
            var buttonColumn = button.parent();
            var appRow = buttonColumn.parent();
            var hiddenRow = appRow.next()
            hiddenRow.removeClass("hidden");

            appRow.click(function () {
                var hiddenColumn = hiddenRow.children().first();
                var resultsDiv = hiddenColumn.children().first();
                resultsDiv.empty();
                hiddenRow.addClass("hidden");
                $(this).off();
                hiddenRow.off();
            })
            hiddenRow.click(function () {
                var hiddenColumn = $(this).children().first();
                var resultsDiv = hiddenColumn.children().first();
                resultsDiv.empty();
                $(this).addClass("hidden");
                appRow.off();
                $(this).off();
            })
        });

        return;
    }

    var appName = $(this).data("app-name");
    $('#appParametersLabel').html(appName);
    $('#appParameters').modal({
        keyboard: true,
        backdrop: "static",
        show: false,

    }).on('show', function () {
        $.get(url, function (data) {
            $('#appDialogBody').html(data);
        })
    });
});

Do I just generate the HTML on the server side, like I would normally in the view? When the HTML is inserted into the DOM, will the validation all work correctly while using unobtrusive jquery validation?

_Will the validation all work correctly while using unobtrusive jquery validation?_ - Not unless you reparse the validator after appending the new elements (refer [this answer](http://stackoverflow.com/questions/31768946/required-field-validations-not-working-in-jquery-popup-mvc-4/31769058#31769058)) — , Aug 26 '16 at 23:20
Ok, I see how he needs to use `$.validator.unobtrusive.parse(foo);` in that example you linked. Do I provide `parse`with my bootstrap modal dialog, or just the html that the server sends in the response (a form in the response in this case)? — Johnathon Sullinger, Aug 27 '16 at 01:42
It needs to be done in the main view after the html has been updated (after `$('#appDialogBody').html(data);`) — , Aug 27 '16 at 02:07

Build input dynamically from View Model in an ajax response

0 Answers0