@model jQueryForm.Models.LoginModel

@{
    ViewBag.Title = "登录";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
</hgroup>

<section id="loginForm">
    <h2>使用本地帐户登录。</h2>

    <form action="/Account/ValidateLogin/" method="post" id="Login">
        <fieldset>
            <legend>“登录”表单</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 type="submit" value="登录" />
        </fieldset>

    </form>

    <p>
        @Html.ActionLink("注册", "Register") 如果你没有帐户。
    </p>

</section>

<section class="social" id="socialLoginForm">
    <h2>使用其他服务登录。</h2>
    @Html.Action("ExternalLoginsList", new { ReturnUrl = ViewBag.ReturnUrl })
</section>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryform")
    <script type="text/javascript">
        // prepare the form when the DOM is ready 
        $(function () {
            var options = {
                target: '#socialLoginForm',   // target element(s) to be updated with server response 
                beforeSubmit: showRequest,  // pre-submit callback 
                success: showResponse,  // post-submit callback 
                dataType: "json",
                clearForm: false,
                resetForm: false

                // other available options: 
                //url:       url         // override for form's 'action' attribute 
                //type:      type        // 'get' or 'post', override for form's 'method' attribute 
                //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
                //clearForm: true        // clear all form fields after successful submit 
                //resetForm: true        // reset the form after successful submit 

                // $.ajax options can be used here too, for example: 
                //timeout:   3000 
            };

            // bind to the form's submit event 
            $('#Login').submit(function () {
                // inside event callbacks 'this' is the DOM element so we first 
                // wrap it in a jQuery object and then invoke ajaxSubmit 
                $(this).ajaxSubmit(options);

                // !!! Important !!! 
                // always return false to prevent standard browser submit and page navigation 
                return false;
            });
        });

        // pre-submit callback 
        function showRequest(formData, jqForm, options) {
            // formData is an array; here we use $.param to convert it to a string to display it 
            // but the form plugin does this for you automatically when it submits the data 
            var queryString = $.param(formData);

            // jqForm is a jQuery object encapsulating the form element.  To access the 
            // DOM element for the form do this: 
            // var formElement = jqForm[0]; 

            alert('About to submit: \n\n' + queryString);

            // here we could return false to prevent the form from being submitted; 
            // returning anything other than false will allow the form submit to continue 
            return true;
        }

        // post-submit callback 
        function showResponse(responseText, statusText, xhr, $form) {
            // for normal html responses, the first argument to the success callback 
            // is the XMLHttpRequest object's responseText property 

            // if the ajaxSubmit method was passed an Options Object with the dataType 
            // property set to 'xml' then the first argument to the success callback 
            // is the XMLHttpRequest object's responseXML property 

            // if the ajaxSubmit method was passed an Options Object with the dataType 
            // property set to 'json' then the first argument to the success callback 
            // is the json data object returned by the server 

            var json = $.parseJSON(responseText);
            process(json);


            //alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
            //'\n\nThe output div should have already been updated with the responseText.');
        }

        function process(obj) {
            if (obj.IsValid) {
                alert("login success! " + obj.Message);
            }
            else {
                alert("login failed! " + obj.Message);
            }

        }
    </script>
}
