Question

这是Index控制器的Home视图

@{
    ViewBag.Title = "Index";
}

@if (Request.IsAuthenticated)
{
    @Html.Partial("_UserIsAuthenticated")
    @Html.Partial("~/Views/Task/_Tasks.cshtml")
}
else
{
    @Html.Partial("_UserIsNotAuthenticated")

    @Html.Partial("~/Views/User/_LogIn.cshtml")
    @Html.Partial("~/Views/User/_Registration.cshtml")

}

_UserIsNotAuthenticated 查看

<div class="col-md-12">To continue <a href="#" data-toggle="modal" data-target="#loginModal">sign in</a> or <a href="#" data-toggle="modal" data-target="#registrationModal">sign up</a>.
</div>

_UserIsAuthenticated 查看

<div class="col-md-12"><strong>@Html.Encode(User.Identity.Name)</strong>
@Html.ActionLink("Logout", "Logout", "User")</div>

_LogIn 和 _Registration 是模态窗口。
使用AJAX的用户登录和注册工作，脚本在

下面

var ajaxLogin = function (submitBtn) {
var $form = $("#login-form");
var $loginAnswer = $form.find("#login-answer");
var answer;
var code;
var messageClass = "";

$loginAnswer.addClass("hide").removeClass("alert-danger alert-success");
submitBtn.html("<span class='glyphicon glyphicon-refresh glyphicon-refresh-animate'></span> Waiting...").addClass("disabled");

var options = {
    url: $form.attr("action"),
    type: $form.attr("method"),
    data: $form.serialize()
};

$.ajax(options).done(function (data) {
    code = data.status;
    answer = data.message;

    messageClass = "";
    if (code === "OK") {
        messageClass = "alert-success";


        setTimeout(function () {
            // close modal and refresh part of the main page
        }, 1000);

    } else if (code === "ERROR") {
        answer = "<strong>Error! </strong>" + answer;
        messageClass = "alert-danger";
    }
    $loginAnswer.find(".answer").html(answer);
    $loginAnswer.addClass(messageClass).removeClass("hide");
})
    .fail(function () {
        code = "ERROR";
        answer = "<strong>Error! </strong>Please, try again.";
        $loginAnswer.find(".answer").html(answer);
        messageClass = "alert-danger";
        $loginAnswer.addClass(messageClass).removeClass("hide");
    })
    .complete(function () {
        submitBtn.html("Sign in").removeClass("disabled");
    });

return false;
};

$body.on("click", "#login-button", function () {
    ajaxLogin($(this));
});

$("#loginModal").on("hidden.bs.modal, show.bs.modal", function () {
    var $form = $("#registration-form");
    $form.find("input[type = text], input[type = password]").val("");
    $form.find("#registration-answer").removeClass("alert-danger alert-success").addClass("hide").find(".answer").html("");
});

我希望用户成功登录后关闭模态窗口$("#loginModal")，而如果_UserIsNotAuthenticated部分页面显示_UserIsAuthenticated部分，但我不知道该怎么做。我不想重新加载整个页面（即使它会以正确的方式工作），但我只想重新加载页面的一部分。有没有机会这样做？

Answer 1

您只能通过对将返回“_UserIsAuthenticated”局部视图的操作方法进行ajax调用来加载经过身份验证的部件。尝试如下：

public ActionResult AuthenticatedPartial()
{
    return PartialView("_UserIsAuthenticated");
}

和

setTimeout(function () {
        $.ajax({
             url: "/Home/AuthenticatedPartial",
             success: function(response){
                 $("#container").html(response);
             }
        });
}, 1000);

和

@{
    ViewBag.Title = "Index";
 }

<div id="container">
    @if (Request.IsAuthenticated)
    {
        @Html.Partial("_UserIsAuthenticated")
        @Html.Partial("~/Views/Task/_Tasks.cshtml")
    }
    else
    {
        @Html.Partial("_UserIsNotAuthenticated")

        @Html.Partial("~/Views/User/_LogIn.cshtml")
        @Html.Partial("~/Views/User/_Registration.cshtml")

    }
</div>

用户登录成功后刷新部分页面（ASP.NET MVC4）

1 个答案: