Javascript 如何在单击时加载/显示asp.net表单（面板）_Javascript_C#_Jquery_Asp.net

Javascript 如何在单击时加载/显示asp.net表单（面板）

javascript c# jquery asp.net

Javascript 如何在单击时加载/显示asp.net表单（面板）,javascript,c#,jquery,asp.net,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:Te

我的.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 />

添加新产品

更新

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

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


$（函数（）{
$（“#手风琴”）。手风琴（）；
} );
$（文档）.ready（函数（）{
$（'.ticket'）。单击（函数（）{
$（“.skrijPrvo”）.slideToggle（）；
});
});

ascx

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

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


多达吉·诺夫·伊兹德莱克

将您的代码添加到

<asp:updatepanel>

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

我想您正在寻找动态添加的

将新用户控件添加到项目中，并将表单放入其中

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

现在，您可以通过循环所有控件从父级访问它们并获取值

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

foreach（占位符1.Controls中的UserControl1控件）
{
Label1.Text+=control.textBox1+“
”；
}

加载另一个表单，然后下一个？是否要将其附加到现有表单下面？或者隐藏现有表单并显示新表单。。。？？或者任何其他隐藏的现有数据（不丢失任何数据）并在现有@ReddyTanks下追加新数据，这将起作用。只需要定制一点！这确实有效，但当我试图隐藏我的第一个表单时，它开始逐渐消失，页面似乎重新加载，表单再次显示。但我不确定页面是否真的会重新加载，因为数据会留在页面中。但是我有两种形式，而不是一种，这就是整个想法，对吗？要加载另一个完全相同的表单？如果没有，您可以静态添加两个表单，并使用jQuery或代码隐藏它们。是的，确实如此。但是第一个并没有隐藏在javascript上，因为我认为javascript在按钮上不起作用，只是在我看来已经修复了它

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

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