How to handle a large set of textbox inputs in a asp.net web form after deviding into different sets ?

Question

User1864553114 posted

Hi Greetings to all,

I want to implement a Questionnaire System for collecting info from our clients regarding their Queries based upon the different Categories and Sub Categories. But the problem is we have more than 300 Questions for different categories and Subcategories. how i can make a web form which shows the fields only related to the Category the user chooses and how i can divide the Questions into multiple forms or panels to make the user on easy of access while filling the data instead of showing all the fields at once.

Answer 1

User-832373396 posted

Hi Ayub,

I suggest that you could add multiple panels to web form page.

So if customer click button, then shows next panel. 

Design(all items put on the page, once customer click subcategories of a drop-down list, or next step button, then control which panel if display ): 

1st, update your page load to avoid reverting visibility after you change it :

Note:asp:ScriptManager, asp:UpdatePanel makes page no refreshing;

  <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
    <h3>Your application description page.</h3>
    <p>Use this area to provide additional information.</p>
   <asp:Panel id=Panel2 runat="server">Panel2<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></asp:Panel>
   <asp:Panel id=Panel3 runat="server">Panel3<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></asp:Panel>
   <asp:Panel id=Panel1 runat="server"
       >Panel1<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></asp:Panel>
    <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Try_Click" />

Then back-code:

protected void Page_Load(object sender, EventArgs e)

{
    if(!Page.IsPostBack){

        Panel1.Visible = true;

        Panel2.Visible = false;

        Panel3.Visible = true;        
    }

}

2nd, you have to change the visibility of the try method :

protected void Try_Click(object sender, EventArgs e)

{

    Panel1.Visible = false;

    Panel2.Visible = true;

    Panel3.Visible = false;    

}

and maybe you could use <g class="gr_ gr_131 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="131" data-gr-id="131">mutiview</g> control.

The multiview control is a new feature of asp.net 2.0 which was introduced with visual studio 2005.The main advantage of the multiview control is <g class="gr_ gr_372 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="372" data-gr-id="372">tnat</g> we can specify the required view only(<g class="gr_ gr_371 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="371" data-gr-id="371">Ie</g> display the required view only) on a single page.Multiview control helps us to create different views on the same page and display the view as the user clicks the links. With Multiview control the tab functionality is achieved in asp.net.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
   
           <table border="0" cellpadding="2" cellspacing="3" width="100%">

<tr>
<td>
<asp:LinkButton ID="lnkTab1" runat="server" OnClick="lnkTab1_Click">Tab1</asp:LinkButton></td>
<td>
<asp:LinkButton ID="lnkTab2" runat="server" OnClick="lnkTab2_Click">Tab2</asp:LinkButton></td>
<td>
<asp:LinkButton ID="lnkTab3" runat="server" OnClick="lnkTab3_Click">Tab3</asp:LinkButton></td>
</tr>
<tr>
<td colspan="3">
<asp:MultiView ID="MultiView1" runat="server">
<table width="100%" cellpadding="2" cellspacing="5">
<tr>
<td>
<asp:View ID="View1" runat="server">
Content 1 goes here</asp:View>
</td>
<td>
<asp:View ID="View2" runat="server">
Content 2 goes here</asp:View>
</td>
<td>
<asp:View ID="View3" runat="server">
content 3 goes here</asp:View>
</td>
</tr>
</table>
</asp:MultiView></td>
</tr>
</table>
            </ContentTemplate>
      </asp:UpdatePanel>

Then back-code:

  protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                SetDefaultView();
            }

        }

        private void SetDefaultView()
        {
            MultiView1.ActiveViewIndex = 0;
        }

        protected void lnkTab1_Click(object sender, EventArgs e)
        {
            MultiView1.ActiveViewIndex = 0;
        }
        protected void lnkTab2_Click(object sender, EventArgs e)
        {
            MultiView1.ActiveViewIndex = 1;
        }
        protected void lnkTab3_Click(object sender, EventArgs e)
        {
            MultiView1.ActiveViewIndex = 2;
        }

And more choose :

From  https://www.codeproject.com/Articles/36687/Cross-Browser-Panel-Web-Control 

By the way, In my opinion, if we use the panel in web form will also generate the ViewState it will make the page loaded for too long time. I think the best way is using jquery to send a request to the backend to get the different question data from backend and fill the question into the HTML page.

Hope it is helpful to you :)

With regards, Angelina Jolie