jQuery + Bootstrap + Validate + Ajax with ASHX (ASP.Net)遠端調用

表單程式-form

<form id="frmMain" runat="server" class="form-horizontal">
    <div class="row">
        <div class="well col-xs-offset-4 col-xs-4">
            <fieldset>
                <legend>使用者登入</legend>
                <div id="messageSection"></div>
                <div class="form-group">
                    <label for="txtUser_ID" class="col-sm-2 control-label">帳號</label>
                    <div class="col-sm-10">
                        <asp:TextBox ID="txtUser_ID" runat="server" CssClass="form-control" ClientIDMode="Static" placeholder="帳號" AutoComplete="Off" TabIndex="1"></asp:TextBox>
                    </div>
                </div>
                <div class="form-group">
                    <label for="txtPassword" class="col-sm-2 control-label">密碼</label>
                    <div class="col-sm-10">
                        <asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" ClientIDMode="Static" placeholder="密碼" AutoComplete="Off" TabIndex="2"></asp:TextBox>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <asp:Button ID="btnSubmit" runat="server" Text="登入" ClientIDMode="Static" CssClass="btn btn-primary" />
                        <asp:Button ID="btnCancel" runat="server" Text="清除" ClientIDMode="Static" CssClass="btn btn-default" CausesValidation="false" UseSubmitBehavior="false" OnClientClick="return;"  />
                    </div>
                </div>
            </fieldset>
        </div>
    </div>
</form>

表單程式-JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $('#frmMain').validate({
            onkeyup: false,
            onfocusout: false,
            cache: false,
            errorContainer: "#messageSection",
            errorLabelContainer: "#messageSection",
            errorElement: "div",
            rules: {
                txtUser_ID: {
                    required: true,
                    remote: function () {
                        return {
                            type: "POST",
                            url: '<%= ResolveClientUrl("~/common/service/HandlingUserExist.ashx") %>',
                            dataType: "json",
                            data: { UserID: function () { return $('#txtUser_ID').val(); } },
                            dataFilter: function (data) {
                                var result = JSON.parse(data);

                                $('#messageSection').html($('#messageSection').html() + result.d);
                                $('#txtUser_ID').focus();
                                return result.success;
                            }
                        }
                    }
                },
                txtPassword: {
                    required: true,
                    remote: function () {
                        return {
                            type: "POST",
                            url: '<%= ResolveClientUrl("~/common/service/HandlingUserLogon.ashx") %>',
                            dataType: "json",
                            data: {
                                UserID: function () { return $('#txtUser_ID').val(); },
                                Password: function () { return $('#txtPassword').val(); }
                            },
                            dataFilter: function (data) {
                                var result = JSON.parse(data);

                                $('#messageSection').html($('#messageSection').html() + result.d);
                                $('#txtPassword').focus();
                                return result.success;
                            }
                        }
                    }
                }
            },
            messages: {
                txtUser_ID: {
                    required: "<div class='alert alert-danger'><a class='close' data-dissmiss='alert' href='#'>x</a>登入帳號不可為空白!!</div>",
                    remote: ""
                },
                txtPassword: {
                    required: "<div class='alert alert-danger'><a class='close' data-dissmiss='alert' href='#'>x</a>登入密碼不可為空白!!</div>",
                    remote: ""
                }
            }
        });

        $('#btnSubmit').click(function (e) {
            $('#messageSection').html("");
        });

        $('#btnCancel').click(function (e) {
            $('#messageSection').html("");
            this.form.reset();
            $('#txtUser_ID').focus();
        })
    });
</script>

遠端程式-HandlingUserExist.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Web.Script.Serialization;

using Newtonsoft.Json;

using Slide.common;
using MixComponents.Extensions;

namespace Slide.common.service
{
///
/// HandlingUserExist 的摘要描述
///
public class HandlingUserExist : IHttpHandler, IReadOnlySessionState
{
public void ProcessRequest(HttpContext context)
{
ExecutionResult exeResult = new ExecutionResult();

        context.Response.ContentType = "application/json";

        string strUserID = context.Request.Form["UserID"];


        if (!strUserID.IsNullOrEmpty() && strUserID != "sywen")
        {
            exeResult.Success = false;
            exeResult.Message = "<div class='alert alert-danger'><a class='close' data-dissmiss='alert' href='#'>x</a>登入帳號錯誤!!</div>\r\n";
        }

        JavaScriptSerializer javaSerialize = new JavaScriptSerializer();
        var result = new { success = exeResult.Success, d = exeResult.Message };

        context.Response.Write(javaSerialize.Serialize(result));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

}

遠端程式-HandlingUserLogon.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Web.Script.Serialization;

using Newtonsoft.Json;

using Slide.common;
using MixComponents.Extensions;

namespace Slide.common.service
{
///
/// HandlingUserLogon 的摘要描述
///
public class HandlingUserLogon : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
ExecutionResult exeResult = new ExecutionResult();

        context.Response.ContentType = "application/json";

        string strUserID = context.Request.Form["UserID"];
        string strPassword = context.Request.Form["Password"];

        if (!(strUserID == "sywen" && strPassword == "0000"))
        {
            exeResult.Success = false;
            exeResult.Message = "<div class='alert alert-danger'><a class='close' data-dissmiss='alert' href='#'>x</a>登入密碼錯誤!!</div>\r\n";
        }

        JavaScriptSerializer javaSerialize = new JavaScriptSerializer();
        var result = new { success = exeResult.Success, d = exeResult.Message };

        context.Response.Write(javaSerialize.Serialize(result));
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}