2016-12-01 176 views
1

我有一個窗體,其中有一些數據在我的.aspx窗體中如何在點擊加載/顯示asp.net窗體(面板)

我也有一個按鈕。當我點擊那個按鈕,我需要加載另一個,完全一樣的形式,但沒有刷新網站,所以我不會丟失以前的任何形式的數據。

我該怎麼做?

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

+0

加載另一個表格和下一個?你想要在現有表單下面添加它嗎?或隱藏現有的和顯示新的形式......?或其他任何 –

+0

隱藏現有的(不會鬆動任何數據),並追加現有@Reddy – aiden87

回答

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> 

在將要包含你需要添加一個佔位符

<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); 
} 

UPDATE

您可以通過在一個getter和一個setter用戶控件設置屬性訪問文本框的值。

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>"; 
} 
+0

下面的新謝謝,這將工作。只需要定製一點! – aiden87

+0

這絕對有用,但是當我試圖隱藏我的第一個表單時,它開始消失,比他的頁面似乎重新加載並且表單再次顯示。但我不知道頁面真的重新加載,因爲數據保持在。但然後我有2個形式,而不是一個 – aiden87

+0

這是整個想法是正確的?要加載另一個完全相同的表單?如果不是,您可以靜態添加2個表單,並使用jQuery或代碼隱藏它們。 – VDWWD

0

添加你的代碼裏面

<asp:updatepanel> 

標籤和屬性的onclick你按鈕添加。之後,您可以在後面的代碼(aspx.cs)中編寫業務代碼。這是asp.net中的默認ajax