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 get List of Folders on Client Machine

There may be the requirement to show all the folders on the Client machine and Server side script will list folders of Application Server.

Html page: we have one Textbox to show and edit folder path.

Two buttons, one for getting the sub-folders and another one to go one level up

---

<input type=”text” id=”txtFolder” value=”c:\” style=”width:250px />

<input type=”button” value=”GetFolder” 

onclick=”javascript:ShowFolderFileList(document.getElementById(‘txtFolder’).value);” />

<input type=”button” value=”Back” onclick=”javascript:back();” />

<ul id=”dvFolder”></ul>

Here is the Script:

<script type=”text/JScript”>

function ShowFolderList(folderspec)

{

var fso, f, fc, s=”;

fso = new ActiveXObject(“Scripting.FileSystemObject”);

folderspec = folderspec.replace(“%20”, ” “);

f = fso.GetFolder(folderspec);

 

fc = new Enumerator(f.SubFolders);

if (fc.item() != undefined)

{

for (; !fc.atEnd(); fc.moveNext()) {

if (fc.item().Path.indexOf(‘$’) < 0) {

path = fc.item().Path.replace(/\\/g, “\\\\”).replace(” “,“%20”);

s += “<LI><a href=’#’ onclick=javascript:ShowFolderList(‘” + (path) + “‘);>” + path + “</a>”;

}

}

}

else

{

s=“No Folder Exists”

}

document.getElementById(“dvFolder”).innerHTML = s;

document.getElementById(‘txtFolder’).value = folderspec;

}

 

function back() {

ctrl = document.getElementById(“txtFolder”);

c = ctrl.value.split(‘\\’);

cval = ctrl.value.substring(0, ctrl.value.length – (c[c.length – 1].length + 1));

if (cval.substr(1, cval.length-1) == “:”)

cval = ctrl.value.substring(0, ctrl.value.length – (c[c.length – 1].length));

ctrl.value = cval;

ShowFolderList(ctrl.value);

}

---

 

The above code will show sub folders of the selected folder.

How to connect HTML Page with SQL Server

Connecting HTML page with SQL Server is very interesting and can be used very often. No postback, no page flickering and good performance indeed.

Here is the code:

<script language=”javascript” type=”text/javascript”>

function callonload() {

var container = document.getElementById(“myContainerDiv”);

var html;

var objConnection = new ActiveXObject(“ADODB.Connection”);

//var strConn=”Data Source=<SERVER>;Initial Catalog=<DATABASE-NAME>;User ID=<USERNAME>;Password=<PWD>;Provider=SQLOLEDB;”;

var strConn = “Provider=SQLOLEDB;Data Source=localhost;Trusted_Connection=Yes;Initial Catalog=Sales_DW;”

objConnection.Open(strConn);

var rs = new ActiveXObject(“ADODB.Recordset”);

var strQuery = “SELECT [CustomerID],[CustomerAltID],[CustomerName] FROM [Sales_DW].[dbo].[DimCustomer]”;

rs.Open(strQuery, objConnection);

rs.MoveFirst();

html = “<table cellpadding=10 cellspacing=10 style=’border-color:Silver;border-width:1px;border-style:solid;width:100%;’>”;

html = html + “<tr style=’height=15px;’><th>” + rs.fields(0).Name + “</th><th>” + rs.fields(1).Name + “</th><th>” + rs.fields(2).Name + “</th></tr>”;

 

while (!rs.EOF) {

html = html + “<tr ><td>” + rs.fields(0) + “</td><td>” + rs.fields(1) + “</td><td>” + rs.fields(2) + “</td></tr>”;

rs.movenext();}

html = html + “</table>”

 

container.innerHTML = html;

}

</script>

 

<div id=”myContainerDiv”></div>

Here Grid will be rendered where ever myContainerDiv Div control will be placed.

I have used trusted connection with Database, you can change its connection string according to your need.

This piece of code will work well with HTML/ASPX pages.