You can call server code "directly" from client code. This is because by design, the server-side code runs on the server side and client-side code on the client. However, there are some solutions. To call Serverside javascript code, you have to use AJAX, and the easiest way is to use ASP.NET AJAX Extensions.
One option for using Microsoft ASP.NET AJAX is to call ASP.NET Web services (. Asmx) from the browser using client script. The script can call a server that contains methods based web service (Internet) and call these methods without a postback and without refreshing the entire page. However, this approach may be exaggerated at times, to perform the simplest tasks. Moreover, the logic should be kept in a separate file. Asmx. We need something that is more "integrated" with our solution.
The option will be used in this article implies PageMethods. A PageMethod is basically a public static method outlined in the code behind of an ASPX page and is callable from client script. PageMethods are annotated with the [WebMethod] attribute. Page methods are represented as JavaScript online.
PageMethods Let's explore an example. The example they discuss here can not be the best example to explain PageMethods, but gives you an idea of how to call server side code from client side. In this example, you are connecting to the Customers table of the Northwind database. They will have some text boxes to accept the CustomerID &, in turn return the name of that customer contact. ContactName The process will be called back whenever the textbox loses focus. We'll use the onblur event on a javascript code will be of value (CustomerID) from the text box. This function then call a javascript (PageMethod server side code) which returns the ContactName without refreshing the page.
I suppose you have downloaded and installed the ASP.NET AJAX extensions for ASP.NET 2.0. If not, I advise you to download the extensions from here and install it before proceeding. At any point in time, if you find a difficulty in understanding the code, download the sample project attached to this article at the end.
Step 1: Create an ASP.NET AJAX enabled website. Go to File > New > Website > ASP.NET AJAX-Enabled Web Site. Give the solution a name and location and click Ok.
Step 2: Drag and drop 2 labels and 4 textbox controls. We will be accepting the CustomerID from the user in the 2 textboxes and displaying the ‘ContactName’ in the other two textboxes. The textboxes that will display ‘ContactName’ has some properties set that will make it appear as a label without a border. Just set the BorderStyle=None, BorderColor=Transparent and ReadOnly=True. The markup will look similar to the following:
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<div>
<asp:Label ID="lblCustId1" runat="server" Text="Customer ID 1"></asp:Label>
<asp:TextBox ID="txtId1" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtContact1" runat="server" BorderColor="Transparent" BorderStyle="None"
ReadOnly="True"></asp:TextBox><br />
<br />
<asp:Label ID="lblCustId2" runat="server" Text="Customer ID 2"></asp:Label>
<asp:TextBox ID="txtId2" runat="server"></asp:TextBox><br />
<asp:TextBox ID="txtContact2" runat="server" BorderColor="Transparent" BorderStyle="None"
ReadOnly="True"></asp:TextBox> <br />
</div>
</form>
Before moving ahead, we will store our connection string information in the Web.config. Add the following tag below your </configSections> tag. Remember we have created an ‘ASP.NET AJAX enabled website’. The tag </configSections> along with some other tags automatically get added to the web.config.
<connectionStrings>
<removename="all"/>
<addname="NorthwindConnectionString"connectionString="Data Source=(local); Initial Catalog=Northwind; Integrated Security = SSPI;"/>
</connectionStrings>
Step 3: Currently we will add a method, ‘GetContactName()’ which will accept a CustomerID and return the Contact Name information from the Northwind database, Customer table. We will then transform this method as a PageMethod.
C#
public static string GetContactName(string custid)
{
if (custid == null || custid.Length == 0)
return String.Empty;
SqlConnection conn = null;
try
{
string connection = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
conn = new SqlConnection(connection);
string sql = "Select ContactName from Customers where CustomerId = @CustID";
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.Parameters.AddWithValue("CustID", custid);
conn.Open();
string contNm = Convert.ToString(cmd.ExecuteScalar());
return contNm;
}
catch (SqlException ex)
{
return "error";
}
finally
{
conn.Close();
}
}
VB.NET
Public Shared Function GetContactName(ByVal custid As String) As String
If custid Is Nothing OrElse custid.Length = 0 Then
Return String.Empty
End If
Dim conn As SqlConnection = Nothing
Try
Dim connection As String = ConfigurationManager.ConnectionStrings("NorthwindConnectionString").ConnectionString
conn = New SqlConnection(connection)
Dim sql As String = "Select ContactName from Customers where CustomerId = @CustID"
Dim cmd As SqlCommand = New SqlCommand(sql, conn)
cmd.Parameters.AddWithValue("CustID", custid)
conn.Open()
Dim contNm As String = Convert.ToString(cmd.ExecuteScalar())
Return contNm
Catch ex As SqlException
Return "error"
Finally
conn.Close()
End Try
End Function
Step 4: We will now transform this method as a PageMethod and then call this method GetContactName() from client side code; i.e. using JavaScript. To enable the method as a PageMethod, add the attribute [WebMethod] on top of the method:
C#
[System.Web.Services.WebMethod]
public static string GetContactName(string custid)
{
}
VB.NET
<System.Web.Services.WebMethod()> _
Public Shared Function GetContactName(ByVal custid As String) As String
End Function
At the sametime, add the attribute EnablePageMethods="true" to the ScriptManager as shown below:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/>
Step 5: Let us now create the JavaScript that will call this server side code. Add a javascript file called script.js to your solution (Right Click Project > Add New Item > Jscript File > Rename file to script.js). Add the following code to the javascript file.
function CallMe(src,dest)
{
var ctrl = document.getElementById(src);
// call server side method
PageMethods.GetContactName(ctrl.value, CallSuccess, CallFailed, dest);
}
// set the destination textbox value with the ContactName
function CallSuccess(res, destCtrl)
{
var dest = document.getElementById(destCtrl);
dest.value = res;
}
// alert message on some failure
function CallFailed(res, destCtrl)
{
alert(res.get_message());
}
Step 6: We now need to reference this JavaScript file from our aspx page and invoke the ‘CallMe()’ method whenever the textbox loses focus. To do so:
Add a reference to the javascript file in the body tag as shown below:
<body>
<script type="text/javascript" language="javascript" src="script.js"> </script>
<form id="form1" runat="server">
………
Step 7: To invoke the methods whenever the textbox looses focus, add these lines of code in the Page_Load() event
C#
if (!Page.IsPostBack)
{
txtId1.Attributes.Add("onblur", "javascript:CallMe('" + txtId1.ClientID + "', '" + txtContact1.ClientID + "')");
txtId2.Attributes.Add("onblur", "javascript:CallMe('" + txtId2.ClientID + "', '" + txtContact2.ClientID + "')");
}
VB.NET
If (Not Page.IsPostBack) Then
txtId1.Attributes.Add("onblur", "javascript:CallMe('" & txtId1.ClientID & "', '" & txtContact1.ClientID & "')")
txtId2.Attributes.Add("onblur", "javascript:CallMe('" & txtId2.ClientID & "', '" & txtContact2.ClientID & "')")
End If
As mentioned, they are using the Attributes.Add that allows us to add an attribute to the object Technique.Web.UI.AttributeCollection server control. The function 'CallMe' kept in the file 'script.js' will be invoked. They are moving the source and location of the text boxes as parameters. The text box will contain the source CustomerID. The rose CustomerID in the Customers table and the corresponding ContactName "will be recovered in the target text box.
Well, that is all you need to invoke the server-side code from client side. Run the code. Type 'ALFKI' in the first text box & press the tab key. You will see that the JavaScript function comes forward & asks the GetContactName PageMethod () using PageMethods.GetContactName. It passes the value of the source text that contains the CustomerID. The "ContactName" returned is shown in the second text box beneath the first, in our case the value shown is 'Maria Anders'.
Troubleshooting: ‘PageMethods Is 'Undefined'’ error
1. Try setting EnablePageMethods="true" in the script manager tag
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/>
2. Don't add the javascript references or code in the <head /> section. Add it to the <body> tag.
<body>
<script type="text/javascript" language="javascript" src="script.js"> </script>
<form id="form1" runat="server">
</form>
</body>
3. Page methods needs to be static in code behind.
0 comments:
Post a Comment