在ajax响应中从View Model动态构建输入

时间:2016-08-26 23:14:21

标签: javascript jquery ajax asp.net-mvc asp.net-mvc-4

我有一个控制器操作,可以发送一组ApiViewModel类型。每个视图模型表示可以在服务器端执行的不同API,并使用jquery通过ajax调用在浏览器中输出响应。服务器生成HTML,因此我所要做的就是将服务器端HTML插入当前页面。

某些API只有在给出一些参数时才能执行。我试图以通用的方式做到这一点。当用户单击运行按钮时,我会显示一个模型Bootstrap对话框。在此对话框中,我想为所选API的参数提供输入选项。

这是我的模态对话框的HTML

<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>

我有足够的信息发送到服务器,让服务器知道将要执行什么API,以及View Model需要使用它。我不确定的是,我应该如何将HTML放在服务器端,以便我可以将HTML发送到客户端并让MVC验证属性仍然适用于客户端验证?

我用来将数据发送到服务器的javascript,以及将服务器HTML添加到DOM就是这样。如果不需要View Model,我只是向服务器发出请求以执行应用程序并输出服务器端响应HTML。我想我不需要对下面的Java Script做任何事情来处理验证内容;但不确定。

$('.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);
        })
    });
});

我是否只是在服务器端生成HTML,就像我在视图中一样?将HTML插入DOM时,验证是否会在使用不显眼的jquery验证时正常工作?

0 个答案:

没有答案