如何在点击时加载/显示asp.net表单(面板)

时间:2016-12-01 10:56:52

标签: javascript c# jquery asp.net

我的.aspx webform中有一些包含一些数据的表单

我也有一个按钮。当我点击该按钮时,我需要加载另一个完全相同的表单,但不刷新网站,所以我不会丢失上一个表单中的任何数据。

我该怎么做?

<form id="form1" runat="server">
    <asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label><br />
    <asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox><br />
    <span style="color:red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span><br />
    <asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label><br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox><br />

<button id="btnAddNewProduct" class="form-control">Add new product</button>

更新

的.aspx

<script src="Content/jquery-1.12.2.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Content/bootstrap.min.js"></script>
<script src="Content/hideForm.js"></script>
<script src="Content/live-preview.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $( function() {
        $( "#accordion" ).accordion();
        } );
</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.ticket').click(function () {
            $(".skrijPrvo").slideToggle();
        });
    });
</script>

<body>
<div class="container-fluid">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <form id="form1" runat="server">
                    <div class="form-group">
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder><br />         
                    </div>
                    <asp:Button ID="Button2" runat="server" class="form-control" Text="Zaključi nakup"/><br />
                <asp:Button ID="Button3" runat="server" class="form-control" Text="Nazaj"/><br />
                <asp:Button ID="Button4" runat="server" Text="Dodaj nov artikel" class="ticket" OnClick="AddControl_Click" /><br />
                </form>
            </div>
        </div>
    </div>
</div>

ASCX

<body>
<div id="accordion">
    <h3>Dodaj nov izdelek</h3>
    <div class="skrijPrvo">
       <asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label><br />
       <asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox><br />
       <span style="color:red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span><br />
       <asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label><br />
       <asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox><br />
       <span style="color:red"><asp:Label ID="errorKolicina" runat="server"></asp:Label></span><br />
       <asp:DropDownList ID="inputDropdownList" class="form-control" runat="server">
           <asp:ListItem Text="" Value=""></asp:ListItem>
           <asp:ListItem Text="Material1" Value="Material1"></asp:ListItem>
           <asp:ListItem Text="Material2" Value="Material2"></asp:ListItem>
           <asp:ListItem Text="Material3" Value="Material3"></asp:ListItem>
       </asp:DropDownList><br />
       <span style="color:red"><asp:Label ID="errorDropDown" runat="server"></asp:Label></span><br />
       <asp:FileUpload ID="fileUpload" runat="server" class="form-control" onchange="readURL(this)" /><br />
       <span style="color:red"><asp:Label ID="errorFileUpload" runat="server"></asp:Label></span><br />
       <asp:Image ID="fileUploadImg" class="form-control" runat="server" Height="300px"/><br />    
    </div>
</div>         

2 个答案:

答案 0 :(得分:2)

我认为您正在寻找动态添加的User Controls

向项目添加新的用户控件并将表单放入其中。

<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label>
<br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox>
<br />
<span style="color: red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span>
<br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label>
<br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

在包含控件的页面上,您需要添加PlaceHolder

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<br />
<asp:Button ID="AddControl" runat="server" Text="Button" OnClick="AddControl_Click" />

然后,您需要(重新)在每个页面加载上创建用户控件,然后单击添加控件按钮。

protected void Page_Load(object sender, EventArgs e)
{
    //check if the viewstate exists and if so, build the controls
    if (ViewState["controlCount"] != null)
    {
        addControls(Convert.ToInt32(ViewState["controlCount"]));
    }
    else
    {
        //if not add just 1 control
        addControls(1);
    }
}

private void addControls(int n)
{
    //loop the amount of controls and add them to the placeholder
    for (int i = 0; i < n; i++)
    {
        UserControl1 control = (UserControl1)LoadControl("~/UserControl1.ascx");
        PlaceHolder1.Controls.Add(control);
    }

    //save the control count into a viewstate
    ViewState["controlCount"] = PlaceHolder1.Controls.Count;
}

protected void AddControl_Click(object sender, EventArgs e)
{
    //add an extra control
    addControls(1);
}

<强>更新

您可以通过使用getter和setter在User Control中设置属性来访问TextBox的值。

public string textBox1
{
    get
    {
        return TextBox1.Text;
    }
    set
    {
        TextBox1.Text = value;
    }
}
protected void Page_Load(object sender, EventArgs e)
{
}

现在您可以通过循环所有控件并获取值来从Parent访问它们。

foreach (UserControl1 control in PlaceHolder1.Controls)
{
    Label1.Text += control.textBox1 + "<br>";
}

答案 1 :(得分:0)

中添加代码
<asp:updatepanel> 

标记并向您添加onclick属性按钮。之后,您可以在代码后面编写业务代码(aspx.cs)。这是asp.net中的默认ajax