使用jQuery问题的弹出对话框

时间:2013-06-26 01:23:33

标签: asp.net asp.net-mvc-4

您好我的网页有问题。我在同一页面中有一个视图页面和两个表单。

问题是我有一个主窗体和另一个由JQuery显示的窗体。我的问题是当我打开对话框,提交其表单并返回视图时,对话框为diappears。我不知道如何返回仍会显示打开对话框的结果。

我需要你的帮助!

以下是我在申请中使用的代码。

.CSTHML表格

@using (Html.BeginForm("Login2", "Account", FormMethod.Post, new { @id = "loginForm" }))
{
    <a id="submitlink" href="#" class="button button-large">Sign In</a>
}

// This is the pop-up dialog box
@using (Html.BeginForm("TroubleSubmit", "Account", FormMethod.Post, new { @id = "troubleSubmitForm" }))
{
    <a id="troubleSubmitLink" href="#" class="button">OK</a>
}

JQUERY

$('a#submitlink').click(function () {
            $('#loginForm').submit();
        });

$('a#troubleSubmitlink').click(function () {
            $('#troubleSubmitForm').submit();
        });

以下是处理对话框表单提交的控制器操作的代码:

public ActionResult SignInTrouble(some parameter...)
    {
        // some operation and validation here

        return View(); // ??? What view will I return? When I return "Login" it will reload the page and close the dialog box.
    }

同样,如何返回仍会显示对话框的视图

2 个答案:

答案 0 :(得分:0)

只是由于页面被重新加载,你必须在这种情况下使用ajax表单,所以它只会处理ajax表单的动作然后将结果返回给表单而不重新加载页面

@Ajax.BeginForm("TroubleSubmit","Account", new AjaxOptions(){ ...... })

答案 1 :(得分:0)

您以传统(非AJAX)方式提交表单,以便重新加载页面。因此,您需要以AJAX方式发布。

$("#submitlink").on("click", function () {
    var loginForm = $("#loginForm");

    $.ajax({
        url: loginForm.attr("action"),
        type: "post",
        data: loginForm.serialize(),
    })
    .done(function(result) {
        // do something with the returned response
    });
});

成功的回复由.done()处理,但您返回的内容以及您如何处理结果取决于您。最简单的选择是返回一个局部视图,因此它只是一个插入现有div容器的html片段。

.done(function(result) {
    $("#someDiv").html(result);
});

我经常返回JSON,视图呈现为html字符串{ status: 0, message: "Success", html: "<div>..." }。如果你只需要一个简单的YES / NO。

,你可以省略JSON中的html片段
public ActionResult SignInTrouble(some parameter...)
{
    // some operation and validation here

    return Json({
        status: 1,
        message: "Validation Error"
    });
}

然后,您可以通过回复获得更多可能性

.done(function(result) {
    var status = result.status;
    var message = result.message;
    if (status == 0) {
      // OK
    } else {
      // ERROR
    }
    $("#messageDiv").text(message);
}