Question

我习惯于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，当我单击“登录”时它根本不执行任何操作。

login form after pressing Log In

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

Answer 1

这是因为你正在返回一个局部视图，它会剥离母版页并返回主要内容。通常以下划线开头的动作用于部分（例如，在页面的某个页面中打字，但不是整页页面）。听起来你想要一个完整的动作，而不是一个部分，所以

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

    return View();
}

Answer 2

这里的问题是你正在进行全页回发。

你有两个选择，真的。

首先，您可以使用整页回发，然后致电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
    });
});

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

ASP.NET MVC的新功能，包含表单的渲染操作有问题

2 个答案: