How to load/show asp.net form(panel) on click

Question

I have a form with some data inside my .aspx webform

I also have a button. When i click that button, i need to load another, exactly the same form, but without refreshing the site, so i wouldn't loose any data in the previous form.

How can i do this?

<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>

UPDATE

.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>

Answer 1

I think you are looking for dynamically added User Controls .

Add a new User Control to your project and put your form in it.

<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>

On the page that will contain the Controls you need to add a PlaceHolder

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

Then you need to (re)create the User Controls on every Page Load and the Add Control button 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);
}

UPDATE

You can access the values of the TextBoxes by setting a property in the User Control with a getter and a setter.

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

And now you can access them from the Parent by looping all the controls and get the value.

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

Answer 2

add you code inside

<asp:updatepanel>

tag and add onclick properties to you button. After that you can write your business code in code behind (aspx.cs). This is default ajax in asp.net

How to load/show asp.net form(panel) on click

Question

2 answers

solution1
2 ACCPTED 2016-12-01 11:32:48

solution2
0 2016-12-01 11:04:08

How to load/show asp.net form(panel) on click

Question

2 answers

solution1 2 ACCPTED 2016-12-01 11:32:48

solution2 0 2016-12-01 11:04:08

solution1
2 ACCPTED 2016-12-01 11:32:48

solution2
0 2016-12-01 11:04:08