Maintain LinkButton Fore Color on Postback using JQuery in ASP.Net

nedash

SOLVED CLOSED ACTIVE ANSWERED
User: nedash
Posted: on Jun 17, 2016 06:50 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 6098
Sample Code: Download

I have 2 page:

1-default.aspx and 2-software.aspx

in default.aspx I define megamenu that bind from database below is code:

<li><a href="#">Software</a>
         <div id="mega6"></div>
	<ul>
		  <asp:Repeater ID="Rptfilm" runat="server">
                                <ItemTemplate>
                                    <li><a href='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>' target="_blank">
                                        <%#Eval("Secondclass")%></a></li>
                                </ItemTemplate>
                            </asp:Repeater>
		
	</ul>
</li>
    <li><a href="#">System</a>
         <div id="mega7"></div>
    <ul>

             <asp:Repeater ID="rptSystem" runat="server">
                                <ItemTemplate>
                                    <li><a href='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>' target="_blank">
                                        <%#Eval("Secondclass")%></a></li>
                                </ItemTemplate>
                            </asp:Repeater>

    </ul>
</li>

whan users click on Item from repeater it will go to software.aspx:

<a href='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>' target="_blank">                                       <%#Eval("Secondclass")%></a>

and in sotware.aspx it will bind datalist according to users selected Item form megamenu:

     if (!IsPostBack)
        {
            if (Request.QueryString["Secondclass"] != null)
            {
                this.GetCustomersPageWise(1);
            }
}

and

    private void GetCustomersPageWise(int pageIndex)
    {
        string Secondclass = Request.QueryString["Secondclass"];
        using (SqlConnection conn = General.GetConnection())
        {
            using (SqlCommand cmd = General.GetCommand("GetCustomersPageWiseSoft", conn))
            {
                cmd.CommandType = CommandType.StoredProcedure;               cmd.Parameters.AddWithValue("@PageIndex", pageIndex);                cmd.Parameters.AddWithValue("@PageSize", PageSize);               cmd.Parameters.AddWithValue("@Search", TxtsearchI.Text);              cmd.Parameters.AddWithValue("@SecondClass", Secondclass);
                cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);              cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
                conn.Open();
                SqlDataReader idr = cmd.ExecuteReader();
                if (idr.HasRows)
                {
                    DLSoft.DataSource = idr;
                    DLSoft.DataBind();
                    rptPager.Visible = !(rptPager2.Visible = false);
                }
                idr.Close();               this.PopulatePager(Convert.ToInt32(cmd.Parameters["@RecordCount"].Value), pageIndex);
            }
        }
    }

now In software.aspx I define 2 datalist that bind from database and it will show Items that I bind that Items in megamenu in default.aspx

below is default.aspx page with megamenu:

there is two repeater that bind it from database and put it in megamenu...

and below is software.aspx page that I put 2 datalist on it and bind from database it will show Items that I put in megamenu I show Items with red and green arrow in both pages:

and codes:

                                                 <asp:DataList ID="Dlsystem" runat="server">
    <ItemTemplate>
        <asp:LinkButton ID="Linkbtnclass" runat="server" CssClass="lbldasteMS" CommandArgument='<%# Eval("Secondclass") %>'
            OnClick="Linkbtnclass_Click"><%# Eval("Secondclass") %></asp:LinkButton>
        <div id="MM31S">
        </div>
    </ItemTemplate>
</asp:DataList>

                                                       
                             <asp:DataList ID="DLclass" runat="server">
    <ItemTemplate>
        <asp:LinkButton ID="Linkbtnclass" runat="server" CssClass="lbldasteMS" CommandArgument='<%# Eval("Secondclass") %>'
            OnClick="Linkbtnclass_Click"><%# Eval("Secondclass") %></asp:LinkButton>
        <div id="MM31S">
        </div>
    </ItemTemplate>
</asp:DataList>

and:

  BindDataList(DLclass, "Filmmenu");
        BindDataList(Dlsystem, "SystemMenu");

now I want when I chose Item from megamenu in default.apx when I redirct to software.aspx it will change text's color of Item in datalist that I select that Item from megamenu:

see example here in default.aspx page I select item that I show with blue arrow:

now I want when it will go to software.aspx it will change text's color that I select from defualt.aspx like:

how I can do it?

Best Regards

Neda

dharmend...

0 15

Reply
ANSWER
User: dharmendr
Replied: on Jun 28, 2016 08:05 AM
Modified: on Sep 15, 2017 06:19 AM
Report

Hi nedash,

Here I have created sample that full-fill your requirement.

HTML

Default.aspx

<div>
    <li><a href="#">Software</a>
        <div id="mega6">
        </div>
        <ul>
            <asp:Repeater ID="Rptfilm" runat="server">
                <ItemTemplate>
                    <li><a href='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>' target="_blank">
                        <%#Eval("Secondclass")%></a></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </li>
    <li><a href="#">System</a>
        <div id="mega7">
        </div>
        <ul>
            <asp:Repeater ID="rptSystem" runat="server">
                <ItemTemplate>
                    <li><a href='<%#"software.aspx?Secondclass="+Eval("Secondclass")%>' target="_blank">
                        <%#Eval("Secondclass")%></a></li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
    </li>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            localStorage.removeItem('SelectedMenu');
            $('li a').on('click', function () {
                localStorage.setItem("SelectedMenu", $(this)[0].innerHTML);
            });
        }); 
    </script>
</div>

Software.aspx

<div>
    <div id="dvMenu">
        <li><a href="#">Software</a>
            <ul>
                <asp:DataList runat="server" ID="dlfilm">
                    <ItemTemplate>
                        <li><a href="#" target="_blank">
                            <%#Eval("Secondclass")%></a></li>
                    </ItemTemplate>
                </asp:DataList>
            </ul>
        </li>
        <li><a href="#">System</a>
            <ul>
                <asp:DataList ID="dlSystem" runat="server">
                    <ItemTemplate>
                        <li><a href="#" target="_blank">
                            <%#Eval("Secondclass")%></a></li>
                    </ItemTemplate>
                </asp:DataList>
            </ul>
        </li>
    </div>
</div>
<div>
    <style type="text/css">
        .SelectedActiveMenu
        {
            color: Red !important;
        }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selctedMenuHtml = localStorage.getItem('SelectedMenu');
            var selectedMenu = $.grep($('[id*=dvMenu] ul a'), function (ele) {
                return $(ele).html().trim() == selctedMenuHtml.trim();
            }).pop();
            $(selectedMenu).addClass('SelectedActiveMenu');
        });
    </script>
</div>

Code

Default.aspx

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dtSystem = new DataTable();
        dtSystem.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtSystem.Rows.Add(1, "ورژن های مختلف ویندوز");
        dtSystem.Rows.Add(2, "مکینتاش Mac Os");
        dtSystem.Rows.Add(2, "مکینتاش Linux");
        rptSystem.DataSource = dtSystem;
        rptSystem.DataBind();

        DataTable dtfilm = new DataTable();
        dtfilm.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtfilm.Rows.Add(1, "نرم افزار های برنامه نویسی");
        dtfilm.Rows.Add(2, "انیمیشن سازی");
        dtfilm.Rows.Add(3, "نرم افزار های طراحی");
        Rptfilm.DataSource = dtfilm;
        Rptfilm.DataBind();
    }
}

Software.aspx

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dtSystem = new DataTable();
        dtSystem.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtSystem.Rows.Add(1, "ورژن های مختلف ویندوز");
        dtSystem.Rows.Add(2, "مکینتاش Mac Os");
        dtSystem.Rows.Add(2, "مکینتاش Linux");
        dlSystem.DataSource = dtSystem;
        dlSystem.DataBind();

        DataTable dtfilm = new DataTable();
        dtfilm.Columns.AddRange(new DataColumn[2] { new DataColumn("Id", typeof(int)), new DataColumn("Secondclass", typeof(string)) });
        dtfilm.Rows.Add(1, "نرم افزار های برنامه نویسی");
        dtfilm.Rows.Add(2, "انیمیشن سازی");
        dtfilm.Rows.Add(3, "نرم افزار های طراحی");
        dlfilm.DataSource = dtfilm;
        dlfilm.DataBind();
    }
}

Screenshot

Maintain LinkButton Fore Color on Postback using JQuery in ASP.Net

Company

Explore

Follow us

Contact Us