asp.net-mvc - マスターレイアウトページ内にログインフォームを含める-ASP.NETMVC3

Question

ログインフォームを_Layout.cshtmlファイルに含めようとしていますが、いくつか問題があります。

まず、間違ったユーザー名やパスワードを入力した場合、または入力フィールドが検証に合格しなかった場合、部分ビューにエラーメッセージを表示する代わりに、部分ビューで画面全体が表示されます。

これは部分的なビューです：http：//i.imgur.com/oisCj85.png？1

これは、ログインで問題が発生したときに返される「部分的な」ビューです：http: //i.imgur.com/Uc5Sh2t.png?1

次に、ログインが成功すると、ユーザーはログインし、ページは「再ロード」されますが<body onload="loadPage();>、_Layout.cshtmlのJavascriptは実行されません（そのため、ログインバーを取得できません）デフォルトでは折りたたまれているため、再び表示されます）。編集：この問題は解決されました。エラーがあったため、JSは実行されませんでした。それはあなたがログインしていないときにだけ現れるボタンを参照しました、明らかにあなたがログインしているときにコードを壊しました:)

これが私のコードです：

_LogOn.cshtml：

@model project_blok_c_groep_13_webshop.Models.LogOnModel

@{
    if (Request.IsAuthenticated)
    {
    <div class="minicolumn">
        U bent ingelogd als: @User.Identity.Name
    </div>
    <div class="minicolumn miniborder">
        Click here to log out!
    </div>
    }
    else
    {
    <div class="minicolumn">
        @using (Html.BeginForm("_LogOn", "Account", new { ReturnUrl = Request.QueryString["ReturlUrl"] }))
        {
            <span style="color:red">@Html.ValidationSummary(true, "Incorrecte gebruikersnaam en/of wachtwoord.")</span>
            <fieldset>
                Gebruikersnaam:
                @Html.TextBoxFor(model => model.Username)
                @Html.ValidationMessageFor(model => model.Username)

                Wachtwoord:
                @Html.PasswordFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)

                <input type="submit" value="Log-in" />
            </fieldset>
        }
    </div>
    }
}

_Layout.cshtml：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
 <!-- saved from url=(0014)about:internet -->
 <head>
  <title>Webshop</title>
  <link href="@Url.Content("~/Content/Site.css")" type="text/css" rel="stylesheet" />
  <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans' rel='stylesheet' type='text/css' />

  <script type="text/javascript">
      <!--lots of javascript omitted here-->
  </script>

 </head>

 <body onload="loadPage();">
  <div class="maindiv">
   <div class="topbar">
   </div>
   <div id="minibar">
    @Html.ActionLink("Log uit", "LogOff","Account")
    <a href="/">Home</a>
    <a href="#">Catalogus</a>
    <a href="#">Winkelwagen</a>
    <a href="#">Contact</a>
    <a onclick="displayBar();">Account</a>
    <div id="visbar">
        @Html.Action("_LogOn", "Account")
    </div>
   </div>
   <div class="content">
     <div class="sidebar">
        @Html.Action("_Menu", "Home")
     </div>


     <div class="center">
      <noscript>
       <p>
        For full functionality of this site it is necessary to enable JavaScript.
        Here are the <a href="http://www.enable-javascript.com/" target="_blank">
        instructions how to enable JavaScript in your web browser.</a>
       </p>
      </noscript>

      @RenderBody()

     </div>
    </div>
    <div class="footer">

    </div>
   </div>
 </body>
</html>

そして最後に、AccountController：

    public class AccountController : Controller
    {
        private AuthDBController authDBController = new AuthDBController();

        public ActionResult LogOff()
        {
            FormsAuthentication.SignOut();

            return RedirectToAction("Index", "Home");
        }    

        /*
         * Voor de expandable bar.
         */
        public PartialViewResult _LogOn()
        {
            return PartialView();
        }

        [HttpPost]
        public ActionResult _LogOn(LogOnModel logOnModel, string returnUrl)
        {
            if (ModelState.IsValid)
            {
                bool auth = authDBController.isAuthorized(logOnModel.Username, logOnModel.Password);

                if (auth)
                {
                    FormsAuthentication.SetAuthCookie(logOnModel.Username, false);
                    return Redirect(returnUrl ?? Url.Action("Index", "Home"));
                }
                else
                {
                    ModelState.AddModelError("loginfout", "Incorrecte gebruikersnaam en/of wachtwoord.");
                }
            }
            return PartialView(logOnModel);
        }

    }

これらの問題は私を困惑させました、私は他の多くの同様の質問を調べました、しかし誰も答えを持っていませんでした。どんな助けでも大歓迎です。部分的なビュー、リダイレクトなどがどのように機能するのか理解していないと思います。

score 4 · Accepted Answer

私は同様の機能を実行しました。

コントローラのアクション：

[AllowAnonymous]
    [HttpPost]
    public ActionResult LoginJs(LoginModel m, string returnUrl)
    {
        if(ModelState.IsValid)
        {
            if(ValidateUser(m))
            {
                FormsAuthentication.SetAuthCookie(m.Card, false);

                return Json(new { success = true, redirect = Url.IsLocalUrl(returnUrl) ? returnUrl : Url.Action("Summary") });
            }

            ModelState.AddModelError("", _invalidUser);
        }

        return Json(new { errors = GetErrorsFromModelState() });
    }

    private IEnumerable<string> GetErrorsFromModelState()
    {
        return ModelState.SelectMany(x => x.Value.Errors.Select(error => error.ErrorMessage));
    }

私の_Layout.cshtmlコード：

@if (Request.IsAuthenticated)
{
   <div class="enter">
      U bent ingelogd als: @User.Identity.Name
      @Html.ActionLink("Log out", "Logoff", "Members", null, new { @class = "exit"     })
   </div>
}
else
{
    Html.RenderAction("LoginJsGet", "Members");
}

PartialViewコード：

@model LoginModel

@using(Html.BeginForm("Login", "Members", FormMethod.Post, new { id = "login", @class = "enter_form" }))
 {
     <span style="color:red">@Html.ValidationSummary(true, "Incorrecte gebruikersnaam en/of wachtwoord.")</span>
            <fieldset>
                Gebruikersnaam:
                @Html.TextBoxFor(model => model.Username)
                @Html.ValidationMessageFor(model => model.Username)

                Wachtwoord:
                @Html.PasswordFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)

                <input type="submit" value="Log-in" />
            </fieldset>
}

およびJavaScript：

<script>
$(function () {
    $('#login').unbind('submit');

    $('#login')
        .attr('action', '/Members/LoginJs')
        .bind('submit', function () {
            var form = this;
            if ($("#login").valid()) {
                $.post($(form).attr('action'), $(form).serialize(), function (data) {
                    if (data.errors) {
                        makePopup(data.errors, 'error', 'Ошибка входа');
                    } else {
                        document.location = data.redirect;
                    }
                });
            }

            return false;
        });
});

asp.net-mvc - マスターレイアウトページ内にログインフォームを含める-ASP.NETMVC3

1 に答える 1

Related

Reference