c# - 如何使用 AJAX 动态创建文本框并将其添加到占位符？

Question

我正在尝试动态创建文本框。所以我通过AJAX函数来调用它。

这是我的代码:

Ajax函数

function ChangedAdults(noofAdults) {
    alert(noofAdults.value);
    $.ajax({

        type: 'POST',
        dataType: 'json',
        url: "/FlightBooking.aspx/Adults",

        data: "{noOfAdults:'" + noofAdults.value +  "'}",
        contentType: "application/json; charset=utf-8",
        success: function (result) {
                     $("#AdultsList").html(result.d);
                 },
        error: function (xhr, ajaxOptions, thrownError) {
                   alert(xhr.status);
                   alert(thrownError);
               }
    });
}

隐藏代码

[WebMethod]
public static string Adults(int noOfAdults)
{
    FlightBooking obj = new FlightBooking();
    obj.CreateAdultsList(noOfAdults);          

    string test= "";
    return test.ToString();
}
private void CreateAdultsList(int noOfAdults)
{
    int n = noOfAdults;
    for (int i = 0; i < n; i++)
    {
        TextBox MyTextBox = new TextBox();                      
        MyTextBox.ID = "tb" + "" + i;    
        AdultsListPlaceholder.Controls.Add(MyTextBox); //error coming here
        AdultsListPlaceholder.Controls.Add(new LiteralControl("<br />"));
    }
}

但我收到一个错误:

Object reference not set to an instance of an object

什么可能导致此问题？

Answer 1

您无法使用 JQuery AJAX 向页面动态添加控件。请好好理解asp.net页面lifecycle

简而言之，这就是 asp.net 页面的工作方式。

1. 浏览器向服务器发送请求。即http://localhost/test.aspx
2. 服务器为页面类创建一个对象。在本例中，该类是 Test
3. 该对象呈现页面。这意味着它将 test.aspx 的 Controls 转换为浏览器可以理解的 HTML。
4. 服务器将渲染的 HTML 发送回浏览器并销毁该对象。
5. 浏览器显示页面。

因此服务器每次收到页面请求时都会创建一个新对象。

但是，当使用 AJAX 调用 WebMethods 时，不会创建页面对象。这就是为什么 Webmethods 必须是静态的。

我可以看到您正在尝试自己创建一个对象并将动态控件添加到该对象。但这个对象与浏览器中显示的内容无关。因此，向该对象添加控件不会更改浏览器中显示的任何内容。为此，您必须将整个页面发回。如果您返回使用 Response.Write 创建的对象的渲染输出，则将返回整个页面的 HTML 版本。这与 PostBack

基本相同

但是，您可以使用 UpdatePanel 实现基于 AJAX 的动态控件渲染。以下是一种实现方法

ASPX页面

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
             <asp:Button ID="btnCreate" runat="server" Text="Create" OnClick="btnCreate_Click" />
        </ContentTemplate>            
    </asp:UpdatePanel>
    <asp:Button ID="btnRead" runat="server" Text="Read" OnClick="btnRead_Click" />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form>

代码隐藏

protected int NumberOfControls
{
    get { return Convert.ToInt32(Session["noCon"]); }
    set { Session["noCon"] = value.ToString(); }
}

private void Page_Init(object sender, System.EventArgs e)
{
    if (!Page.IsPostBack)
        //Initiate the counter of dynamically added controls
        this.NumberOfControls = 0;
    else
        //Controls must be repeatedly be created on postback
        this.createControls();
}
private void Page_Load(object sender, System.EventArgs e)
{

}

protected void btnCreate_Click(object sender, EventArgs e)
{
    TextBox tbx = new TextBox();
    tbx.ID = "txtData"+NumberOfControls;
    NumberOfControls++;

    PlaceHolder1.Controls.Add(tbx);
}
protected void btnRead_Click(object sender, EventArgs e)
{
    int count = this.NumberOfControls;

    for (int i = 0; i < count; i++)
    {
        TextBox tx = (TextBox)PlaceHolder1.FindControl("txtData" + i.ToString());
        //Add the Controls to the container of your choice
        Label1.Text += tx.Text + ",";
    }
}

private void createControls()
{
    int count = this.NumberOfControls;

    for (int i = 0; i < count; i++)
    {
        TextBox tx = new TextBox();
        tx.ID = "txtData" + i.ToString();
        //Add the Controls to the container of your choice
        PlaceHolder1.Controls.Add(tx);
    }
}

希望这有帮助。