1

私は ASP.NET Web フォームに慣れており、ゆっくりと ASP.NET MVC を学習しています。私のウェブサイトには、ホームページに小さなログインフォームがあります。私の自然な考えでは、このログイン フォームは他の場所でも役立つ可能性があり、それはホームページの主要なアクションではないため、部分的なビューに分けたいと考えています。また、アカウントに関連しているため、HomepageController ではなく、AccountController でのログインが必要です。

ログイン フォームは、強く型付けされた非常に基本的な部分ビューです。

@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

ここでの問題は、フルページのポストバックを行っていることです。

選択肢は 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
    });
});

その場合、ページはログイン部分なしで通常どおり読み込まれます。ユーザーがリンクをクリックするLoginと、コントローラーのAccountが AJAX/jQuery を使用して呼び出されます。これにより、PartialView の HTML が返されます。この HTML は、Successハンドラーで jQuery を使用してページに追加できます。

于 2013-01-23T21:46:25.460 に答える
3

これは、マスター ページを取り除き、メイン コンテンツのみを返す部分ビューを返しているためです。多くの場合、アンダースコアで始まるアクションはパーシャルに使用されます (たとえば、ページ全体ではなく、ページの一部での ajax など)。部分的なアクションではなく、完全なアクションが必要なようです。

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

    return View();
}
于 2013-01-23T21:32:58.800 に答える