How to Show / Filter Images Based on Folder and File Name using C# in ASP.Net

Last Reply on Feb 09, 2017 01:56 AM By AnandM

Posted on Feb 08, 2017 02:08 AM

 This code is working good but it has two issues

1st Is ALL link button should display images from both folderthey should be stable means it should be avaiable on page withoutany click.

2nd Is both gallery and category folder have only one imagein the folder .But it display same image 2time when when i click on Icon it display me image from category folder.But categoryfolder has inly one image but it display two image and both are same .Same problem is with 

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script type="text/javascript">
        $(function () {
            $('#menu ul li a').click(function () {
                var selectedLink = $(this)[0].innerHTML
                localStorage.setItem('selectedLink', selectedLink);
            });
        });
        window.onload = function () {
            var div = document.getElementById("product");
            var div_position = document.getElementById("div_position");
            var position = parseInt('<%=Request.Form["div_position"] %>');
            if (isNaN(position)) {
                position = 0;
            }
            div.scrollTop = position;
            div.onscroll = function () {
                div_position.value = div.scrollTop;
            };
            $('#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>

 

<div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <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" runat="server" />
                            </li>
                            <li>
                                <asp:LinkButton ID="lnkBestSellers" CssClass="btn btn-block" Text="ICON" runat="server"
                                    OnClick="bindimages" />
                            </li>
                            <li>
                                <asp:LinkButton ID="lnkNewestAdded" CssClass="btn btn-block" Text="Display"
                                    runat="server" OnClick="BindAllImages" />
                            </li>
                        </ul>
                    </div>
                    <br />
                    <br />
                    <br />
                    &nbsp;&nbsp;&nbsp;
                    <div id="product" runat="server">
                    </div>
                    <input type="hidden" id="div_position" name="div_position" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <div>
        </div>
    </div>
</asp:Content>

 

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

    protected void bindimages(object sender, EventArgs e)
    {
        clsGallery objpp = new clsGallery(true);
        //objProduct.getProduct();
        objpp.getCatPro();
        string str = string.Empty;
        int j = 0;
        for (j = 0; j < objpp.ListclsGallery.Count; j++)
        {
            // string path = objProduct.ListclsProductMain[i].ProductID+".jpg";
            string[] filePaths = Directory.GetFiles(Server.MapPath("~/Backoffice/images/Category/"));
            int i = 0;
            foreach (string filePath in filePaths)
            {
                string fileName = Path.GetFileName(filePath);
                str += @"
                    <div class='imageBackGround' style='width:250px;height:280px;'>
                      <div class='multiple-items'>'
                             <div><div><img class='imges' src=" + ConfigurationManager.AppSettings["path"].ToString() + "Backoffice/images/Category/" + fileName + @" /></div>                                
                </div></div></div>";
                i++;
            }
            product.InnerHtml = str;
        }
    }

    public void BindImagesOnPageStart()
    {
     clsGallery objpp = new clsGallery(true);
     //objProduct.getProduct();
        objpp.getCatPro();
        string str = string.Empty;
        int j = 0;
        for (j = 0; j < objpp.ListclsGallery.Count; j++)
        {
            // string path = objProduct.ListclsProductMain[i].ProductID+".jpg";
            string[] filePaths = Directory.GetFiles(Server.MapPath("~/Backoffice/images/Gallery/"));
            int i = 0;
            foreach (string filePath in filePaths)
            {
                string fileName = Path.GetFileName(filePath);
                str += @"
                    <div class='imageBackGround' style='width:250px;height:280px;'>
                      <div class='multiple-items'>'
                             <div><div><img class='imges' src=" + ConfigurationManager.AppSettings["path"].ToString() + "Backoffice/images/Gallery/" + fileName + @" /></div>                                
                </div></div></div>";
                i++;
            }
            product.InnerHtml = str;
        }
    }
    protected void BindAllImages(object sender, EventArgs e)
    {
        BindImagesOnPageStart();
    }
}

This code is working good but it has two issues.

1st is All button should display images from both the folder it must be stable.Means it should remain same without any click.

2nd is when i  click on icon it display images but it has only one image in the folder but it display same image twice.Same problem is with other button.As per my observation this is happening bcz of problem in loop may be please help me.

Posted on Feb 09, 2017 01:56 AM Modified on on Feb 09, 2017 02:00 AM

Hi jordan,

Refer below code

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

protected void bindimages(object sender, EventArgs e)
{
    product.InnerHtml = "";
    string str = string.Empty;
    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Backoffice/images/Category/"));
    int i = 0;
    foreach (string filePath in filePaths)
    {
        string fileName = Path.GetFileName(filePath);
        str += @"
            <div class='imageBackGround' style='width:250px;height:280px;'>
                <div class='multiple-items'>'
                        <div><div><img class='imges' src=" + ConfigurationManager.AppSettings["path"].ToString() + "Backoffice/images/Category/" + fileName + @" /></div>
        </div></div></div>";
        i++;
    }
    product.InnerHtml = str;
}

public void BindImagesOnPageStart()
{
    product.InnerHtml = "";
    string str = string.Empty;
    string[] GalleryfilePaths = Directory.GetFiles(Server.MapPath("~/Backoffice/images/Gallery/"));
    string[] CategoryfilePaths = Directory.GetFiles(Server.MapPath("~/Backoffice/images/Category/"));

    for (int i = 0; i < GalleryfilePaths.Length; i++)
    {
        string fileName = Path.GetFileName(GalleryfilePaths[i]);
        str += @" <div class='imageBackGround' style='width:250px;height:280px;'>
                    <div class='multiple-items'>
                        <div><div><img class='imges' src=" + ConfigurationManager.AppSettings["path"].ToString() + "Backoffice/images/Category/" + fileName + @" /></div>
                </div></div></div>";
    }

    for (int i = 0; i < CategoryfilePaths.Length; i++)
    {
        bool fileExist = false;
        string categoryfileName = Path.GetFileName(CategoryfilePaths[i]);

        for (int j = 0; j < GalleryfilePaths.Length; j++)
        {
            string galleryfileName = Path.GetFileName(GalleryfilePaths[j]);
            if (categoryfileName == galleryfileName)
            {
                fileExist = true;
                break;
            }
        }

        if (!fileExist)
        {
            str += @"<div class='imageBackGround' style='width:250px;height:280px;'>
                        <div class='multiple-items'>
                            <div><div><img class='imges' src=" + ConfigurationManager.AppSettings["path"].ToString() + "Backoffice/images/Category/" + categoryfileName + @" /></div>
                    </div></div></div>";
        }
    }

    product.InnerHtml = str;
}

protected void BindAllImages(object sender, EventArgs e)
{
    BindImagesOnPageStart();
}