ASP.net MVC 弹出窗口

ASP.NET MVC中使用jQuery实现弹窗登录

最新推荐文章于 2024-01-08 15:35:48 发布

fhuan123

最新推荐文章于 2024-01-08 15:35:48 发布

阅读量1.2k

点赞数

分类专栏： ASP.net MVC 文章标签： ASP.net ASP .net MVC jQuery ViewUI

ASP.net MVC 专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何在ASP.NET MVC应用中利用jQuery 1.8创建弹出窗口进行用户登录操作。涉及的文件包括LoginOn.aspx视图、AccountController控制器以及UserModel模型。同时，还提醒在实现过程中需要注意引入正确的jQuery库版本。

LoginOn.aspx

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<NowSource.ViewModels.Account.LogOnModel>" %>
<asp:Content ID="loginTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Login | NowSource
</asp:Content>
<%--<asp:Content ID="Content1" ContentPlaceHolderID="LogoutLink" runat="server">
<a href="mailto:nowsourcesupport@nowdocs.com">Contact Us</a>
</asp:Content>--%>
<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" >
        //弹出窗口JQuery
        function pop_forgetUser() 
        {
            $("#ForgetUserNameBox").dialog({ height: 230,
                width: 550,
                modal: true,
                resizable: false,
                dialogClass: "custom-tip-style"
            });
            $(".ui-dialog-titlebar").hide();//hide dialog title
        }
        //关闭窗口，注意要使用destroy，为了下次打开不显示验证信息，但是在IE中一直失败，不知道原因
        function close_forgetUser()
        {
            $("#ForgetUserNameBox").dialog('destroy');//close dialog, and destory dialog
        }

        function pop_forgetPassWord() 
        {
            $("#ForgetPassWordBox").dialog({ height: 230,
                width: 550,
                modal: true,
                resizable: false,
                dialogClass: "custom-tip-style"
            });
            $(".ui-dialog-titlebar").hide();//hide dialog title
        }

        function close_forgetPassWord()
        {
            $("#ForgetPassWordBox").dialog('destroy');//close dialog, and destory dialog
        }
    </script>
    <div id="ForgetUserNameBox" style="display:none;">
    <!--弹出窗口，ForgetUserName实际就是Control中的Action名称-->
    <iframe src="ForgetUserName" style="width:98%; height:98%;" scrolling="no" frameborder="0"></iframe>
    </div> 

    <div id="ForgetPassWordBox" style="display:none;">
    <iframe src="ForgetPassWord" style="width:98%; height:98%;" scrolling="no" frameborder="0"></iframe>
    </div> 

    <br />
    <br />
    <div id="login_wrapper">
        <div class="login_wrapper_bg">
            <h1>
                <%: Resources.LogOnPage.Welcome %></h1>
            <p>
                Don't use NowSource yet? <a>Take a tour</a> or <a href="mailto:nowsourcesupport@nowdocs.com"><%: Resources.LogOnPage.ContactUs %></a> for more information.</p>
            <% Html.EnableClientValidation(true); %>
            <% using (Html.BeginForm()) { %>
            <span class="error"><%: Html.ValidationSummary(true) %></span>
            <fieldset>
                <div class="form_wrapper">
                    <div class="input_wrapper">
                        <%: Html.LabelFor(m => m.UserName)%>
                        <%: Html.TextBoxFor(m => m.UserName)%>
                        <a href="#" id="forgetUserNameherf" onclick="pop_forgetUser();"><%: Resources.AccountModel.ForgetYourName %></a>
                        <p>
                            <span class="error"><%: Html.ValidationMessageFor(m => m.UserName)%></span>
                        </p>
                    </div>
                    <div class="input_wrapper">
                        <%: Html.LabelFor(m => m.Password)%>
                        <%: Html.PasswordFor(m => m.Password)%>
                        <!--弹出窗口的链接-->
                        <a href="#" id="forgetPassWordherf" onclick="pop_forgetPassWord();"><%: Resources.AccountModel.ForgetYourPassWord %></a>
                        <p>
                            <span class="error"><%: Html.ValidationMessageFor(m => m.Password)%></span>
                        </p>
                    </div>
                    <%: Html.CheckBoxFor(m => m.RememberMe)%>
                    <%: Html.LabelFor(m => m.RememberMe)%>
                    <%--<input type="checkbox" id="remember" name="remember" /> <label for="remember">Remember me on this computer.</label>--%>
                </div>
                <div class="submit_wrapper">
                    <input type="submit" value="<%: Resources.LogOnPage.LoginButton %>" />
                </div>
            </fieldset>
          <% } %>
        </div> 
    </div>  
</asp:Content>

AccountController.cs

#region ForgetUserName.aspx
        public ActionResult ForgetUserName()
        {
            ModelState.Clear();//Clear Last Validation, add open web page
            return View();
        }

        [HttpPost]
        public ActionResult ForgetUserName(ForgetUserNameModel forgetUserNameModel)
        {
            UserModel user = UserModel.GetUserByEmail(forgetUserNameModel.EmailAddress);
            if (user == null)
            {
                ModelState.AddModelError("not existance", App_GlobalResources.AccountModel.not_existance_email);
            }
            else
            {
                string toEmailAddress = user.strEmail.Trim();
                string loginName = user.strLogin.Trim();

                bool isSuccess = AccountBiz.SendEmail(EmailContext.UserName, loginName, toEmailAddress);
                if (isSuccess)
                {
                    ModelState.AddModelError("success", App_GlobalResources.AccountModel.success_username);
                }
                else
                {
                    ModelState.AddModelError("failure", App_GlobalResources.AccountModel.failure);
                }

            }
      
            return View();
        }
        #endregion


        #region ForgetPassword
        public ActionResult ForgetPassword()
        {
            ModelState.Clear();//Clear Last Validation, add open web page
            return View();
        }

        [HttpPost]
        public ActionResult ForgetPassword(ForgetPassWordModel forgetPassWordModel)
        {
            if (ModelState.IsValid)
            {
                UserModel user = UserModel.GetUserByLoginName(forgetPassWordModel.UserName);
                if (user == null)
                {
                    ModelState.AddModelError("not existance", App_GlobalResources.AccountModel.not_existance_username);
                }
                else
                {
                    string toEmailAddress = user.strEmail;
                    string password = user.strPassword;

                    bool isSuccess = AccountBiz.SendEmail(EmailContext.PassWord, password, toEmailAddress);
                    if (isSuccess)
                    {
                        ModelState.AddModelError("success", App_GlobalResources.AccountModel.success_password);
                    }
                    else
                    {
                        ModelState.AddModelError("failure", App_GlobalResources.AccountModel.failure);
                    }

                }
            }
            return View();
        }

        #endregion

UserModel.cs

/// <summary>
        /// get UserModel by _strLogin
        /// </summary>
        /// <param name="UserName"></param>
        /// <returns></returns>
        public static UserModel GetUserByLoginName(string UserName)
        {
            var query = from user in NowSourceEntitiesDataContext.Current.UserModels
                        where user.strLogin == UserName
                        select user;

            return query.FirstOrDefault<UserModel>();
        }

ForgetUserName.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/PopUp.Master" Inherits="System.Web.Mvc.ViewPage<NowSource.ViewModels.Account.ForgetUserNameModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TopContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="TitleContent" runat="server">
    <b><%: Resources.AccountModel.Username_Recovery %></b>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" >
    function closePopUp() {
       //去父页面的JS关闭页面
        window.parent.close_forgetUser();
    }
</script>

    <% using (Html.BeginForm()) { %>
        <fieldset>
            <div class="form_wrapper">
                    <div class="input_wrapper">
                        <p><%: Resources.AccountModel.ForgetUserName_title %>  </p>
                        <br />
                        <%: Html.LabelFor(model => model.EmailAddress) %>
                        <%: Html.EditorFor(model => model.EmailAddress) %>
                        <p>
                            <div class="error">
                            <%: Html.ValidationSummary() %>
                            </div> 
                        </p>
                    </div>       
            </div>
            <span class="spanbuttom">
                <input id="Cancelbtn" type="button" value="<%: Resources.AccountModel.Cancel_btn %>" onclick="closePopUp();"/>
                <input id="OkBtn" type="submit" value="<%: Resources.AccountModel.OK_btn %>"/>
            </span>
        </fieldset>
    <% } %>
        
</asp:Content>

注意：要引入的Jquery要是1.8的JS文件