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.
Some of my
previous articles are as follows: Ajax
GridView Shorting Without Page Refresh Using jQuery In Asp.net and C#.Net, Export
GridView Or Table Data Into PDF By C#.Net In Asp.Net Using jQuery, Asp.Net
Ajax MaskedEdit With Validation In Asp.Net Using C#, Confirmation
Message With Yes, No Button In Asp.Net Using ConfirmButtonExtender and
ModalPopupExtender,
Ajax
Call Using UpdatePanel Display Data On Button Click Without Refresh In Asp.Net,
C#, jQuery
Ajax Duplicate UserId Validation in Asp.Net Without Page Refresh Using C#.Net, Ajax
Login Form Validation Without Page Refresh Using jQuery In Asp.Net and C#.Net, Display
ModalPopupExtender on Page Load In Asp.Net Using AjaxControlToolkit, 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.
About the Author
0 comments:
Please let me know your view