ASP.NET JQUER 异步获取数据

     相信很多做Web开发的同胞都遇到过这样的需求。根据一个关键字取对应的信息或相关信息。比如根据学生的学号，获取该学生的班级、住址、电话等信息，根据书号获取该书的相关信息并赋值到页面的控件上或是做其他的处理。对于类似的需求，有很多方法可以实现，今天记录的是我的开发中遇到的问题和采用的解决方法。

    命名，这个从“Hell World！”就还是 的话题，在这里先要说明一下。良好和统一的命名不仅开发效率能得到提升，而且在以后的维护过程中，也会省很多麻烦，在项目开发伊始，一定要做好命名规则。我这里的命名，页面控件的命名和表的列名对应。比如 学号,表的列名是STUDENT_ID,对应页面控件为txtSTUDENT_ID。有了这种规则，我们的JQUER取数据并给页面控件赋值就简单多了。

    为了演示简单，使用了企业库。GetData方法返回所要查询的数据。页面请求的所有人参数在NameValueCollection nvcs = context.Request.Params; nvcs中都可以找到。顺便记录一下，如果在ashx要使用Session，需要实现IRequiresSessionState接口。

   CreateJsonData方法是封装的，生成json数据格式。代码如下：

 

    JqueryCustomer.ashx文件代码

<%@ WebHandler Language="C#" Class="JqueryCustomer" %>

using System;
using System.Collections.Specialized;
using System.Configuration;
using System.Data;
using System.Web;

using Microsoft.Practices.EnterpriseLibrary.Data;
using Microsoft.Practices.EnterpriseLibrary.Common;

using JsJQueryHelper;

public class JqueryCustomer : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.Charset = "utf-8";
        //已json格式返回数据
        context.Response.ContentType = "application/json";
        NameValueCollection nvcs = context.Request.Params;

        ItemConfigurationSection ics =
                    ConfigurationManager.GetSection("CustomConfig") as ItemConfigurationSection;

        GeneratedJsonData gjd = new GeneratedJsonData(ics, nvcs.GetValues("type")[0]);

        string slq = @"SELECT CustomerID,CompanyName,ContactName,ContactTitle,Address,City,Region,PostalCode,Country,Phone,Fax FROM Customers WHERE CustomerID='" + nvcs.GetValues("CustomerID")[0] + "'";
        
        string res = gjd.CreateJsonData(GetData(slq));
        
        context.Response.Write(res);
    }

    private IDataReader GetData(string commandText)
    {
        Database db = DatabaseFactory.CreateDatabase();
        return db.ExecuteReader(CommandType.Text, commandText);
    }
    
    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

js调用代码：

$(document).ready(function () {
    $("#txtCustomerID").change(function () {
        getData('customers', 'txtCustomerID');
    });
});
function getData(type, objs) {
    $(document).ready(function () {
        var pCount = objs.split(',');
        var paramsValue = "";
        $.each(pCount, function (i, item) {
            var tmp = $("#" + item)
            var name = item.substring(3, item.length);
            var vu = tmp.val();
            paramsValue += (name + "=" + vu + "&");
        });
        paramsValue = "type=" + type + "&" + paramsValue.substring(0, paramsValue.length - 1);
        getSearchData(paramsValue, "mv");
    })
};
function getSearchData(paramsValue, typeResult) {
    $.ajax({
        type: "get",
        url: "JqueryCustomer.ashx",
        data: paramsValue,
        datatype: "json",
        success: function (data) {
            dealwithAjaxResult(typeResult, data);
        },
        error: function (data) {
            alert("连接错误");
        }
    })
}
function dealwithAjaxResult(typeResult, resultObj) {
    switch (typeResult) {
        case "nc":
            getCompanyNameCode(resultObj);
            break;
        case "mv":
            getMoreValue(resultObj);
            break;
        case "mc":
            getControlEachValue(resultObj);
            break;
        default:
            break;
    } 
}
function getMoreValue(resultObj) {
    //typeResult = mv
    $.each(resultObj, function (item) {
        $("#txt" + resultObj[item].name).val(resultObj[item].value);
    });
};

效果：

在customerID中输入值，回车，自动带出相关信息。

 

说明：JS中的代码，getSearchData方法是从服务器端获取数据，dealwithAjaxResult方法是对获取的数据进行不同的格式处理，getMoreValue方法是对页面上的控件进行赋值。