如何创建一个模态弹出登录时，用户没有经过身份验证

How to create a modal popup to login when the user is not authenticated?

本文关键字：登录用户经过身份验证模态创建何创建一个更新时间：2023-09-26

我有这样一个显示数据表的视图:

@if(Request.IsAuthenticated){
    <fieldset id="detailPrix">
        <legend>Details prix</legend>
            <div class="scrollableContainer">
            <div class="scrollingArea">
            <table class="cruises scrollable">
                <thead>
                    <tr>
                        <th>
                            Carburant
                        </th>
                        <th>
                            Prix
                        </th>
                        <th>
                            Date d'ajout
                        </th>
                        <th>
                            Mettre à jour
                        </th>
                    </tr>
                </thead>
                @for(int index =0; index<Model.carburants.Count;index++){
                    <tbody>
                        <tr>
                            <td>
                                @Html.DisplayName(Model.carburants[index].data.ToString())
                            </td>
                            <td>
                                @Html.DisplayName(Model.prixCarburants[index].ToString())
                            </td>
                            <td>
                                @Html.DisplayName(Model.dateAjoutCarburants[index].ToString())
                            </td>
                            <td>
                                @Html.ActionLink("Modifier", "ModifierPrix", new {carbuId = Model.carburants[index].id, stationId= Model.station.id, Myvmsd=Model, index=index, prix=Model.prixCarburants[index]})
                            </td>
                        </tr> 
                    </tbody>
                }
            </table>
        </div>
    </div>
    </fieldset>
}
else{
     // If the user didn't authenticated, I want to display the popup modal to login (in JQuery or JS). 
}

我想我的登录视图到模态弹出。这是我的登录视图:

<section id="loginForm">
<h2>Connexion avec un compte local.</h2>
@using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Formulaire de connexion.</legend>
        <ol>
            <li>
                @Html.LabelFor(m => m.UserName)
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </li>
            <li>
                @Html.LabelFor(m => m.Password)
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </li>
            <li>
                @Html.CheckBoxFor(m => m.RememberMe)
                @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
            </li>
        </ol>
        <input id="LogIn" type="submit" value="Log in" />
    </fieldset>
    <p>
        @Html.ActionLink("Register", "Register") Si vous n'avez pas de compte.
    </p>
}
</section>
<section class="social" id="socialLoginForm">
    <h2>Connexion via Les réseaux sociaux</h2>
    @Html.Action("ExternalLoginsList", new { ReturnUrl = ViewBag.ReturnUrl })
</section>

这是可能的显示这个视图到一个模式弹出在JQuery中，例如?谢谢你的帮助!

您可以尝试如下观点:

    <div id="login">
        <section id="loginForm">
        <h2>Connexion avec un compte local.</h2>
        @using (Html.BeginForm(new { ReturnUrl = ViewBag.ReturnUrl })) {
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)
            <fieldset>
                <legend>Formulaire de connexion.</legend>
                <ol>
                    <li>
                        @Html.LabelFor(m => m.UserName)
                        @Html.TextBoxFor(m => m.UserName)
                        @Html.ValidationMessageFor(m => m.UserName)
                    </li>
                    <li>
                        @Html.LabelFor(m => m.Password)
                        @Html.PasswordFor(m => m.Password)
                        @Html.ValidationMessageFor(m => m.Password)
                    </li>
                    <li>
                        @Html.CheckBoxFor(m => m.RememberMe)
                        @Html.LabelFor(m => m.RememberMe, new { @class = "checkbox" })
                    </li>
                </ol>
                <input id="LogIn" type="submit" value="Log in" />
            </fieldset>
            <p>
                @Html.ActionLink("Register", "Register") Si vous n'avez pas de compte.
            </p>
        }
        </section>
    </div>
<input type="button" id="loginbtn" />

    <script>
   var $login=  $('#login').dialog({
                autoOpen: false,
                title: '',
                modal: true,
                width: 50,
                height: 50
            });
    // you need to write button click event to open it
    $('#loginbtn').click(function(){
    $login.dialog('open');
    });
    </script>

询问是否有问题

我找到了解决方案:

在else语句中，我将最后一个<td>更改为:

<td>
    <p>
        @Html.ActionLink("Se logger", "Login", "Account", null, new { @class = "openDialog", data_dialog_id = "loginDialog", data_dialog_title = "Log in"})
    </p>
</td>

在我的_Layout中添加<script>:

<script type="text/javascript">
    $.ajaxSetup({ cache: false });
    $(document).ready(function () {
        $(".openDialog").live("click", function (e) {
            e.preventDefault();
            $("<div></div>")
                .addClass("dialog")
                .attr("id", $(this)
                .attr("data-dialog-id"))
                .appendTo("body")
                .dialog({
                    title: $(this).attr("data-dialog-title"),
                    close: function () { $(this).remove(); },
                    modal: true,
                    height: 250,
                    width: 400,
                    left: 0
                })
            .load(this.href);
        });
        $(".close").live("click", function (e) {
            e.preventDefault();
            $(this).closest(".dialog").dialog("close");
        });
});
</script>

它现在工作得很好。谢谢你的回答。