1

更新パネルなしで、Webフォームアプリにajaxを使用します。そのため、この目的で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>

そこで、クエリ文字列によってIDを取得し、データベースからすべての情報を選択してセッションに保存する別のページ「GetCustomer.aspx」を作成することにしました。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のハンドラーは、$（'＃someContainer'）。append（data）;のように、そのhtmlを目的のコンテナーに追加するコードを追加します。

于 2012-07-24T21:13:34.207 に答える