connectseekers.com

Thursday, 9 June 2016

Dynamically Display Images From Folder By Ajax Using jQuery In Asp.net ,C#

6/09/2016 - By Pranav Singh 0

This article will show ow you can fetch all the image files present in the a folder using jQuery by ajax call or without refreshing the page by using jQuery in asp.net and c#.Net.
So for this article first we will create a new asp.net application. In this application first we will add new folders named as “Ajax” and “Images”. These two folders as named one is used for adding ajax request file and other for adding the images.


Now we will add a page.in this page we will add the below code.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm16.aspx.cs" Inherits="WebApplication7.WebForm16" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dynamically Display Images From Folder Using jQuery In Asp.net ,C#</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
    <script language="javascript">
        function AjaxGetImage() {
            var searchUrl = "Ajax/AjaxPage.aspx";
            $("#btnGetImage").attr({ 'value': 'Please wait..' });
            $.ajax({
                url: searchUrl,
                type: "POST",
                success: function (data) {
                    alert(data);
                    $("#divImages").html(data);
                    $("#btnGetImage").attr({ 'value': 'Click To Get Image' });
                }
            });
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <input type="button" value="Click To Get Image" id="btnGetImage" onclick="javascript: AjaxGetImage();" />
        <div id="divImages">
        </div>
    </form>
</body>
</html>

In above code I have created a function which will create an ajax call with the ajax page known as AjaxPage.aspx present in “Ajax” folder. This function has been called on button click and as the ajax request will return the result it will bind it to the div control.
Now we will add an page into ajax folder known as AjaxPage.aspx.


Now we will clear all the tags present in the page except the page tag. After clearing all the content your page will look as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxPage.aspx.cs" Inherits="WebApplication7.Ajax.AjaxPage" %>

Now we will create a code to read the folder and return it to the ajax.
 
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication7.Ajax
{
    public partial class AjaxPage : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string directoryPath = @"~\Images\";
            string[] fileEntries = Directory.GetFiles(Server.MapPath(directoryPath));
            string imageContent = "";
            foreach (string fileName in fileEntries)
            {
                imageContent = imageContent + "<div  style=\"float: left;\"><img src='Images\\" + System.IO.Path.GetFileName(fileName) + "'/></div>";
            }
            Response.Write(imageContent);
        }
    }
}


In above code I have read all the files present in the images folder. And then generating tag for returning as output string to bind it to display.

Now we have done run the application to check the output.First we will add an image file and click on button to check the output.

Now click on button


Now add the second or more file to check the output.

Now check the output.

 DOWNLOAD

About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top