2016-12-01 2 views
1

に/ショーのasp.netフォーム(パネル)をロードするためにどのように私は、私はまた、ボタンを持っているは、クリック

私の.aspx Webフォーム内の一部のデータを使用してフォームを持っています。私はそのボタンをクリックすると、別の、まったく同じフォームをロードする必要がありますが、前のフォームのデータを失うことはないので、サイトをリフレッシュせずに。

どうすればいいですか?

<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:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder> 
<br /> 
<asp:Button ID="AddControl" runat="server" Text="Button" OnClick="AddControl_Click" /> 

を追加する必要がありますコントロールが含まれています]ページで

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

次に、あなたは(再)に必要なすべてのページの読み込みと追加のコントロールボタンをクリックしたときに、ユーザーコントロールを作成します。

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

あなたはゲッターとセッターを持つユーザーコントロールにプロパティを設定することで、テキストボックスの値にアクセスすることができます。

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

これは間違いなく機能しますが、最初のフォームを隠そうとすると、ページがリロードされてフォームが再び表示されるようになり、やや消え去ります。しかし、実際にはページが本当にリロードされているかどうかはわかりません。しかし、私は1つの代わりに2つのフォームを持っています – aiden87

+0

それは全体の考えですか? 'まったく同じフォームを別のものをロードする'に?そうでない場合は、2つのフォームを静的に追加し、jQueryまたはコードの背後に表示/非表示にすることができます。 – VDWWD

0

<asp:updatepanel> 

タグ内にあなたのコードを追加し、ボタンのonclickにプロパティを追加します。その後、ビジネスコードをコードの中に書くことができます(aspx.cs)。これはasp.netのデフォルトのajaxです

関連する問題