Display all product on page load using C# and jQuery in ASP.Net

jordan

SOLVED CLOSED ACTIVE ANSWERED
User: jordan
Posted: on Jan 13, 2017 02:13 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 3498

I have used menu that is like button.

when i click on it it will display image.Butwhat i want my first button should be stable it will display image everytime without any click.and other two button should display image at the time of click.

Here is my image of problemswhen i dont click button it is not displaying me anything .So i want that allproduct should display images without click of button.Means it's should be stable.where as other button should display image when they are click.In this image i am not getting image bcz i have not click button.

where as this image show the items that are been selected.And 1st image it display nothing bcz button are not selected.where as it display image bcz button as been click. so what i want is allproduct button should display image without click image only two other button should show image after it's been click.

 <script type="text/javascript">
        $(function () {
            $('#menu ul li a').click(function () {
                var selectedLink = $(this)[0].innerHTML
                localStorage.setItem('selectedLink', selectedLink);
            });
        });
        window.onload = function () {
            $('#menu ul li a').each(function () {
                if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {
                    $(this).attr('style', 'background-color:deeppink');
                    localStorage.removeItem('selectedLink');
                }
                else {
                    $(this).attr('style', 'background-color:none');
                }
            });
        }
    </script>

 <div class="container">
        <div id="menu">
            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <asp:LinkButton ID="lnkAllProducts" CssClass="btn btn-block" Text="All Products"
                        runat="server" OnClick="BindImages" />
                </li>
                <li>
                    <asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="Best Sellers"
                        runat="server" />
                </li>
                <li>
                    <asp:LinkButton ID="lnkNewestAdded" CssClass="btn btn-block" Text="Newest Added"
                        runat="server" />
                </li>
            </ul>
        </div>
        <br />
        <br />
        <br />
        <div id="product" runat="server">
        </div>
    </div>

protected void BindImages(object sender, EventArgs e)
    {
       
        clsProductPearlMain objpp = new clsProductPearlMain(true);
       
        //   objProduct.getProduct();
        objpp.getCatPro();
        string str = string.Empty;
       
        int j = 0;
        
        
            for (j = 0; j < objpp.ListclsProductPearlMain.Count; j++)
            {
              
                    // string path = objProduct.ListclsProductMain[i].ProductID+".jpg";
                    if (File.Exists(Server.MapPath("images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg")))
                    {
                        str += @"<div class='row col-md-3 col-xs-6 hovereffect'>
                        <div class='imageBackGround' style='width:250px;height:280px;'>
                        <img class='imges'  style='height:220px;' src='images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg" + @"' />
                            <p class='sname'>" + objpp.ListclsProductPearlMain[j].ProductName + @"</p>
                        <p class='sname2'>" + objpp.ListclsProductPearlMain[j].MRP + @"</p></div><br/>
        </div>";
                    }
                   
                }
         
            
        //}
        
        product.InnerHtml = str;
    }

this are my code

Download FREE API for Word, Excel and PDF in ASP.Net

AnandM

0 1

Reply
ANSWER
User: AnandM
Replied: on Jan 13, 2017 04:46 AM
Report

jordan says:
        clsProductPearlMain objpp = new clsProductPearlMain(true);



        //   objProduct.getProduct();

        objpp.getCatPro();

        string str = string.Empty;



        int j = 0;





            for (j = 0; j < objpp.ListclsProductPearlMain.Count; j++)

            {



                    // string path = objProduct.ListclsProductMain[i].ProductID+".jpg";

                    if (File.Exists(Server.MapPath("images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg")))

                    {

                        str += @"<div class='row col-md-3 col-xs-6 hovereffect'>

                        <div class='imageBackGround' style='width:250px;height:280px;'>

                        <img class='imges' style='height:220px;' src='images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg" + @"' />

                            <p class='sname'>" + objpp.ListclsProductPearlMain[j].ProductName + @"</p>

                        <p class='sname2'>" + objpp.ListclsProductPearlMain[j].MRP + @"</p></div><br/>

        </div>";

                    }



                }





        //}



        product.InnerHtml = str;

Place above code in different method and call that method in pageload event like below

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

public void BindImagesOnPageStart()
{
    clsProductPearlMain objpp = new clsProductPearlMain(true);

    //   objProduct.getProduct();
    objpp.getCatPro();
    string str = string.Empty;
    int j = 0;
    for (j = 0; j < objpp.ListclsProductPearlMain.Count; j++)
    {
        // string path = objProduct.ListclsProductMain[i].ProductID+".jpg";
        if (File.Exists(Server.MapPath("images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg")))
        {
            str += @"<div class='row col-md-3 col-xs-6 hovereffect'>
                    <div class='imageBackGround' style='width:250px;height:280px;'>
                    <img class='imges'  style='height:220px;' src='images/ProductPearl/" + objpp.ListclsProductPearlMain[j].ProductID + ".jpg" + @"' />
                        <p class='sname'>" + objpp.ListclsProductPearlMain[j].ProductName + @"</p>
                    <p class='sname2'>" + objpp.ListclsProductPearlMain[j].MRP + @"</p></div><br/>
    </div>";
        }
    }
    //}
    product.InnerHtml = str;
}

jordan says:
<script type="text/javascript">

       $(function () {

           $('#menu ul li a').click(function () {

               var selectedLink = $(this)[0].innerHTML

               localStorage.setItem('selectedLink', selectedLink);

           });

       });

       window.onload = function () {

           $('#menu ul li a').each(function () {

               if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {

                   $(this).attr('style', 'background-color:deeppink');

                   localStorage.removeItem('selectedLink');

               }

               else {

                   $(this).attr('style', 'background-color:none');

               }

           });

       }

   </script>

replace above script with below

<script type="text/javascript">
    $(function () {
        $('#menu ul li a').click(function () {
            var selectedLink = $(this)[0].innerHTML
            localStorage.setItem('selectedLink', selectedLink);
        });
    });
    window.onload = function () {
        $('#menu ul li a').each(function () {
            if ($(this)[0].innerHTML == localStorage.getItem('selectedLink')) {
                $(this).attr('style', 'background-color:deeppink');
            }
            else {
                $(this).attr('style', 'background-color:none');
                if (localStorage.getItem('selectedLink') == null) {
                    $('[id*=lnkAllProducts]').attr('style', 'background-color:deeppink');
                }
            }
        });
    }
</script>

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display all product on page load using C# and jQuery in ASP.Net

Company

Explore

Follow us

Contact Us