How to call Server side function with JavaScript

In this article you will find how we can call Server side static function using JavaScript and get value from it. Many times developers find such requirement of fetching some data from Server side. Here is the code, where page will not follow Page life cycle and no data will be posted on the Server. hence code will be executed directly and rendered using Client side code.
CodeProject
Here is the aspx code:

We can use this code to bind dropdown or to show data in any control, in which we can display text data. The EnablePageMethods property of the ScriptManager Control must be set to true, it indicates whether public static page methods in an ASP.NET page can be called from a client script. Put “return false;“, if you are using web control instead of html control. This is will avoid postback on calling an event.

Script: keep this in head tag:

In the above code, On_Success and On_Failure are client side functions called after executing Server side function (GetNameServer). One of the best things which I like in AJAX is PageMethod. PageMethod by which one can expose server side page’s method in java script. This brings so many opportunities we can perform lots of operations without using slow and annoying post backs.

Server side code:

“[WebMethod]” attribute to a server-side method is to make the method callable from remote Web clients. This is the “static” function that will be called directly from JavaScript and will return a string value.  It cannot interact with the instance properties and methods of Page class, but can do so with other static properties and methods of the Page class.

We have used Server side method with no input parameter; we can pass input parameters as follows:

Client side code:

Server side code:

 Script:

Above code will allow to pass input parameters and pass it to the Server side method.

 

Try this J

How to show Binary Image column in GridView

1. Create a Handler.ashx file to perform image retrieval. This Handler.ashx page will contain only one method called ProcessRequest. This method will return binary data to the incoming request. In this method, we do normal data retrieval process and return only the Image_Content field as bytes of array.

The sample code follows

public void ProcessRequest(HttpContext context)

{

SqlConnection myConnection = new SqlConnection(“YourConnectionString”);

myConnection.Open();

string sql = “Select Image_Content, Image_Type from ImageGallery where Img_Id=@ImageId”;

SqlCommand cmd = new SqlCommand(sql, myConnection);

cmd.Parameters.Add(“@ImageId”, SqlDbType.Int).Value = context.Request.QueryString[“id”];

cmd.Prepare();

SqlDataReader dr = cmd.ExecuteReader();

dr.Read();

context.Response.ContentType = dr[“Image_Type”].ToString();

context.Response.BinaryWrite((byte[])dr[“Image_Content”]);

dr.Close();

myConnection.Close();

 

}

 

2. Place a GridView control in your aspx page, with one TemplateField column, add an Image control into the TemplateField’s ItemTemplate section.

Specify the ImageUrl property as

 

<asp:TemplateField>

<ItemTemplate>

<asp:Image ID=”Image1″ runat=”server” ImageUrl=’<%# “Handler.ashx?id=” + Eval(“Img_Id”) %>‘ />

</ItemTemplate>

</asp:TemplateField>

 

3. Now we can bind the GridView control to display all the records in the table as follows

 

GridView1.DataSource = FetchAllImagesInfo();

GridView1.DataBind();

 

Before you bind the GridView, you should write the FetchAllImagesInfo method to return all the records with their image data from the table and then you

have to load the images into the GridView control.

 

The code for FetchAllImagesInfo is

 

public DataTable FetchAllImagesInfo())

{

string sql = “Select * from ImageGallery”;

SqlDataAdapter da = new SqlDataAdapter(sql, “Your Connection String”);

DataTable dt = new DataTable();

da.Fill(dt);

return dt;

}