locked
How to Bootstrap tab Active selected tab in asp.net c# RRS feed

  • Question

  • User-475949336 posted

    Dear friends

    I build menu tab (at article https://screenshotdrizzles.blogspot.com/2016/05/how-to-bootstrap-tab-active-selected.html)

    In the code of article, all controls set inside HomePage.aspx

    now, i want cut off content of Regtab in HomePage.aspx and set it on regtab.ascx file

    Then in HomePage.aspx:

    <%@ Register Src="~/regtab.ascx" TagPrefix="uc" TagName="myregtab"%>
    .....
    <div role="tabpanel" class="tab-pane active" id="Regtab">
    <uc:myregtab ID="theregtab" runat="server" />
    </div>
    .....
    %>

    But so, I can't open and active 'Viewtab' tab when click "view" button in regtab.ascx file.

    Can anybody can help me?

    Thursday, March 19, 2020 10:54 AM

Answers

  • User-719153870 posted

    Hi test0101,

    In your code, you remove and do not using some properties as: HiddenTab.Value =.... "; HiddenTab.visiable=...;  I like the properties to control tabs on frmtab.aspx.

    But problem i face are when I move some addnew or Register form from frmtab.aspx to ascx file then in ascx file can not control the properties (HiddenTab.Value =.... "; HiddenTab.visiable=...; ).

    I understand the article uses this hiddenfield control to hide and show tha tabs, however, in your case, the hiddenfield will not work because it can not be accessed by your two user controls and the aspx page at the same time. More important, you don't need the hiddenfield to control the tabs anymore, use JS directly will make it really simple and easy for your situation, and that's also why i quit the HiddenTab in your original code.

    at the end, can you help me show the code: In frmList.ascx when user click 'edit' button then 'edit' tab will active with frmAddnew.ascx form ( in that, fill all values get from gridview row), then user modify some bla bla and click 'update' button, then 'edit' tab will unactive and 'list' tab will active with list refresh.

    As i said, the whole user control design makes your app much more complex than it should be. But Yes, i can help to achieve what you want.

    1. Add new customer information to your DB via save button click, then reload data for listtab;
    2. Click Edit button in listtab, show that's row's record in new opened Edittab, update the customer information in DB via the save update button click;

    Please check for more detailed information in below code comments:

    Main.Master:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebFormDemo01.Main" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
    
    
      <style type="text/css">
                    
    
          @media (max-width: 992px) {
              .navbar-header {
                  float: none;
              }
    
              .navbar-left, .navbar-right {
                  float: none !important;
              }
    
              .navbar-toggle {
                  display: block;
              }
    
              .navbar-collapse {
                  border-top: 1px solid transparent;
                  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
              }
    
              .navbar-fixed-top {
                  top: 0;
                  border-width: 0 0 1px;
              }
    
              .navbar-collapse.collapse {
                  display: none !important;
              }
    
              .navbar-nav {
                  float: none !important;
                  margin-top: 7.5px;
              }
    
                  .navbar-nav > li {
                      float: none;
                  }
    
                      .navbar-nav > li > a {
                          padding-top: 10px;
                          padding-bottom: 10px;
                      }
    
              .collapse.in {
                  display: block !important;
              }
          }
    
            .dropdown-submenu
            {
                ;
            }
            .dropdown-submenu > .dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
            }
            .dropdown-submenu > a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;
            }
            .dropdown-submenu:hover > a:after
            {
                border-left-color: #555;
            }
            .dropdown-submenu.pull-left
            {
                float: none;
            }
            .dropdown-submenu.pull-left > .dropdown-menu
            {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }
        </style>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="main"  runat="server">   
     
        <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
            <div class="container-fluid" style="font-family:Arial">
                <div class="navbar-header" style="font-family:Arial">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">ASP</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"; style="font-family:Arial;background-color: #1A8CFF">
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                     
                     RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
    
                    </asp:Menu>
                </div>
            </div>
        </div>
      <script type="text/javascript">
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                return false;
            };
            $(function () {
                $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
                $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
                $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
                $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
                $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
                $("a.selected").closest("li").addClass("active");
                $("a.selected").closest(".dropdown-toggle").addClass("active");
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        </script>
        <hr />
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>        
        </form>
    </body>
    </html>
    

    Main.Master.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class Main : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = this.GetData(0);
                    PopulateMenu(dt, 0, null);
                }
            }
    
            private DataTable GetData(int parentMenuId)
            {
    
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                new DataColumn("ParentMenuId"),
                new DataColumn("MenuId"),
                new DataColumn("Title"),
                new DataColumn("Url") });
    
                dt.Rows.Add(0, 1, "Home", "~/frmTab.aspx");  // main tab
                dt.Rows.Add(0, 2, "Services", "javascript:;");
                dt.Rows.Add(0, 3, "About", "javascript:;");
                dt.Rows.Add(0, 4, "Contact ", "~/Contact.aspx");
                dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
                dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
                dt.Rows.Add(3, 7, "About1", "javascript:;");
                dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
                dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
                dt.Rows.Add(7, 10, "About12", "~/About12.aspx");
    
    
                DataTable dtFinal = dt.Clone();
                DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
                if (dr.Length > 0)
                {
                    dtFinal = dr.CopyToDataTable();
                }
    
                return dtFinal;
            }
    
            private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
            {
                string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
                foreach (DataRow row in dt.Rows)
                {
                    MenuItem menuItem = new MenuItem
                    {
                        Value = row["MenuId"].ToString(),
                        Text = row["Title"].ToString(),
                        NavigateUrl = row["Url"].ToString(),
                        Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
                    };
                    if (parentMenuId == 0)
                    {
                        Menu1.Items.Add(menuItem);
                        DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                        PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                    }
                    else
                    {
                        parentMenuItem.ChildItems.Add(menuItem);
                        if (parentMenuId > 0)
                        {
                            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                        }
                    }
                }
            }
        }
    }

    frmTab.aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" EnableEventValidation="false" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmTab.aspx.cs" Inherits="WebFormDemo01.frmTab" %>
    
    <%@ Register Src="~/frmList.ascx" TagPrefix="uc" TagName="list" %>
    <%@ Register Src="~/frmAddnew.ascx" TagPrefix="uc" TagName="addnew" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        
         <style type="text/css">
    
       .td-align-Right
         {   
         text-align:center;   
        }
        .td-align-left
        {
        text-align: match-parent;
             }
     </style>
    
        <%--Html Table td alignment End --%>
        <%--Gridview Css--%>
    
        <style type="text/css">
        SGrid {
        width:auto;
        background-color: #fff;
        margin: 5px 0 10px 0;
        border: solid 1px #ff006e;
        border-collapse:collapse;
    }
    
    .SGrid th {
        padding: 4px 2px;
        color: #fff;
        background:#f17c7c;
        border-left: solid 1px #ff006e;
        font-size: 0.9em;
        text-align:center !important;
    }
    .SGrid td {
        padding: 2px;
        border: solid 1px #ff006e;
        color: #717171;
        text-align:center !important;
    }
    .SGrid .alt { background: #cec4c4 ; }
    .SGrid .pgr { background: #424242 ; }
    .SGrid .pgr table { margin: 5px 0; }
    .SGrid .pgr td {
        border-width: 0;
        padding: 0 6px;
        border-left: solid 1px #f17c7c;
        font-weight: bold;
        color: #f17c7c;
        line-height: 12px;
        background:#fff;
         text-align:center !important;
     } 
    .SGrid .pgr a { color:#424242; text-decoration: none; }
    .SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }
    
        </style>
            <script>
                function Pass(row) {//this method is used to pass value from frmList to frmAddnew
                    var id = $("#ContentPlaceHolder1_mylist_GridView1_hidId_" + row).val();
                    var name = $("#ContentPlaceHolder1_mylist_GridView1_Label4_" + row).html();
                    var phone = $("#ContentPlaceHolder1_mylist_GridView1_Label5_" + row).html();
                    var email = $("#ContentPlaceHolder1_mylist_GridView1_Label6_" + row).html();
                    $("#ContentPlaceHolder1_Addnew1_txtName").val(name);
                    $("#ContentPlaceHolder1_Addnew1_txtMobile").val(phone);
                    $("#ContentPlaceHolder1_Addnew1_txtEmail").val(email);
                    $("#ContentPlaceHolder1_Addnew1_hidUId").val(id);//store customer id in hiddenfield so that the program could know which record in DB it's dealing with
                }
            </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
                <div align="center">
                    <br />
                    <br />
                    <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
                        <div id="dvTab">
                            <ul class="nav nav-tabs" role="tablist" style="font-weight: bold">
                                <li runat="server" id="idListtab"><a href="#Listtab" style="outline: none" aria-controls="Listtab" role="tab" data-toggle="tab">List</a></li>
                                <li runat="server" id="idAddnew"><a href="#Addnew" style="outline: none" aria-controls="Addnew" role="tab" data-toggle="tab">Add new</a></li>
                                <li runat="server" id="idEdittab"><a href="#Edittab" style="outline: none" aria-controls="Edittab" role="tab" data-toggle="tab">Edit</a></li>
    
                            </ul>
    
                            <div class="tab-content" style="padding-top: 5px">
                                <div role="tabpanel" class="tab-pane active" id="Listtab">
    
                                    <uc:list ID="mylist" runat="server" />
    
                                </div>
    
    
                                <div role="tabpanel" class="tab-pane" id="Addnew">
    
                                    <uc:addnew ID="myaddnew" runat="server" />
    
                                </div>
    
                                <div role="tabpanel" class="tab-pane" id="Edittab">
    
                                    <uc:addnew ID="Addnew1" runat="server" />
    
                                </div>
    
                            </div>
                        </div>
                    </div>
    
                </div>
    
    </asp:Content>

    frmTab.aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmTab : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                idEdittab.Style.Add("display","none");//Hide the Edit tab, use idEdittab.Visible = false; which hide it from the server side will make it impossible to show via JS
            }
        }
    }

    frmAddnew.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmAddnew.ascx.cs" Inherits="WebFormDemo01.frmAddnew" %>
    
    <div class="table-responsive">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="width: auto" class="table table-striped">
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label1" CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:HiddenField ID="hidUId" runat="server" /><%--use this to store customer id passed from ListTab--%>
                            <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtEmail" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">&nbsp;</td>
                        <td>
                            <asp:Button ID="Save" CssClass="btn-danger btn-sm" runat="server" Text="Save add new" OnClick="Save_Click" />&nbsp;
          <asp:Button ID="Update" CssClass="btn-danger btn-sm" runat="server" Text="save update" OnClick="Update_click" />&nbsp;
          <asp:Button ID="Reset" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Reset_Click" CausesValidation="False" />&nbsp;                                                
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    

    frmAddnew.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmAddnew : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Save_Click(object sender, EventArgs e)
            {
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "redirect", "window.location.replace('./frmTab.aspx')", true);//refresh current page to reload data for your user control frmList
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
    
            }
    
            protected void Update_click(object sender, EventArgs e)
            {
    
                try
                {
                    con.Open();
                    //a valid update statement shall tell the SQL which row it's dealing with, i used the customer id as the condition here.
                    SqlCommand cmd = new SqlCommand("update register set name = '" + txtName.Text + "', mobile='" + txtMobile.Text + "', email='" + txtEmail.Text + "' where id="+hidUId.Value, con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('upadate Sucessfully')", true);
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "redirect", "window.location.replace('./frmTab.aspx')", true);//refresh current page to reload data for your user control frmList
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Reset_Click(object sender, EventArgs e)
            {
                txtName.Text = string.Empty;
                txtMobile.Text = "";
                txtEmail.Text = "";
                txtName.Focus();
            }
        }
    }

    frmList.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmList.ascx.cs" Inherits="WebFormDemo01.frmList" %>
    
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="table-responsive">
    
                <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid" runat="server" AutoGenerateColumns="False">
    
                    <AlternatingRowStyle CssClass="alt" />
                    <Columns>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:HiddenField ID="hidId" Value='<%# Eval("id") %>' runat="server" /><%--use this to store customer id--%>
                                <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Mobile Number">
                            <ItemTemplate>
                                <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Email Id">
                            <ItemTemplate>
                                <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:Button ID="bttEdit" runat="server" Text="Edit" OnClick="bttEdit_Click" Class="btn-primary" />
                                <asp:Label ID="lblEmail" runat="server" Text='<%#Eval("email") %>' Visible="false"></asp:Label>
    
                            </ItemTemplate>
                        </asp:TemplateField>
    
                    </Columns>
                    <PagerStyle CssClass="pgr" />
    
                </asp:GridView>
                <input type="hidden" runat="server" id="hiddEmail" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    

    frmList.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmList : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
                GridView();
            }
    
    
            protected void bttEdit_Click(object sender, EventArgs e)
            {
                GridViewRow row = ((Button)sender).Parent.Parent as GridViewRow;
                string index = row.Cells[0].ClientID.Substring(row.Cells[0].ClientID.Length - 1);//get in which row of Gridview the Edit button triggered this event
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "goEdit", "$('#dvTab a[href=\"#Edittab\"]').tab('show');$('#ContentPlaceHolder1_idEdittab').show();", true);//show the Edittab and the Edittab<a>
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "PassValue", "Pass("+index+")", true);//fire the pass(row) method to pass values
            }
    
    
            protected void GridView()
            {
    
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("select * from register", con);
                    SqlDataAdapter adp = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    adp.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                    }
                    else
                    {
                        ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        int columncount = GridView1.Rows[0].Cells.Count;
                        GridView1.Rows[0].Cells.Clear();
                        GridView1.Rows[0].Cells.Add(new TableCell());
                        GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
                        GridView1.Rows[0].Cells[0].Text = "No Records Found";
                    }
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
    
            }
        }
    }

    Here's the result of this demo:

    PS: There is no problem with your English language skills. Please mark this post as the answer if it helps. Thanks!

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 21, 2020 2:52 AM
  • User-475949336 posted

    Dear Yang shen, in spite of you are busy but save time help me

    It's very wonderful,  that is my hope. I think i can't do it if without your help.

    very thanks my best fiend

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 21, 2020 4:17 AM
  • User-475949336 posted

    marked answer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 21, 2020 5:36 PM
  • User-475949336 posted

    this is all my project

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 23, 2020 8:29 AM

All replies

  • User-719153870 posted

    Hi test0101,

    now, i want cut off content of Regtab in HomePage.aspx and set it on regtab.ascx file

    But so, I can't open and active 'Viewtab' tab when click "view" button in regtab.ascx file.

    I created a user control as you mentioned based on the code from the article. And the demo is working well, the 'View' tab can show the 'Viewtab' normally as the gif from the article.

    I guess that it fails for you because the js funtion Tabs() can not work successfully, this can be caused by the jquery.js reference is not ok or some related code is changed.

    You can press F12 to open the browser devtools to see if you get any error message when you click the "view" button.

    Below is the complete demo which is working for me:

    regtab.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="regtab.ascx.cs" Inherits="WebFormDemo01_NoAuthentication_.regtab" %>
    <style type="text/css">
        .td-align-Right {
            text-align: center;
        }
    
        .td-align-left {
            text-align: match-parent;
        }
    </style>
    
    <%--Html Table td alignment End --%>
    <%--Gridview Css--%>
    
    <style type="text/css">
        SGrid {
            width: auto;
            background-color: #fff;
            margin: 5px 0 10px 0;
            border: solid 1px #ff006e;
            border-collapse: collapse;
        }
    
        .SGrid th {
            padding: 4px 2px;
            color: #fff;
            background: #f17c7c;
            border-left: solid 1px #ff006e;
            font-size: 0.9em;
            text-align: center !important;
        }
    
        .SGrid td {
            padding: 2px;
            border: solid 1px #ff006e;
            color: #717171;
            text-align: center !important;
        }
    
        .SGrid .alt {
            background: #cec4c4;
        }
    
        .SGrid .pgr {
            background: #424242;
        }
    
            .SGrid .pgr table {
                margin: 5px 0;
            }
    
            .SGrid .pgr td {
                border-width: 0;
                padding: 0 6px;
                border-left: solid 1px #f17c7c;
                font-weight: bold;
                color: #f17c7c;
                line-height: 12px;
                background: #fff;
                text-align: center !important;
            }
    
            .SGrid .pgr a {
                color: #424242;
                text-decoration: none;
            }
    
                .SGrid .pgr a:hover {
                    color: #ff006e;
                    text-decoration: none;
                }
    </style>
    
    <%--Gridview Css End --%>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
    
                <div align="center">
                    <br />
                    <br />
    
                    <div class="panel panel-default" style="width: 510px; padding: 5px; margin: 5px">
                        <div id="dvTab">
    
    
                            <ul class="nav nav-tabs" role="tablist">
                                <li><a href="#Regtab" aria-controls="Regtab" role="tab" data-toggle="tab">Register</a></li>
                                <li><a href="#Viewtab" aria-controls="Viewtab" role="tab" data-toggle="tab">View</a></li>
    
                            </ul>
    
                            <div class="tab-content" style="padding-top: 10px">
    
                                <div role="tabpanel" class="tab-pane active" id="Regtab">
    
                                    <div class="table-responsive">
                                        <table style="width: auto" class="table table-striped">
    
                                            <tr>
                                                <td class="td-align-Right">
                                                    <asp:Label ID="Label1" CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>
                                                </td>
                                                <td class="td-align-left">
                                                    <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-align-Right">
                                                    <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>
                                                </td>
                                                <td class="td-align-left">
                                                    <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-align-Right">
                                                    <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>
                                                </td>
                                                <td class="td-align-left">
                                                    <asp:TextBox ID="txtEmail" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="td-align-Right">&nbsp;</td>
                                                <td>
                                                    <asp:Button ID="Button1" CssClass="btn-danger btn-sm" runat="server" Text="Submit" OnClick="Button1_Click" ValidationGroup="reg" />
                                                    &nbsp;<asp:Button ID="Button2" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Button2_Click" CausesValidation="False" />
                                                    &nbsp;<asp:Button ID="Button3" CssClass="btn-danger btn-sm" runat="server" Text="View" OnClick="Button3_Click" CausesValidation="False" />
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
    
                                <div role="tabpanel" class="tab-pane" id="Viewtab">
    
                                    <div class="table-responsive">
    
                                        <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid" runat="server" AutoGenerateColumns="False">
    
                                            <AlternatingRowStyle CssClass="alt" />
                                            <Columns>
                                                <asp:TemplateField HeaderText="Name">
                                                    <ItemTemplate>
                                                        <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                                <asp:TemplateField HeaderText="Mobile Number">
                                                    <ItemTemplate>
                                                        <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                                <asp:TemplateField HeaderText="Email Id">
                                                    <ItemTemplate>
                                                        <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                            </Columns>
                                            <PagerStyle CssClass="pgr" />
    
                                        </asp:GridView>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Panel  End-->
    
                    <asp:HiddenField ID="HiddenTab" runat="server" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    
    <script type="text/javascript">
    
        function Tabs() {
    
            var Tab = $("#<%=HiddenTab.ClientID%>");
            var tabId = Tab.val() != "" ? Tab.val() : "Regtab";
            $('#dvTab a[href="#' + tabId + '"]').tab('show');
            $("#dvTab a").click(function () {
                Tab.val($(this).attr("href").substring(1));
                //replace("#", ""));
                //substring(1));
            });
        }
    
        function pageLoad() {
            Tabs();
        }
    </script>

    You might notice that i changed the js and css references to the local ones, it's because of the https conflict with http things, which i need to change it for my own environment. If you get the same errors in the devtools, please change them to local ones like i did.

    regtab.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01_NoAuthentication_
    {
        public partial class regtab : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
                HiddenTab.Value = "Regtab";
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
                    GridView1.DataSource = null;
                    GridView1.DataBind();
                    HiddenTab.Value = "Regtab";
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Button2_Click(object sender, EventArgs e)
            {
                txtName.Text = string.Empty;
                txtMobile.Text = "";
                txtEmail.Text = "";
                txtName.Focus();
                HiddenTab.Value = "Regtab";
            }
    
            protected void Button3_Click(object sender, EventArgs e)
            {
                GridView();
                HiddenTab.Value = "Viewtab";
            }
    
            protected void GridView()
            {
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("select * from register", con);
                    SqlDataAdapter adp = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    adp.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                    }
                    else
                    {
                        ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        int columncount = GridView1.Rows[0].Cells.Count;
                        GridView1.Rows[0].Cells.Clear();
                        // GridView2.FooterRow.Cells.Clear();
                        GridView1.Rows[0].Cells.Add(new TableCell());
                        GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
                        GridView1.Rows[0].Cells[0].Text = "No Records Found";
                    }
                    HiddenTab.Value = "Viewtab";
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
        }
    }

    regtabTestDemo.aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="regtabTestDemo.aspx.cs" Inherits="WebFormDemo01_NoAuthentication_.regtabTestDemo" %>
    <%@ Register Src="~/regtab.ascx" TagPrefix="uc" TagName="myregtab" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <uc:myregtab ID="theregtab" runat="server" />
            </div>
        </form>
    </body>
    </html>

    And the result of this demo:

    Best Regard,

    Yang Shen

    Friday, March 20, 2020 1:52 AM
  • User-475949336 posted

    dear Friend, in your code, you cut all content to register.ascx, but I want only cut content of tabRegister form, remain all controls as panel, ul, li ...

    and this is my code look like:

    this is my code:

    1- Main.master

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="abc.Main" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>

     <link rel="stylesheet" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    <script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>


      <style type="text/css">
                

    @media (max-width: 992px) {
        .navbar-header {
            float: none;
        }
        .navbar-left,.navbar-right {
            float: none !important;
        }
        .navbar-toggle {
            display: block;
        }
        .navbar-collapse {
            border-top: 1px solid transparent;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .navbar-fixed-top {
            top: 0;
            border-width: 0 0 1px;
        }
        .navbar-collapse.collapse {
            display: none!important;
        }
        .navbar-nav {
            float: none!important;
            margin-top: 7.5px;
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .collapse.in{
            display:block !important;
        }
    }

            .dropdown-submenu
            {
                ;
            }
            .dropdown-submenu > .dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
            }
            .dropdown-submenu > a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;
            }
            .dropdown-submenu:hover > a:after
            {
                border-left-color: #555;
            }
            .dropdown-submenu.pull-left
            {
                float: none;
            }
            .dropdown-submenu.pull-left > .dropdown-menu
            {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }
        </style>

        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>       

    </head>
    <body>   
        <form id="main"  runat="server">   
     
        <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
            <div class="container-fluid" style="font-family:Arial">
                <div class="navbar-header" style="font-family:Arial">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">ASP</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"; style="font-family:Arial;background-color: #1A8CFF">
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                     
                     RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">

                    </asp:Menu>
                </div>
            </div>
        </div>
      <script type="text/javascript">
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                return false;
            };
            $(function () {
                $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
                $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
                $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
                $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
                $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
                $("a.selected").closest("li").addClass("active");
                $("a.selected").closest(".dropdown-toggle").addClass("active");
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        </script>
        <hr />
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>        
        </form>
    </body>
    </html>

    2. Main.master.cs

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    namespace abc
    {
        public partial class Main : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                      DataTable dt = this.GetData(0);
                      PopulateMenu(dt, 0, null);               
                }
            }

            
            private DataTable GetData(int parentMenuId)
            {          

                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                new DataColumn("ParentMenuId"),
                new DataColumn("MenuId"),
                new DataColumn("Title"),
                new DataColumn("Url") });

                dt.Rows.Add(0, 1, "Home", "~/frmTab.aspx");  // main tab
                dt.Rows.Add(0, 2, "Services", "javascript:;");
                dt.Rows.Add(0, 3, "About", "javascript:;");
                dt.Rows.Add(0, 4, "Contact ", "~/Contact.aspx");
                dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
                dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
                dt.Rows.Add(3, 7, "About1", "javascript:;");
                dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
                dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
                dt.Rows.Add(7, 10, "About12", "~/About12.aspx");


                DataTable dtFinal = dt.Clone();
                DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
                if (dr.Length > 0)
                {
                    dtFinal = dr.CopyToDataTable();
                }

                return dtFinal;            
            }
            

            private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
            {
                string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
                foreach (DataRow row in dt.Rows)
                {
                    MenuItem menuItem = new MenuItem
                    {
                        Value = row["MenuId"].ToString(),
                        Text = row["Title"].ToString(),
                        NavigateUrl = row["Url"].ToString(),
                        Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
                    };
                    if (parentMenuId == 0)
                    {
                        Menu1.Items.Add(menuItem);
                        DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                        PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                    }
                    else
                    {
                        parentMenuItem.ChildItems.Add(menuItem);
                        if (parentMenuId > 0)
                        {
                            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                        }
                    }
                }
            }
           
        }
    }

    3- frmTab.aspx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmTab.aspx.cs" Inherits="abc.frmTab" %>
    <%@ Register Src="~/frmList.ascx" TagPrefix="uc" TagName="list"%>   
    <%@ Register Src="~/frmAddnew.ascx" TagPrefix="uc" TagName="addnew"%>   

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
          

        
                           <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">

                            <div id="dvTab">
                                
                                <ul class="nav nav-tabs"  role="tablist"  style="font-weight: bold">
                                    <li runat="server" id="idListtab" ><a href="#Listtab" style="outline:none" aria-controls="Listtab" role="tab"  data-toggle="tab">List</a></li>
                                    <li runat="server" id="idAddnew"><a href="#Addnew" style="outline:none" aria-controls="Addnew" role="tab" data-toggle="tab">Add new</a></li>
                                    <li runat="server" id="idEdittab"><a href="#Edittab" style="outline:none" aria-controls="Edittab" role="tab" data-toggle="tab">Edit</a></li>
                                                                  
                                </ul>

                                <div class="tab-content" style="padding-top: 5px">
                                    
                                     <!-- <div role="tabpanel" class="tab-pane" id="Listtab"> -->
                                      <div role="tabpanel" class="tab-pane active" id="Listtab">                    
                                       
                                             <uc:list ID="mylist" runat="server" />     
                                       
                                        </div>                                                              


                                    <div role="tabpanel" class="tab-pane active" id="Addnew">

                                      <uc:addnew ID="myaddnew" runat="server" />     

                                    </div>

                                    <div role="tabpanel" class="tab-pane" id="Edittab">
     
                                    <uc:addnew ID="myaddnew" runat="server" />     

                                    </div>

                                    </div>
                                </div>
                            </div>
                 <!-- Panel  End-->

    <asp:HiddenField ID="HiddenTab" runat="server" />


             <script type="text/javascript">

                 function Tabs() {
                     var Tab = $("#<%=HiddenTab.ClientID%>");
                     var tabId = Tab.val() != "" ? Tab.val() : "Listtab";
                     $('#dvTab a[href="#' + tabId + '"]').tab('show');
                     $("#dvTab a").click(function () {
                         Tab.val($(this).attr("href").substring(1));
                         //replace("#", ""));
                         //substring(1));
                     });
                 }
                 
                 function pageLoad()
                 {
                     Tabs();                 
                 }
              </script>      
    </asp:Content>

    4- frmTab.cs

    using System;

    namespace abc
    {
        public partial class frmtab : System.Web.UI.Page
        {
                       
            protected void Page_Load(object sender, EventArgs e)
            {            

                HiddenTab.Value = "Listtab";

                idEdittab.Visible = false;

            }
                 

          }
        }
        }

     

    5- frmAddnew.ascx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmaddnew.ascx.cs" Inherits="abc.frmaddnew" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
          
     <div class="table-responsive">
                                                <table  style="width:auto" class="table table-striped">
                                    
                                            <tr><td class="td-align-Right">
                                                <asp:Label ID="Label1"  CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>
                                                </td><td class="td-align-left">
                                                    <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                                                </td></tr>
                                            <tr><td class="td-align-Right">
                                                <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>
                                                </td><td class="td-align-left">
                                                    <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>
                                                </td></tr>
                                            <tr><td class="td-align-Right">
                                                <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>
                                                </td><td class="td-align-left">
                                                    <asp:TextBox ID="txtEmail" CssClass="form-control"  runat="server" ValidationGroup="reg"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                                                    <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>
                                                </td></tr>
                                            <tr><td class="td-align-Right">
                                                &nbsp;</td><td>
          <asp:Button ID="Save" CssClass="btn-danger btn-sm"  runat="server" Text="Save add new" OnClick="Save_Click" ValidationGroup="reg" />&nbsp;
          
          <asp:Button ID="Update" CssClass="btn-danger btn-sm"  runat="server" Text="save update" OnClick="Update_Click" ValidationGroup="reg" />&nbsp;

          <asp:Button ID="Reset" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Reset_Click" CausesValidation="False" />&nbsp;                                                
           </td></tr>
           </table></div>

    </asp:Content>

     

    6- frmAddnew.cs

    using System;

    namespace abc
    {
        public partial class frmAddnew : System.Web.UI.Page
        {
                       
            protected void Page_Load(object sender, EventArgs e)
            {            


            }
            protected void Save_Click(object sender, EventArgs e)
            {
               
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
                    GridView1.DataSource = null;
                    GridView1.DataBind();
                    
                    // i do not HOW TO ACTIVE TAB AND OPEN
                    HiddenTab.Value = "Addnew"; // ??????
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
               
            }

             protected void Update_click(object sender, EventArgs e)
            {
               
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("update register set name= '" + txtName.Text + "', mobile='" + txtMobile.Text + "', email='" + txtEmail.Text + "'", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('upadate Sucessfully')", true);
                    GridView1.DataSource = null;
                    GridView1.DataBind();
                    
                    // i do not HOW TO ACTIVE TAB AND OPEN
                    HiddenTab.Value = "Listtab"; // ??????
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }

            protected void Reset_Click(object sender, EventArgs e)
            {
                txtName.Text = string.Empty;
                txtMobile.Text = "";
                txtEmail.Text = "";
                txtName.Focus();
                HiddenTab.Value = "Addnew";
            }
                        

           
          }
        }
        }

     

    7- frmList.ascx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.master" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmList.ascx.cs" Inherits="abc.frmList" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

    </asp:Content>

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div class="table-responsive">
                                                                                       
                                            <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid" runat="server" AutoGenerateColumns="False">

                                                <AlternatingRowStyle CssClass="alt" />
                                                <Columns>
                                                    <asp:TemplateField HeaderText="Name">
                                                        <ItemTemplate>
                                                            <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField HeaderText="Mobile Number">
                                                        <ItemTemplate>
                                                            <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:TemplateField HeaderText="Email Id">
                                                        <ItemTemplate>
                                                            <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
                                                        </ItemTemplate>
                                                    </asp:TemplateField>

                             <asp:TemplateField HeaderText="Action">
                                                        <ItemTemplate>
                                                        <asp:Button ID="bttEdit" runat="server" Text="Edit"  OnClick="bttEdit_Click" Class="btn-primary" />
                                    <asp:Label ID="lblEmail" runat="server" Text='<%#Eval("email") %>' Visible="false"></asp:Label>

                                                        </ItemTemplate>
                                                    </asp:TemplateField>

                                                </Columns>
                                                <PagerStyle CssClass="pgr" />

                                            </asp:GridView>
          <input type="hidden" runat="server" id="hiddEmail" />
      </div>
      </asp:Content>

     

    8- frmList.cs

    using System;

    namespace abc
    {
        public partial class frmlist : System.Web.UI.Page
        {
                       
            protected void Page_Load(object sender, EventArgs e)
            {            
                GridView();
            }
           
           
            protected void bttEdit_Click(object sender, EventArgs e)
            {
               // I DON NOT KNOW HOW TO ACTIVE EDIT TAB AND CODE HERE FOR GET ALL INFOR FROM ONE GRIDVIEW ROW AND DISPLAY ON FORM ADD NEW TO UPDATE THIS RECORD

                HiddenTab.Value = "Edittab";  // ?????

            }


            protected void GridView()
            {
                
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("select * from register", con);
                    SqlDataAdapter adp = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    adp.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                    }
                    else
                    {
                        ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        int columncount = GridView1.Rows[0].Cells.Count;
                        GridView1.Rows[0].Cells.Clear();
                        // GridView2.FooterRow.Cells.Clear();
                        GridView1.Rows[0].Cells.Add(new TableCell());
                        GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
                        GridView1.Rows[0].Cells[0].Text = "No Records Found";
                    }
                    HiddenTab.Value = "Listtab";
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
            
          }
        }
        }

     I want:

    - IN addnew tab, when click save button to submit save data, just active listtab with value just add new.

    - in listTab, when click Edit button (in gridview row), will call addnew form with valued and active editTab, when click Update_click button in form addnew will update to database and active listTab with valued just update.

     

    Friday, March 20, 2020 3:19 AM
  • User-719153870 posted

    Hi test0101,

    Thanks for the code, but are you sure this is what you are working wit? Since there are pretty many mistakes.

    Below are some of the mistakes i found:

    1. If you are using the ascx which is called the "User Controls", then the directive shall be "Control" instead of "Page" in your frmAddnew.ascx and frmList.ascx code, the ascx pages are full of aspx code which even has a masterpagefiel for them? And in the back(.cs) code, it directly inherits from System.Web.UI.Page which should be System.Web.UI.UserControl in fact.
    2. There's a script manager missed in the aspx page which is required by the updatepanels(which are also missing) in the ascx files.
    3. In my test, the Tab() function needs to be included in $(funtion(){...}) rather than function pageLoad(){...}, not sure if it works for you.
    4. The SQL Update statement has syntax error, it shoule be like update table set field1 = value1 where condition, please check the SQL UPDATE Statement for more informaiton.

    Anyway, this forum should be used for specific problems those you met in the coding process, not ask for code of broad project capabilities.

    Below is the updated demo built based on the code you provided:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebFormDemo01.Main" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
    
    
      <style type="text/css">
                    
    
          @media (max-width: 992px) {
              .navbar-header {
                  float: none;
              }
    
              .navbar-left, .navbar-right {
                  float: none !important;
              }
    
              .navbar-toggle {
                  display: block;
              }
    
              .navbar-collapse {
                  border-top: 1px solid transparent;
                  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
              }
    
              .navbar-fixed-top {
                  top: 0;
                  border-width: 0 0 1px;
              }
    
              .navbar-collapse.collapse {
                  display: none !important;
              }
    
              .navbar-nav {
                  float: none !important;
                  margin-top: 7.5px;
              }
    
                  .navbar-nav > li {
                      float: none;
                  }
    
                      .navbar-nav > li > a {
                          padding-top: 10px;
                          padding-bottom: 10px;
                      }
    
              .collapse.in {
                  display: block !important;
              }
          }
    
            .dropdown-submenu
            {
                ;
            }
            .dropdown-submenu > .dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
            }
            .dropdown-submenu > a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;
            }
            .dropdown-submenu:hover > a:after
            {
                border-left-color: #555;
            }
            .dropdown-submenu.pull-left
            {
                float: none;
            }
            .dropdown-submenu.pull-left > .dropdown-menu
            {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }
        </style>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="main"  runat="server">   
     
        <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
            <div class="container-fluid" style="font-family:Arial">
                <div class="navbar-header" style="font-family:Arial">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">ASP</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"; style="font-family:Arial;background-color: #1A8CFF">
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                     
                     RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
    
                    </asp:Menu>
                </div>
            </div>
        </div>
      <script type="text/javascript">
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                return false;
            };
            $(function () {
                $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
                $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
                $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
                $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
                $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
                $("a.selected").closest("li").addClass("active");
                $("a.selected").closest(".dropdown-toggle").addClass("active");
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        </script>
        <hr />
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>        
        </form>
    </body>
    </html>

    Main.Master.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class Main : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = this.GetData(0);
                    PopulateMenu(dt, 0, null);
                }
            }
    
            private DataTable GetData(int parentMenuId)
            {
    
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                new DataColumn("ParentMenuId"),
                new DataColumn("MenuId"),
                new DataColumn("Title"),
                new DataColumn("Url") });
    
                dt.Rows.Add(0, 1, "Home", "~/frmTab.aspx");  // main tab
                dt.Rows.Add(0, 2, "Services", "javascript:;");
                dt.Rows.Add(0, 3, "About", "javascript:;");
                dt.Rows.Add(0, 4, "Contact ", "~/Contact.aspx");
                dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
                dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
                dt.Rows.Add(3, 7, "About1", "javascript:;");
                dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
                dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
                dt.Rows.Add(7, 10, "About12", "~/About12.aspx");
    
    
                DataTable dtFinal = dt.Clone();
                DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
                if (dr.Length > 0)
                {
                    dtFinal = dr.CopyToDataTable();
                }
    
                return dtFinal;
            }
    
            private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
            {
                string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
                foreach (DataRow row in dt.Rows)
                {
                    MenuItem menuItem = new MenuItem
                    {
                        Value = row["MenuId"].ToString(),
                        Text = row["Title"].ToString(),
                        NavigateUrl = row["Url"].ToString(),
                        Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
                    };
                    if (parentMenuId == 0)
                    {
                        Menu1.Items.Add(menuItem);
                        DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                        PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                    }
                    else
                    {
                        parentMenuItem.ChildItems.Add(menuItem);
                        if (parentMenuId > 0)
                        {
                            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                        }
                    }
                }
            }
        }
    }

    frmTab.aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmTab.aspx.cs" Inherits="WebFormDemo01.frmTab" %>
    
    <%@ Register Src="~/frmList.ascx" TagPrefix="uc" TagName="list" %>
    <%@ Register Src="~/frmAddnew.ascx" TagPrefix="uc" TagName="addnew" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        
         <style type="text/css">
    
       .td-align-Right
         {   
         text-align:center;   
        }
        .td-align-left
        {
        text-align: match-parent;
             }
     </style>
    
        <%--Html Table td alignment End --%>
        <%--Gridview Css--%>
    
        <style type="text/css">
        SGrid {
        width:auto;
        background-color: #fff;
        margin: 5px 0 10px 0;
        border: solid 1px #ff006e;
        border-collapse:collapse;
    }
    
    .SGrid th {
        padding: 4px 2px;
        color: #fff;
        background:#f17c7c;
        border-left: solid 1px #ff006e;
        font-size: 0.9em;
        text-align:center !important;
    }
    .SGrid td {
        padding: 2px;
        border: solid 1px #ff006e;
        color: #717171;
        text-align:center !important;
    }
    .SGrid .alt { background: #cec4c4 ; }
    .SGrid .pgr { background: #424242 ; }
    .SGrid .pgr table { margin: 5px 0; }
    .SGrid .pgr td {
        border-width: 0;
        padding: 0 6px;
        border-left: solid 1px #f17c7c;
        font-weight: bold;
        color: #f17c7c;
        line-height: 12px;
        background:#fff;
         text-align:center !important;
     } 
    .SGrid .pgr a { color:#424242; text-decoration: none; }
    .SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }
    
        </style>
            <script>
                function Tabs() {
                    var Tab = $("#<%=HiddenTab.ClientID%>");
                    var tabId = Tab.val() != "" ? Tab.val() : "Listtab";
                    $('#dvTab a[href="#' + tabId + '"]').tab('show');
                    $("#dvTab a").click(function () {
                        Tab.val($(this).attr("href").substring(1));
                    });
                }
    
                $(function () {
                    Tabs();
                })
            </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
                <div align="center">
                    <br />
                    <br />
                    <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
                        <div id="dvTab">
                            <ul class="nav nav-tabs" role="tablist" style="font-weight: bold">
                                <li runat="server" id="idListtab"><a href="#Listtab" style="outline: none" aria-controls="Listtab" role="tab" data-toggle="tab">List</a></li>
                                <li runat="server" id="idAddnew"><a href="#Addnew" style="outline: none" aria-controls="Addnew" role="tab" data-toggle="tab">Add new</a></li>
                                <li runat="server" id="idEdittab"><a href="#Edittab" style="outline: none" aria-controls="Edittab" role="tab" data-toggle="tab">Edit</a></li>
    
                            </ul>
    
                            <div class="tab-content" style="padding-top: 5px">
    
                                <!-- <div role="tabpanel" class="tab-pane" id="Listtab"> -->
                                <div role="tabpanel" class="tab-pane active" id="Listtab">
    
                                    <uc:list ID="mylist" runat="server" />
    
                                </div>
    
    
                                <div role="tabpanel" class="tab-pane active" id="Addnew">
    
                                    <uc:addnew ID="myaddnew" runat="server" />
    
                                </div>
    
                                <div role="tabpanel" class="tab-pane" id="Edittab">
    
                                    <uc:addnew ID="Addnew1" runat="server" />
    
                                </div>
    
                            </div>
                        </div>
                    </div>
                    <!-- Panel  End-->
    
                    <asp:HiddenField ID="HiddenTab" runat="server" />
                </div>
    
    </asp:Content>

    frmTab.aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmTab : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                HiddenTab.Value = "Listtab";
    
                idEdittab.Visible = false;
            }
        }
    }

    frmAddnew.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmAddnew.ascx.cs" Inherits="WebFormDemo01.frmAddnew" %>
    
    <%--<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">--%>
    <div class="table-responsive">
        
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="width: auto" class="table table-striped">
    
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label1" CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtEmail" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">&nbsp;</td>
                        <td>
                            <asp:Button ID="Save" CssClass="btn-danger btn-sm" runat="server" Text="Save add new" OnClick="Save_Click" />&nbsp;
                            <%--<asp:Button ID="Save" CssClass="btn-danger btn-sm" runat="server" Text="Save add new" OnClick="Save_Click"  />&nbsp;--%>
          
          <asp:Button ID="Update" CssClass="btn-danger btn-sm" runat="server" Text="save update" OnClick="Update_click" ValidationGroup="reg" />&nbsp;
    
          <asp:Button ID="Reset" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Reset_Click" CausesValidation="False" />&nbsp;                                                
                        </td>
                    </tr>
                </table>     
            </ContentTemplate>
        </asp:UpdatePanel>
    
    </div>
    <%--</asp:Content>--%>

    frmAddnew.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmAddnew : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Save_Click(object sender, EventArgs e)
            {
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
                    Response.Redirect("./frmTab.aspx");
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
    
            }
    
            protected void Update_click(object sender, EventArgs e)
            {
    
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("update register set name= '" + txtName.Text + "', mobile='" + txtMobile.Text + "', email='" + txtEmail.Text + "'", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('upadate Sucessfully')", true);
                    //GridView1.DataSource = null;
                    //GridView1.DataBind();
    
                    //// i do not HOW TO ACTIVE TAB AND OPEN
                    //HiddenTab.Value = "Listtab"; // ??????
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Reset_Click(object sender, EventArgs e)
            {
                txtName.Text = string.Empty;
                txtMobile.Text = "";
                txtEmail.Text = "";
                txtName.Focus();
                //HiddenTab.Value = "Addnew";
            }
        }
    }

    frmList.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmList.ascx.cs" Inherits="WebFormDemo01.frmList" %>
    <%--<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">--%>
    
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="table-responsive">
    
                <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid" runat="server" AutoGenerateColumns="False">
    
                    <AlternatingRowStyle CssClass="alt" />
                    <Columns>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Mobile Number">
                            <ItemTemplate>
                                <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Email Id">
                            <ItemTemplate>
                                <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:Button ID="bttEdit" runat="server" Text="Edit" OnClick="bttEdit_Click" Class="btn-primary" />
                                <asp:Label ID="lblEmail" runat="server" Text='<%#Eval("email") %>' Visible="false"></asp:Label>
    
                            </ItemTemplate>
                        </asp:TemplateField>
    
                    </Columns>
                    <PagerStyle CssClass="pgr" />
    
                </asp:GridView>
                <input type="hidden" runat="server" id="hiddEmail" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <%--<asp:HiddenField ID="HiddenTab" runat="server" />--%>
    <%--</asp:Content>--%>

    frmList.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmList : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
                GridView();
            }
    
    
            protected void bttEdit_Click(object sender, EventArgs e)
            {
                // I DON NOT KNOW HOW TO ACTIVE EDIT TAB AND CODE HERE FOR GET ALL INFOR FROM ONE GRIDVIEW ROW AND DISPLAY ON FORM ADD NEW TO UPDATE THIS RECORD
    
               // HiddenTab.Value = "Edittab";  // ?????
    
            }
    
    
            protected void GridView()
            {
    
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("select * from register", con);
                    SqlDataAdapter adp = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    adp.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                    }
                    else
                    {
                        ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        int columncount = GridView1.Rows[0].Cells.Count;
                        GridView1.Rows[0].Cells.Clear();
                        // GridView2.FooterRow.Cells.Clear();
                        GridView1.Rows[0].Cells.Add(new TableCell());
                        GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
                        GridView1.Rows[0].Cells[0].Text = "No Records Found";
                    }
                    //HiddenTab.Value = "Listtab";
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
    
            }
        }
    }

    To be honist, split it to two user controls makes the whole process much more complex, the 2 requirements you mentioned could be easily achieve if without the usercontrols.

    Best Regard,

    Yang Shen

    Friday, March 20, 2020 7:49 AM
  • User-475949336 posted

    Dear Yang shen

    Thank for your help. I'm sorry for mistakes in mycode, because due i copy paste text from my project.

    In your code, you remove and do not using some properties as: HiddenTab.Value =.... "; HiddenTab.visiable=...;  I like the properties to control tabs on frmtab.aspx.

    But problem i face are when I move some addnew or Register form from frmtab.aspx to ascx file then in ascx file can not control the properties (HiddenTab.Value =.... "; HiddenTab.visiable=...; ).

    at the end, can you help me show the code: In frmList.ascx when user click 'edit' button then 'edit' tab will active with frmAddnew.ascx form ( in that, fill all values get from gridview row), then user modify some bla bla and click 'update' button, then 'edit' tab will unactive and 'list' tab will active with list refresh.

    I'm sorry for my english.

    Friday, March 20, 2020 8:45 AM
  • User-719153870 posted

    Hi test0101,

    In your code, you remove and do not using some properties as: HiddenTab.Value =.... "; HiddenTab.visiable=...;  I like the properties to control tabs on frmtab.aspx.

    But problem i face are when I move some addnew or Register form from frmtab.aspx to ascx file then in ascx file can not control the properties (HiddenTab.Value =.... "; HiddenTab.visiable=...; ).

    I understand the article uses this hiddenfield control to hide and show tha tabs, however, in your case, the hiddenfield will not work because it can not be accessed by your two user controls and the aspx page at the same time. More important, you don't need the hiddenfield to control the tabs anymore, use JS directly will make it really simple and easy for your situation, and that's also why i quit the HiddenTab in your original code.

    at the end, can you help me show the code: In frmList.ascx when user click 'edit' button then 'edit' tab will active with frmAddnew.ascx form ( in that, fill all values get from gridview row), then user modify some bla bla and click 'update' button, then 'edit' tab will unactive and 'list' tab will active with list refresh.

    As i said, the whole user control design makes your app much more complex than it should be. But Yes, i can help to achieve what you want.

    1. Add new customer information to your DB via save button click, then reload data for listtab;
    2. Click Edit button in listtab, show that's row's record in new opened Edittab, update the customer information in DB via the save update button click;

    Please check for more detailed information in below code comments:

    Main.Master:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="WebFormDemo01.Main" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title></title>
        <link href="Content/bootstrap.min.css" rel="stylesheet" />
        <script src="Scripts/jquery-3.4.1.min.js"></script>
        <script src="Scripts/bootstrap.min.js"></script>
    
    
      <style type="text/css">
                    
    
          @media (max-width: 992px) {
              .navbar-header {
                  float: none;
              }
    
              .navbar-left, .navbar-right {
                  float: none !important;
              }
    
              .navbar-toggle {
                  display: block;
              }
    
              .navbar-collapse {
                  border-top: 1px solid transparent;
                  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
              }
    
              .navbar-fixed-top {
                  top: 0;
                  border-width: 0 0 1px;
              }
    
              .navbar-collapse.collapse {
                  display: none !important;
              }
    
              .navbar-nav {
                  float: none !important;
                  margin-top: 7.5px;
              }
    
                  .navbar-nav > li {
                      float: none;
                  }
    
                      .navbar-nav > li > a {
                          padding-top: 10px;
                          padding-bottom: 10px;
                      }
    
              .collapse.in {
                  display: block !important;
              }
          }
    
            .dropdown-submenu
            {
                ;
            }
            .dropdown-submenu > .dropdown-menu
            {
                top: 0;
                left: 100%;
                margin-top: -6px;
                margin-left: -1px;
                -webkit-border-radius: 0 6px 6px 6px;
                -moz-border-radius: 0 6px 6px 6px;
                border-radius: 0 6px 6px 6px;
            }
            .dropdown-submenu > a:after
            {
                display: block;
                content: " ";
                float: right;
                width: 0;
                height: 0;
                border-color: transparent;
                border-style: solid;
                border-width: 5px 0 5px 5px;
                border-left-color: #cccccc;
                margin-top: 5px;
                margin-right: -10px;
            }
            .dropdown-submenu:hover > a:after
            {
                border-left-color: #555;
            }
            .dropdown-submenu.pull-left
            {
                float: none;
            }
            .dropdown-submenu.pull-left > .dropdown-menu
            {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }
        </style>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="main"  runat="server">   
     
        <div class="navbar navbar-default" style="font-family:Arial; background-color: #0066CC">
            <div class="container-fluid" style="font-family:Arial">
                <div class="navbar-header" style="font-family:Arial">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
                            class="icon-bar"></span><span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">ASP</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"; style="font-family:Arial;background-color: #1A8CFF">
                    <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal"
                     
                     RenderingMode="List" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav" DynamicMenuStyle-CssClass="dropdown-menu">
    
                    </asp:Menu>
                </div>
            </div>
        </div>
      <script type="text/javascript">
            Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
                return false;
            };
            $(function () {
                $(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
                $(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
                $(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
                $(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
                $(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
                $("a.selected").closest("li").addClass("active");
                $("a.selected").closest(".dropdown-toggle").addClass("active");
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        </script>
        <hr />
            
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">        
        </asp:ContentPlaceHolder>        
        </form>
    </body>
    </html>
    

    Main.Master.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class Main : System.Web.UI.MasterPage
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = this.GetData(0);
                    PopulateMenu(dt, 0, null);
                }
            }
    
            private DataTable GetData(int parentMenuId)
            {
    
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[4] {
                new DataColumn("ParentMenuId"),
                new DataColumn("MenuId"),
                new DataColumn("Title"),
                new DataColumn("Url") });
    
                dt.Rows.Add(0, 1, "Home", "~/frmTab.aspx");  // main tab
                dt.Rows.Add(0, 2, "Services", "javascript:;");
                dt.Rows.Add(0, 3, "About", "javascript:;");
                dt.Rows.Add(0, 4, "Contact ", "~/Contact.aspx");
                dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
                dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
                dt.Rows.Add(3, 7, "About1", "javascript:;");
                dt.Rows.Add(3, 8, "About2", "~/About2.aspx");
                dt.Rows.Add(7, 9, "About11", "~/About11.aspx");
                dt.Rows.Add(7, 10, "About12", "~/About12.aspx");
    
    
                DataTable dtFinal = dt.Clone();
                DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
                if (dr.Length > 0)
                {
                    dtFinal = dr.CopyToDataTable();
                }
    
                return dtFinal;
            }
    
            private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
            {
                string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
                foreach (DataRow row in dt.Rows)
                {
                    MenuItem menuItem = new MenuItem
                    {
                        Value = row["MenuId"].ToString(),
                        Text = row["Title"].ToString(),
                        NavigateUrl = row["Url"].ToString(),
                        Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
                    };
                    if (parentMenuId == 0)
                    {
                        Menu1.Items.Add(menuItem);
                        DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                        PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                    }
                    else
                    {
                        parentMenuItem.ChildItems.Add(menuItem);
                        if (parentMenuId > 0)
                        {
                            DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
                            PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
                        }
                    }
                }
            }
        }
    }

    frmTab.aspx:

    <%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" EnableEventValidation="false" UnobtrusiveValidationMode="None" AutoEventWireup="true" CodeBehind="frmTab.aspx.cs" Inherits="WebFormDemo01.frmTab" %>
    
    <%@ Register Src="~/frmList.ascx" TagPrefix="uc" TagName="list" %>
    <%@ Register Src="~/frmAddnew.ascx" TagPrefix="uc" TagName="addnew" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        
         <style type="text/css">
    
       .td-align-Right
         {   
         text-align:center;   
        }
        .td-align-left
        {
        text-align: match-parent;
             }
     </style>
    
        <%--Html Table td alignment End --%>
        <%--Gridview Css--%>
    
        <style type="text/css">
        SGrid {
        width:auto;
        background-color: #fff;
        margin: 5px 0 10px 0;
        border: solid 1px #ff006e;
        border-collapse:collapse;
    }
    
    .SGrid th {
        padding: 4px 2px;
        color: #fff;
        background:#f17c7c;
        border-left: solid 1px #ff006e;
        font-size: 0.9em;
        text-align:center !important;
    }
    .SGrid td {
        padding: 2px;
        border: solid 1px #ff006e;
        color: #717171;
        text-align:center !important;
    }
    .SGrid .alt { background: #cec4c4 ; }
    .SGrid .pgr { background: #424242 ; }
    .SGrid .pgr table { margin: 5px 0; }
    .SGrid .pgr td {
        border-width: 0;
        padding: 0 6px;
        border-left: solid 1px #f17c7c;
        font-weight: bold;
        color: #f17c7c;
        line-height: 12px;
        background:#fff;
         text-align:center !important;
     } 
    .SGrid .pgr a { color:#424242; text-decoration: none; }
    .SGrid .pgr a:hover { color:#ff006e; text-decoration: none; }
    
        </style>
            <script>
                function Pass(row) {//this method is used to pass value from frmList to frmAddnew
                    var id = $("#ContentPlaceHolder1_mylist_GridView1_hidId_" + row).val();
                    var name = $("#ContentPlaceHolder1_mylist_GridView1_Label4_" + row).html();
                    var phone = $("#ContentPlaceHolder1_mylist_GridView1_Label5_" + row).html();
                    var email = $("#ContentPlaceHolder1_mylist_GridView1_Label6_" + row).html();
                    $("#ContentPlaceHolder1_Addnew1_txtName").val(name);
                    $("#ContentPlaceHolder1_Addnew1_txtMobile").val(phone);
                    $("#ContentPlaceHolder1_Addnew1_txtEmail").val(email);
                    $("#ContentPlaceHolder1_Addnew1_hidUId").val(id);//store customer id in hiddenfield so that the program could know which record in DB it's dealing with
                }
            </script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
                <div align="center">
                    <br />
                    <br />
                    <div class="panel panel-default" style="width: auto; padding: 6px; margin: 6px">
                        <div id="dvTab">
                            <ul class="nav nav-tabs" role="tablist" style="font-weight: bold">
                                <li runat="server" id="idListtab"><a href="#Listtab" style="outline: none" aria-controls="Listtab" role="tab" data-toggle="tab">List</a></li>
                                <li runat="server" id="idAddnew"><a href="#Addnew" style="outline: none" aria-controls="Addnew" role="tab" data-toggle="tab">Add new</a></li>
                                <li runat="server" id="idEdittab"><a href="#Edittab" style="outline: none" aria-controls="Edittab" role="tab" data-toggle="tab">Edit</a></li>
    
                            </ul>
    
                            <div class="tab-content" style="padding-top: 5px">
                                <div role="tabpanel" class="tab-pane active" id="Listtab">
    
                                    <uc:list ID="mylist" runat="server" />
    
                                </div>
    
    
                                <div role="tabpanel" class="tab-pane" id="Addnew">
    
                                    <uc:addnew ID="myaddnew" runat="server" />
    
                                </div>
    
                                <div role="tabpanel" class="tab-pane" id="Edittab">
    
                                    <uc:addnew ID="Addnew1" runat="server" />
    
                                </div>
    
                            </div>
                        </div>
                    </div>
    
                </div>
    
    </asp:Content>

    frmTab.aspx.cs:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmTab : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                idEdittab.Style.Add("display","none");//Hide the Edit tab, use idEdittab.Visible = false; which hide it from the server side will make it impossible to show via JS
            }
        }
    }

    frmAddnew.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmAddnew.ascx.cs" Inherits="WebFormDemo01.frmAddnew" %>
    
    <div class="table-responsive">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="width: auto" class="table table-striped">
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label1" CssClass="btn btn-labeled btn-default" runat="server" Text="Name"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:HiddenField ID="hidUId" runat="server" /><%--use this to store customer id passed from ListTab--%>
                            <asp:TextBox ID="txtName" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label2" runat="server" CssClass="btn btn-labeled btn-default" Text="Mobile Number"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtMobile" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtMobile" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtMobile" ErrorMessage="Invalid Number" ForeColor="#CC3300" ValidationExpression="\d{10}" ValidationGroup="reg"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">
                            <asp:Label ID="Label3" runat="server" CssClass="btn btn-labeled btn-default" Text="Email"></asp:Label>
                        </td>
                        <td class="td-align-left">
                            <asp:TextBox ID="txtEmail" CssClass="form-control" runat="server" ValidationGroup="reg"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="txtEmail" ErrorMessage="*" ForeColor="#FF0066" ValidationGroup="reg"></asp:RequiredFieldValidator>
                            <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ControlToValidate="txtEmail" ErrorMessage="Invalid Email" ForeColor="#CC3300" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="reg"></asp:RegularExpressionValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-align-Right">&nbsp;</td>
                        <td>
                            <asp:Button ID="Save" CssClass="btn-danger btn-sm" runat="server" Text="Save add new" OnClick="Save_Click" />&nbsp;
          <asp:Button ID="Update" CssClass="btn-danger btn-sm" runat="server" Text="save update" OnClick="Update_click" />&nbsp;
          <asp:Button ID="Reset" runat="server" CssClass="btn-danger btn-sm" Text="Reset" OnClick="Reset_Click" CausesValidation="False" />&nbsp;                                                
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    

    frmAddnew.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmAddnew : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void Save_Click(object sender, EventArgs e)
            {
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("insert into register values('" + txtName.Text + "','" + txtMobile.Text + "','" + txtEmail.Text + "')", con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('Register Sucessfully')", true);
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "redirect", "window.location.replace('./frmTab.aspx')", true);//refresh current page to reload data for your user control frmList
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
    
            }
    
            protected void Update_click(object sender, EventArgs e)
            {
    
                try
                {
                    con.Open();
                    //a valid update statement shall tell the SQL which row it's dealing with, i used the customer id as the condition here.
                    SqlCommand cmd = new SqlCommand("update register set name = '" + txtName.Text + "', mobile='" + txtMobile.Text + "', email='" + txtEmail.Text + "' where id="+hidUId.Value, con);
                    cmd.ExecuteNonQuery();
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "popup", "alert('upadate Sucessfully')", true);
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "redirect", "window.location.replace('./frmTab.aspx')", true);//refresh current page to reload data for your user control frmList
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Reset_Click(object sender, EventArgs e)
            {
                txtName.Text = string.Empty;
                txtMobile.Text = "";
                txtEmail.Text = "";
                txtName.Focus();
            }
        }
    }

    frmList.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="frmList.ascx.cs" Inherits="WebFormDemo01.frmList" %>
    
    <asp:UpdatePanel runat="server">
        <ContentTemplate>
            <div class="table-responsive">
    
                <asp:GridView ID="GridView1" AlternatingRowStyle-CssClass="alt" PagerStyle-CssClass="pgr" CssClass="SGrid" runat="server" AutoGenerateColumns="False">
    
                    <AlternatingRowStyle CssClass="alt" />
                    <Columns>
                        <asp:TemplateField HeaderText="Name">
                            <ItemTemplate>
                                <asp:HiddenField ID="hidId" Value='<%# Eval("id") %>' runat="server" /><%--use this to store customer id--%>
                                <asp:Label ID="Label4" runat="server" Text='<%# Eval("name") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Mobile Number">
                            <ItemTemplate>
                                <asp:Label ID="Label5" runat="server" Text='<%# Eval("mobile") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Email Id">
                            <ItemTemplate>
                                <asp:Label ID="Label6" runat="server" Text='<%# Eval("email") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:Button ID="bttEdit" runat="server" Text="Edit" OnClick="bttEdit_Click" Class="btn-primary" />
                                <asp:Label ID="lblEmail" runat="server" Text='<%#Eval("email") %>' Visible="false"></asp:Label>
    
                            </ItemTemplate>
                        </asp:TemplateField>
    
                    </Columns>
                    <PagerStyle CssClass="pgr" />
    
                </asp:GridView>
                <input type="hidden" runat="server" id="hiddEmail" />
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    

    frmList.ascx.cs:

    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Data.SqlClient;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace WebFormDemo01
    {
        public partial class frmList : System.Web.UI.UserControl
        {
            SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbConString"].ToString());
    
            protected void Page_Load(object sender, EventArgs e)
            {
                GridView();
            }
    
    
            protected void bttEdit_Click(object sender, EventArgs e)
            {
                GridViewRow row = ((Button)sender).Parent.Parent as GridViewRow;
                string index = row.Cells[0].ClientID.Substring(row.Cells[0].ClientID.Length - 1);//get in which row of Gridview the Edit button triggered this event
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "goEdit", "$('#dvTab a[href=\"#Edittab\"]').tab('show');$('#ContentPlaceHolder1_idEdittab').show();", true);//show the Edittab and the Edittab<a>
                ScriptManager.RegisterStartupScript(Page, this.GetType(), "PassValue", "Pass("+index+")", true);//fire the pass(row) method to pass values
            }
    
    
            protected void GridView()
            {
    
                try
                {
                    con.Open();
                    SqlCommand cmd = new SqlCommand("select * from register", con);
                    SqlDataAdapter adp = new SqlDataAdapter(cmd);
                    DataSet ds = new DataSet();
                    adp.Fill(ds);
                    if (ds.Tables[0].Rows.Count > 0)
                    {
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                    }
                    else
                    {
                        ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
                        GridView1.DataSource = ds;
                        GridView1.DataBind();
                        int columncount = GridView1.Rows[0].Cells.Count;
                        GridView1.Rows[0].Cells.Clear();
                        GridView1.Rows[0].Cells.Add(new TableCell());
                        GridView1.Rows[0].Cells[0].ColumnSpan = columncount;
                        GridView1.Rows[0].Cells[0].Text = "No Records Found";
                    }
                }
                catch (Exception ex)
                {
                    ScriptManager.RegisterStartupScript(Page, this.GetType(), "Error", "alert('" + "ERROR : " + ex.Message.ToString() + "')", true);
                }
                finally
                {
                    con.Close();
                }
            }
    
            protected void Button1_Click(object sender, EventArgs e)
            {
    
            }
        }
    }

    Here's the result of this demo:

    PS: There is no problem with your English language skills. Please mark this post as the answer if it helps. Thanks!

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 21, 2020 2:52 AM
  • User-475949336 posted

    Dear Yang shen, in spite of you are busy but save time help me

    It's very wonderful,  that is my hope. I think i can't do it if without your help.

    very thanks my best fiend

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 21, 2020 4:17 AM
  • User-475949336 posted

    marked answer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, March 21, 2020 5:36 PM
  • User-475949336 posted

    this is all my project

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, March 23, 2020 8:29 AM