1

我将在没有任何更新面板的情况下将 ajax 用于我的 Web 表单应用程序。所以我注意到我可以为此目的使用jquery ajax。所以有一个带有下拉框的表单，里面有一些ID。当我从下拉列表中选择 ID 时，我想暂时显示我的 ajax 加载程序，然后我想显示结果。结果将显示在一些标签控件中。所以这是我的 Default.aspx 页面：

<div style="text-align: center; width: 500px; margin: 0 auto 0 auto;">
    <asp:DropDownList ID="idDropDownBox" runat="server" >
    </asp:DropDownList>
    <span>Pick ID </span>
    <br />
    <img alt="" id="loader" src="ajax-loader.gif" />
    <table>
        <tr>
            <td>
                <asp:Label ID="lblName"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
            </td>
            <td  style="font: 11px tahoma;">
                 Name
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblFamily"   ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
            </td>
            <td style="font: 11px tahoma;">
                Family
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblPhone"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
            </td>
            <td style="font: 11px tahoma;">
               Phone
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblEmail"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
            </td>
            <td style="font: 11px tahoma;">
                Email
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblAddress"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
            </td>
            <td style="font: 11px tahoma;">
                Address
            </td>
        </tr>
    </table>
</div>

所以我决定创建另一个页面“GetCustomer.aspx”，它通过查询字符串获取 ID，然后从数据库中选择所有信息并将它们保存在会话中。这是 GetCustomer.aspx 背后的代码：

    protected void Page_Load(object sender, EventArgs e)
    {
        AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
        if (Request.QueryString.Keys.Count > 0)
        {
            string id = Request.QueryString[0];
            CustomersDBEntities db = new CustomersDBEntities();
            IQueryable<tblCustomer> allInfo = (from x in db.tblCustomers
                                               where x.ID == int.Parse(id)
                                               select x);
            Session["Name"] = allInfo.ElementAt(1).ToString();
            Session["Family"] = allInfo.ElementAt(2).ToString();
            Session["Phone"] = allInfo.ElementAt(3).ToString();
            Session["Email"] = allInfo.ElementAt(4).ToString();
            Session["Address"] = allInfo.ElementAt(5).ToString();
        }


    }

最后我开始写一个像下面这样的javascript脚本，但是成功了！我该怎么办？

$(document).ready(function(){
    $('idDropDownBox').change(function(){
        $.ajax({
            type:"POST",
            contentType:"application/json; charset=UTF-8",
            data:"{CID:'"+ $('idDropDownBox').val() + "'}",
            url:'Default.aspx/GetCustomer",
            dataType:"json",
            success:function(data){
                //what should i do here
            }
        });
    });
});

感谢您的回复...

4

2 回答 2

1

如果我的理解是正确的，您想使用 ASP.Net 页面的输出作为 AJAX 调用的源。

虽然这不是使用 ASP.Net 的传统方式，但您仍然可以做到

这是一个简单的例子：

输出

在此处输入图像描述 在此处输入图像描述

ASPX - 目标（空，删除所有 html 标记）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Empty.aspx.cs" Inherits="WebApplication1.Empty" %>

ASPX - 背后的目标代码

    protected void Page_Load(object sender, EventArgs e)
    {
        this.Response.ContentType = "application/json";

        var id = this.Request.QueryString["id"];
        // simulate your query using the id property
        var q = Enumerable.Range(1, 10);

        // set the following values using your real objects
        var f = new
        {
            Name = "your name " + id,
            Fam = "your family " + id,
            Phone = "your phone " + id,
            Email = "your email " + id,
            Address = "your address" + id
        };

        this.Response.Write(JsonConvert.SerializeObject(f));
    }

ASPX - 来电者

请注意，此示例中显示的表格正是您的代码，我只是复制了

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    function getData(id) {
        $.ajax({
            type: "GET",
            url: '<%: this.ResolveClientUrl("~/Empty.aspx") %>',
            dataType: "json",
            data: 'id=' + id,
            contentType: "application/json; charset=utf-8;",
            success: function (msg) {
                $("#<%: this.lblName.ClientID %>").text(msg.Name);
                $("#<%: this.lblFamily.ClientID %>").text(msg.Fam);
                $("#<%: this.lblPhone.ClientID %>").text(msg.Phone);
                $("#<%: this.lblEmail.ClientID %>").text(msg.Email);
                $("#<%: this.lblAddress.ClientID %>").text(msg.Address);
            }
        });
    }
    $(function () {
        $("#<%: this.ddl.ClientID %>").change(function () {
            getData($(this).val());
        });
    });
</script>

    <asp:DropDownList runat="server" ID="ddl">
        <asp:ListItem Text="1" Value="1" />
        <asp:ListItem Text="2" Value="2" />
    </asp:DropDownList>
<table>
    <tr>
        <td>
            <asp:Label ID="lblName"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
        </td>
        <td  style="font: 11px tahoma;">
             Name
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblFamily"   ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
        </td>
        <td style="font: 11px tahoma;">
            Family
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblPhone"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
        </td>
        <td style="font: 11px tahoma;">
           Phone
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblEmail"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
        </td>
        <td style="font: 11px tahoma;">
            Email
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblAddress"  ClientIDMode="Static" runat="server" Font-Names="Tahoma" Text=""></asp:Label>
        </td>
        <td style="font: 11px tahoma;">
            Address
        </td>
    </tr>
</table>
于 2012-07-24T21:56:10.920 回答
0

让您的 GetCustomer 返回您需要显示并成功的 html 部分： $.ajax 的处理程序添加将该 html 附加到所需容器的代码，例如 $('#someContainer').append(data);

于 2012-07-24T21:13:34.207 回答