1

我习惯了 ASP.NET Web 表单，并且正在慢慢学习 ASP.NET MVC。我的网站主页上有一个小登录表单。我的自然想法是，这个登录表单可能在其他地方有用，它不是主页的主要操作，所以我想将它分离成一个局部视图。而且因为它与帐户有关，所以我希望在我的 AccountController 而不是我的 HomepageController 中登录。

登录表单是一个非常基本的强类型部分视图：

@model Models.Account.AccountLogin

   <h2>Login Form</h2>

    @using (Html.BeginForm("_Login", "Account")) { 

        @Html.ValidationSummary()

        <div>
            <span>Email address:</span>
            @Html.TextBoxFor(x => x.EmailAddress)
        </div>

        <div>
            <span>Password:</span>
            @Html.PasswordFor(x => x.Password)
        </div>

        <div>
            <span>Remember me?</span>
            @Html.CheckBoxFor(x => x.RememberMe)
        </div>

        <input type="submit" value="Log In" />
    }

</div>

在主页上，我有这个：

@Html.Action("_Login", "Account")

最后，在帐户控制器中，这是：

[HttpGet]
    public PartialViewResult _Login()
    {
        return PartialView();
    }

[HttpPost]
public PartialViewResult _Login(AccountLogin loginDetails)
{
    // Do something with this

    return PartialView();
}

现在，当我加载我的主页时，它看起来不错并且包含表单。当我单击登录按钮时，它会将我带到myurl/Account/_Login，其中包含表单，但不在 _Layout 母版页中，只是基本的纯 HTML，当我单击登录时它根本没有做任何事情。

按下登录后的登录表单

我很确定我错过了我应该在这里做的一些基本方面，有人可以指出我正确的方向吗？

4

2 回答 2

3

这是因为您要返回一个局部视图，该视图剥离了母版页，只返回了主要内容。通常以下划线开头的动作用于部分（例如，在页面的一部分中进行 ajaxing，但不是整个页面）。听起来你想要一个完整的动作，而不是部分动作，所以

[HttpPost]
public ActionResult Login(AccountLogin loginDetails)
{
    // Do something with this

    return View();
}
于 2013-01-23T21:32:58.800 回答
3

这里的问题是您正在执行整页回发。

你有两个选择，真的。

首先，您可以使用整页回发，然后调用Html.Partial显示您的部分。

就像是

[HttpGet]
public ActionResult Login()
{
    return View();//this typically returns the view found at Account/Index.cshtml
}

然后沿线创建一个视图

@{
    ViewBag.Title = "Index";
}

<h2>Title</h2>


@Html.Partial("PartialNameGoesHere")

然后在指定的位置呈现您的部分内容，但这是在页面加载时完成的（如果您查看生成的 HTML，它看起来就像您是内联编写的一样）。

或者您可以使用 jQuery/AJAX 按需加载部分。假设您有一些描述的主页

public ActionResult Home()
{
    return View();
}

public ActionResult Login()
{
    return PartialView("_Login");
}

创建视图

@{
    ViewBag.Title = "Index";
}

<h2>Home</h2>
<div>
    <p>Hey welcome to my pretty awesome page!</p>
</div>
<a href="#" class="my-login-link">Show me the login!</a>
<div id="container">

</div>

然后，您可以在需要时使用一些 JS 将其加载PartialView到容器中。div

$(function() {
    $('.my-login-link').click(function() {
        $.ajax({
            url: 'account/login',
            success: function(data) {
                $('#container').html(data);
            }
        });
        return false;//cancel default action
    });
});

在这种情况下，页面加载正常，没有登录部分。当用户单击链接时，Login控制器Account上的 将使用 AJAX/jQuery 调用。这将返回 PartialView 的 HTML，然后您可以在Success处理程序中使用 jQuery 将其添加到页面中。

于 2013-01-23T21:46:25.460 回答