locked
login window with jquery form RRS feed

  • Question

  • User-735851359 posted

    hello 

    I am trying to login through the jquery forms. but I don't know how to use razor in jquery.

        <div id="login-form-div" title="Add New Book">
            <form id="login-form" method="post" action="~/Account/LoginAction">
            <fieldset>
                <legend>Log in to Your Account</legend>
                <ol>
                    <li class="email">
                        <label for="email">Email address</label>
                        <input type="text" id="email" name="email" value=""/>
                    </li>
                    <li class="password">
                        <label for="password">Password</label>
                        <input type="password" id="password" name="password" />
                    </li>
                    <li class="remember-me">
                        <input type="checkbox" id="rememberMe" name="rememberMe" value="true" checked="" />
                        <label class="checkbox" for="rememberMe">Remember me?</label>
                    </li>
                </ol>
            </fieldset>
        </form>
        </div>
     
     
            <script type="text/javascript">
                $(function () {
                    $('#login-button').button().click(function () {
                        $('#login-form-div').dialog('open');
                    });
                    $('#login-form-div').dialog({
                        autoOpen: false,
                        modal: true,
                        height: 320,
                        width: 400,
                        buttons: {
                            'Login': function () {
                                var email = $('email').val();
                                var password = $('password').val();
                                if(WebSecurity.Login(email, password, rememberMe))
                                $('#login-form-div').dialog('close');
                            },
                            Cancel: function () {
                                $('#login-form-div').dialog('close');
                            }
                        }
     
                    });
                });
            </script>
    Thursday, October 8, 2015 4:40 AM

Answers

  • User325035487 posted

    See this code from mikes

    buttons: {
            'Login' : function(){
                $.ajax({
                    type: "POST",
                    url: $("#login-form-div").attr('action'),
                    data: $("#login-form-div").serialize(),
                    dataType: "text/plain",
                    success: function(response) {
                        $('#login-form-div').dialog('close');
                        $("#loggedinbox").val('/Account/Logout/'); //This is optional if you want to display a logout link. Again not tested.
                        });
                    },
                    error: function(response) {
                        alert(response);
                        $('#login-form-div').dialog('close');
                    }
                });
            },
            Cancel: function() {
                $('#login-form-div').dialog('close');
            }
        }// end buttons

    And in the <form> tag put method call as <form id="login-form-div" action="@Href("~/Account/Login")">

    Then in the Login.Cshtml inside account

    @{
         var email = Request["email"];
         var password = Request["password"];
         WebSecurity.Login(email, password, true);
         
    }

    This is not tested. I guess you have to return a value with true or false based on success of login from the Login.cshtml. try it out.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, October 8, 2015 9:04 AM