如何在提交后保留模态对话框?

时间:2012-10-27 18:35:09

标签: c# javascript jquery asp.net-mvc-4 modal-dialog

我正在尝试创建一种方式,以便在单击提交按钮或链接时,执行提交  并保持在相同的模态对话框中。 我的程序在同一个对话框中有两个表单,一个在第一个被提交之前没有显示,我希望在同一个对话框中提交第一个表单加载。

对于加载对话框,我有以下代码:

function loadDialog(tag, event, target) {
        event.preventDefault();
        var $loading = $('<img src="../../Content/assets/images/nivo-loader.gif" alt="loading" class="ui-loading-icon">');
        var $url = $(tag).attr('href');
        var $title = $(tag).attr('title');
        var $dialog = $('<div></div>');
        $dialog.empty();
        $dialog
        .append($loading)
        .load($url)
        .dialog({
            autoOpen: false
            , title: $title
            , width: 600
            , modal: true
            , minHeight: 200
            , show: 'fade'
            , hide: 'fade'
        });
});

然后在Create.cshtml中:

@model Mvcproject.Models.MyModel
<script language="javascript" type="text/javascript">
$(function () {
    $("input[type=submit]")
        .button(
        );
    $('a.modalDlg2').live("click", function (event) { loadDialog('#modalDlg', event, '#Receipt Create'); });

    /*$('input.Submit').live("click", function (event) {
        e.preventDefault();
        loadDialog('#modalDlg', event, '#Receipt Create');
    });*/

    $(".demo button").button({
        icons:
    {
        primary: 'ui-icon-plusthick'
    }
    });
});
</script>
<h2>
Add line</h2>
@using (Html.BeginForm())
{
@Html.ValidationSummary(true)

<fieldset class="createReceipt">
    <legend>User login</legend>
    @if (ViewBag.Created)
    {
        <table class="createTable">
            <tr>
                <td rowspan="4">
                    <img src="../../Images/no_image.jpg" width="100" height="100" />
                </td>
                <th colspan="1">
                    @Html.LabelFor(model => model.User.Name)
                </th>
                <td colspan="5">
                    @Html.EditorFor(model => model.User.Name)
                    @Html.ValidationMessageFor(model => model.User.Name)
                </td>
            </tr>
            <tr>
                <th colspan="1">
                    @Html.LabelFor(model => model.User.Email)
                </th>
                <td colspan="5">
                    @Html.EditorFor(model => model.User.Email)
                    @Html.ValidationMessageFor(model => model.User.Email)
                </td>
            </tr>
            <tr>
                <th colspan="1">
                    @Html.LabelFor(model => model.User.Password)
                </th>
                <td colspan="5">
                    @Html.EditorFor(model => model.User.Password)
                    @Html.ValidationMessageFor(model => model.User.Password)
                </td>
            </tr>
            <!--User picture-->
            <tr>
                <td>
                    <input type="file" value="browse" name="Browse" accept="image/gif, image/jpeg, image/jpg" />
                </td>
            </tr>
        </table>
        <p>
            <input type="submit" class="Submit" value="Create" />
            <buttonreceipt style="width: 150px; text-align: left">@Html.ActionLink("Create", "Create")</buttonreceipt>
        </p>
    }
    else
    { 
        <!-- This will be displayed when user data is submited and inserted into database-->
        <table class="createTable">
            <tr>
                <th colspan="1">
                    @Html.LabelFor(model => model.User.Name)
                </th>
                <td colspan="5">
                    @Html.DisplayFor(model => model.User.Name)
                </td>
            </tr>
            <tr>
                <th colspan="1">
                    @Html.LabelFor(model => model.User.Email)
                </th>
                <td colspan="5">
                    @Html.DisplayFor(model => model.User.Email)
                </td>
            </tr>
            <tr>
                <td colspan="1">
                    <img src="@Model.User.Picture"/>
                </td>
            </tr>
        </table>
    }
</fieldset>        


}
@if (!ViewBag.Created)
{
    @Html.Partial("_AddUserInformation");
}

ViewBag.Created为false或true,具体取决于用户数据是否已成功插入数据库并且该功能已经完成。
并且_AddUserInformation.cshtml包含尝试注册的用户的其他信息,例如地址和国家/地区。
希望这能更好地解释我的问题。

1 个答案:

答案 0 :(得分:1)

您可以使用jQuery post()函数将数据发送到地址。您需要使用jQuery选择器手动从字段中选择数据(应该不难),并配置接收和处理数据的函数。帖子上的这个链接应该为您提供入门所需的内容。 http://api.jquery.com/jQuery.post/