javascript - 如何在用户未通过身份验证时创建模式弹出窗口以登录？

Question

我有这个显示数据表的视图：

@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 中的模式弹出窗口中吗？提前感谢您的帮助！

Answer 1

你可以试试下面的视图：

    <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>

请问有什么问题。

Answer 2

我找到了解决方案：

在 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>

它现在完美运行。感谢您的回答。