如何使用AJAX动态地创建和添加文本框到占位符

本文关键字：文本 添加 占位符 创建 何使用 AJAX 动态 | 更新日期: 2023-09-27 18:07:53

我正在尝试动态创建文本框。所以我通过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 />"));
    }
}

但是我收到一个错误:

对象引用未设置为对象的实例

什么会导致这个问题?

如何使用AJAX动态地创建和添加文本框到占位符

不能使用JQuery AJAX动态添加控件到页面。请好好理解asp.net页面生命周期

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

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

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

但是，当使用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);
    }
}

你混淆了你的范例。您希望这段代码做什么?您可以在响应AJAX调用时呈现控件，但是必须手动将处理过的HTML插入到DOM中。

  1. 使用AJAX调用服务器
  2. 实例化一个虚拟页面容器
  3. 渲染服务器控制
  4. 返回标记
  5. 插入到DOM

或者，您可以通过完整回发或异步回发(例如UpdatePanel)添加新的控件来响应服务器事件

在asp.net中，您不能通过jQuery或java-script创建服务器控件。
虽然你可以从jQuery中调用web-method，但是你不能从web method中添加任何控件。
更多细节
添加新的ASP。. NEt服务器控件与jQuery?

创建textbox的一个想法是创建html textbox 

<input type="text" id="text1" ></input>

并通过jQuery ajax发布您的值进行操作。

编辑1

另一种方法是在页面加载时创建所有控件(如果您知道最大数量)
一开始隐藏它们
逐个显示按钮点击
并在回发后获取服务器上的值。

例子:

为asp.net文本框控件添加文本

AdultsListPlaceholder为null，则需要重写其onload函数来创建此控件的子控件。例如

protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);
       CreateAdultsList(5);
    }
相关文章：