locked
refresh only part of page whit tabs RRS feed

  • Question

  • User-768668810 posted

    Hello,

    I have a master page and one content page.

    In the content page i have tabs .Each tab is a button and when clicking on the button(tab) it activate the according view.

    In each view i have a usercontrol that have gridView with data that is loaded.

    My problem is that when i click on a tab it will refresh the whole page and will call in each page load event of all the usercontrol of each view.

    How can i change my code so that when clicking on a tab it will only load the page load event of this tab.

    Thank you

    <%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.master" CodeBehind="Main.aspx.cs" Inherits="SysManagement.Main" EnableEventValidation="false" %>
    
    
    <%@ Register Src="~/WebUserControl_Users.ascx" TagName="UsersControl" TagPrefix="TWebControl" %>
    <%@ Register Src="~/WebUserControl_Equipments.ascx" TagName="EquipmentsControl" TagPrefix="TWebControl" %>
    <%@ Register Src="~/WebUserControl_OpSys.ascx" TagName="OpSysControl" TagPrefix="TWebControl" %>
    
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    
    <table width="100%" align="center">
    <tr>
    <td>
    
    
    <asp:Button Text="user" BorderStyle="None" ID="TabUser" CssClass="Initial" runat="server" OnClick="TabUser_Click" />
    <asp:Button Text="equipment" BorderStyle="None" ID="TabEquipment" CssClass="Initial" runat="server" OnClick="TabEquipment_Click" />
    <asp:Button Text="operating sys" BorderStyle="None" ID="TabOpSys" CssClass="Initial" runat="server" OnClick="TabOpSys_Click" />
    <asp:MultiView ID="MainView" runat="server">
    <asp:View ID="ViewUser" runat="server">
    <TWebControl:UsersControl ID="Tab_users" runat="server" />
    </asp:View>
    <asp:View ID="ViewEquipment" runat="server">
    <TWebControl:EquipmentsControl ID="Tab_equipments" runat="server" />
    </asp:View>
    <asp:View ID="ViewOpSys" runat="server">
    <TWebControl:OpSysControl ID="Tab_opsys" runat="server" />
    </asp:View>
    
    </asp:MultiView>
    </td>
    </tr>
    </table>
    
    
    </asp:Content>
    
    //in the content page server side event when clicking on the button to activate the view.
    protected void TabUser_Click(object sender, EventArgs e)
    {
    
    TabUser.CssClass = "Clicked";
    TabEquipment.CssClass = "Initial";
    TabOpSys.CssClass = "Initial";
    MainView.ActiveViewIndex = 0;
    
    }
    
    //in the usercontrol server side function to bind the grid
    public partial class WebUserControl_Frequency : System.Web.UI.UserControl
    {
    protected void Page_Load(object sender, EventArgs e)
    {
    if(!IsPostBack)
    {
    BindGridFrequency();
    }
    }
    {

    Thursday, May 2, 2019 10:33 AM

All replies

  • User283571144 posted

    My problem is that when i click on a tab it will refresh the whole page and will call in each page load event of all the usercontrol of each view.

    How can i change my code so that when clicking on a tab it will only load the page load event of this tab.

    To achieve the above requirement, you can try adding an updatepanel to the outer table of the page you are providing. This will ensure that the whole page will not be refreshed when you click the button.

    To make sure it enters only the page_load event of the current user control while clicking a tab button, I recommend that you dynamically load the corresponding user control in the click event. Below is a working sample, you can refer to it.

        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    <asp:Button Text="user" BorderStyle="None" ID="TabUser" CssClass="Initial" runat="server" OnClick="TabUser_Click" />
                                    <asp:Button Text="equipment" BorderStyle="None" ID="TabEquipment" CssClass="Initial" runat="server" OnClick="TabEquipment_Click" />
                                    <asp:Button Text="operating sys" BorderStyle="None" ID="TabOpSys" CssClass="Initial" runat="server" OnClick="TabOpSys_Click" />
                                    <asp:MultiView ID="MainView" runat="server">
                                        <asp:View ID="ViewUser" runat="server">
                                        </asp:View>
                                    </asp:MultiView>
                                </td>
                            </tr>
                        </table>
                    </ContentTemplate>
                </asp:UpdatePanel>
        </form>
    
    

    code behind

            protected void TabUser_Click(object sender, EventArgs e)
            {
                Control ctrl = Page.LoadControl("~/Cases/UserControls/Tabusers.ascx");
                ViewUser.Controls.Clear();
                ViewUser.Controls.Add(ctrl);
                TabUser.CssClass = "Clicked";
                TabEquipment.CssClass = "Initial";
                TabOpSys.CssClass = "Initial";
                MainView.ActiveViewIndex = 0;
                
            }
    
            protected void TabEquipment_Click(object sender, EventArgs e)
            {
                Control ctrl = Page.LoadControl("~/Cases/UserControls/Tab_equipments.ascx");
                ViewUser.Controls.Clear();
                ViewUser.Controls.Add(ctrl);
                TabUser.CssClass = "Initial";
                TabEquipment.CssClass = "Clicked";
                TabOpSys.CssClass = "Initial";
                MainView.ActiveViewIndex = 0;
            }
    
            protected void TabOpSys_Click(object sender, EventArgs e)
            {
                Control ctrl = Page.LoadControl("~/Cases/UserControls/Tab_opsys.ascx");
                ViewUser.Controls.Clear();
                ViewUser.Controls.Add(ctrl);
                TabUser.CssClass = "Initial";
                TabEquipment.CssClass = "Initial";
                TabOpSys.CssClass = "Clicked";
                MainView.ActiveViewIndex = 0;
               
            }
    

    Test Result:

    Best Regards,

    Brando

    Friday, May 3, 2019 6:41 AM
  • User-768668810 posted

    Thank you so much Brando,

    It works but i have now another problem:

    In each webcontrol i have a gridview and the grid have buttons in the TemplateField(to save,edit,update,delete) each button have a function in the server side when clicking this button.

    but now when i click the button to add a new row for example ,nothing happens and the server sides is not called.

    i remember you that the update panel is on in the content page with multiple views that load each time a webusercontrol that contain a gridview.

    how can i make it works?

    thank you for your help

    <asp:GridView ID="gridViewFrequency" runat="server" BackColor="WhiteSmoke" BorderColor="#999999"
    BorderStyle="Solid" BorderWidth="1px" CellPadding="4" CellSpacing="2"
    Font-Size="Medium" ForeColor="#4B6C9E" HorizontalAlign="Center"
    AutoGenerateColumns="False" DataKeyNames="id" CssClass="gv1" Font-Bold="True" ShowFooter="true"
    OnRowDataBound="gridView_RowDataBound" AutoGenerateEditButton="false" OnSelectedIndexChanged="gridView_SelectedIndexChanged" OnRowCancelingEdit="gridViewFrequency_RowCancelingEdit" OnRowEditing="gridViewFrequency_RowEditing" OnRowUpdating="gridViewFrequency_RowUpdating" OnRowDeleting="gridViewFrequency_RowDeleting">
    <Columns>
    <asp:TemplateField ItemStyle-Width="15%">
    <ItemTemplate>
    <asp:Button ID="ButtonEdit" runat="server" ToolTip="עדכן" CommandName="Edit" CssClass="editBtn" />
    <asp:Button ID="ButtonDelete" runat="server" ToolTip="מחק" CommandName="Delete" OnClientClick="return confirm('?האם הנך בטוח שברצונך למחוק');" CssClass="deleteBtn" />
    
    </ItemTemplate>
    <EditItemTemplate>
    <asp:Button ID="ButtonUpdate" runat="server" ToolTip="שמור" CommandName="Update" CssClass="updateBtn" />
    <asp:Button ID="ButtonCancel" runat="server" ToolTip="בטל" CommandName="Cancel" CssClass="cancelBtn" />
    </EditItemTemplate>
    <FooterTemplate>
    <asp:Button ID="ButtonAdd" runat="server" ToolTip="שמור" CommandName="Update" OnClick="ButtonAddFrequency_Click" CssClass="updateBtn" />
    <asp:Button ID="ButtonCancel" runat="server" ToolTip="בטל" CommandName="Cancel" CssClass="cancelBtn" />
    </FooterTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="id" HeaderText="id" Visible="false" />......

    Thursday, May 16, 2019 8:17 AM
  • User665608656 posted

    Hi carol,

    According to your description,the reason why the data in the user control disappears when clicking on the button is that the user control is not rebounded when page reload.

    If the click event is created in the code behind, the page cannot distinguish which user control you want to show after click on when loading.

    So I suggest that you write the click event in the foreground jquery.Then pass different parameters through a HiddenField control to load different user controls.

    Note that since jQuery rewrites some controls after pageload events, it is necessary to rebind tab click events in the add_endRequest event of PageRequestManager.

    For more detailed code, please refer to the following code:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <style type="text/css">
            .Initial {
                background-color: AppWorkspace;
            }
            .Clicked {
                background-color: burlywood;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                loadFunc();
            });
            function loadFunc() {
                 $("#TabUser").on("click", function () {
                    $("#HiddenField1").val("TabUser");
    
                });
                $("#TabEquipment").on("click", function () {
                    $("#HiddenField1").val("TabEquipment");
    
                });
                $("#TabOpSys").on("click", function () {
                    $("#HiddenField1").val("TabOpSys");
                });
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <div>
                <asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
                    <ContentTemplate>
                        <script type="text/javascript">
                            var prm = Sys.WebForms.PageRequestManager.getInstance();
                            prm.add_endRequest(function () {
                                loadFunc();
                            });
                        </script>
                        <table style="width: 100%">
                            <tr>
                                <td>
                                    <asp:Button Text="user" BorderStyle="None" ID="TabUser" CssClass="Initial" runat="server" />
                                    <asp:Button Text="equipment" BorderStyle="None" ID="TabEquipment" CssClass="Initial" runat="server" />
                                    <asp:Button Text="operating sys" BorderStyle="None" ID="TabOpSys" CssClass="Initial" runat="server" />
                                    <asp:MultiView ID="MainView" runat="server">
                                        <asp:View ID="ViewUser" runat="server">
                                        </asp:View>
                                    </asp:MultiView>
                                </td>
                            </tr>
                        </table>
                        <asp:HiddenField ID="HiddenField1" runat="server" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </form>
    </body>
    </html>

    code behind:

           protected void Page_Load(object sender, EventArgs e)
            {
                if (HiddenField1.Value == "TabUser")
                {
                    ShowTabUser();
                }
                else if (HiddenField1.Value == "TabEquipment")
                {
                    ShowTabEquipment();
                }
                else if (HiddenField1.Value == "TabOpSys")
                {
                    ShowTabOpSys();
                }
            } 
           public void ShowTabUser()
            {
                Control ctrl = Page.LoadControl("~/Codes/UserControls/Tabusers.ascx");
                ViewUser.Controls.Clear();
                ViewUser.Controls.Add(ctrl);
                TabUser.CssClass = "Clicked";
                TabEquipment.CssClass = "Initial";
                TabOpSys.CssClass = "Initial";
                MainView.ActiveViewIndex = 0;
            }
            public void ShowTabEquipment()
            {
                Control ctrl = Page.LoadControl("~/Codes/UserControls/Tab_equipments.ascx");
                ViewUser.Controls.Clear();
                ViewUser.Controls.Add(ctrl);
                TabUser.CssClass = "Initial";
                TabEquipment.CssClass = "Clicked";
                TabOpSys.CssClass = "Initial";
                MainView.ActiveViewIndex = 0;
            }
            public void ShowTabOpSys()
            {
                Control ctrl = Page.LoadControl("~/Codes/UserControls/Tab_opsys.ascx");
                ViewUser.Controls.Clear();
                ViewUser.Controls.Add(ctrl);
                TabUser.CssClass = "Initial";
                TabEquipment.CssClass = "Initial";
                TabOpSys.CssClass = "Clicked";
                MainView.ActiveViewIndex = 0;
            }
    

    The result of my work demo:    

       


    Best Regards,

    YongQing.

    Monday, May 20, 2019 9:18 AM