refresh only part of page whit tabsRSS

3 replies

Last post May 20, 2019 09:18 AM by Yongqing Yu

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

carol254

None

0 Points

3 Posts

refresh only part of page whit tabs

May 02, 2019 10:33 AM|carol254|LINK

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

Brando ZWZ

Star

9801 Points

3120 Posts

Re: refresh only part of page whit tabs

May 03, 2019 06:41 AM|Brando ZWZ|LINK

carol254

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

carol254

None

0 Points

3 Posts

Re: refresh only part of page whit tabs

May 16, 2019 08:17 AM|carol254|LINK

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" />......

Yongqing Yu

Contributor

3680 Points

1042 Posts

Re: refresh only part of page whit tabs

May 20, 2019 09:18 AM|Yongqing Yu|LINK

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.

MSDN Community Support

Please remember to click "Mark as Answer" the responses that resolved your issue.

If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›