In my previous post I wrote about how we can simply call a Web Service with ASP.Net Ajax. In this post I will do the same but with ASP.Net Ajax script definition. With ASP.Net Ajax script definition markup we can use markup to hook up to controls events, invoke methods etc without writing any client-side script code.
Note: This post will use the same Web Service from the previous post.
When we want to use ASP.Net Ajax script we add the script to our code with a <script> element. The ASP.Net Ajax script is a markup language that uses simple XML. The root element for writing ASP.Net Ajax script is the <page>. Into the <page> element we add our components:
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<textBox id="myTextBox" />
</components>
</page>
</script>
The code above declare TextBox with the id “myTextBox”. The id is the value of the id for a <input type=”text”> element that exists on our page. The code above do nothing at the moment, more than only initialize a TextBox object. The Web Service that we are going to call in this post has a method that takes on argument of type string:
[WebMethod]
public string MyMethod(string value)
{
return value;
}
Instead of writing client-side script to pass a value from a textbox into the Web Service method, we can use Atlas script to bind a control to the method’s argument. So when the Web Service method will be executed, the value of a textbox will be automatically past as an argument to our Web Service method. We can also make sure a control on the page will be updated with the return value of the Web Service method without writing client-side script. The following ASP.Net Ajax script will specify a Web Service method and bind a TextBox’s Text property to the Web Service method’s argument, value, and bind the return value of the Web Service to another binding, in this case to the “resultsBinding” that is the id of a binding for a label control:
<serviceMethod
id="myService"
url="MyWebService.asmx"
methodName="MyMethod">
<bindings>
<binding
dataContext="myTextBox"
dataPath="text"
property="parameters"
propertyKey="value" />
</bindings>
<completed>
<invokeMethod
target="resultsBinding"
method="evaluateIn" />
</completed>
</serviceMethod>
To specify a Web Service method, we use the <serviceMethod> element, we also give the method an id, the URL to the Web Service and the Web Service method we want to call. By using the element <bindings> and <binding>, we can bind a “component” another controls. In the code above we specify that we want to bind the “myTextBox” control’s Text property to the Web Service method’s parameter with the name “value”. So when we call our specified Service method, the value of the myTextBox’s Text property will be passed to the ‘value’ argument of the Web Service method. The <binding> element has different set of attributes to specify the binding. In this case we use “dataContext” that specify the id of the control that is the source, “dataPath” that is the name of the property of the specified “dataContext” that should be called to get a value from the “dataContext”. The “property” attributes species the member of the main component that should have the value from the “dataContext”. In this case the <serviceMethod> object’s Parameters. The last attribute we use is the “propertyKey”, we use this attribute to specify the name of the argument of the Web Service method, where the “dataContext” value should be passed to.
Note: The <serviceMethos>’s Parameters property will be called and add the value from the “dataContext” with the “propertyKey” as the key to help the object to know which argument of the Service method the value should be passed to.
To specify a method that should be executed when the Web Service is done, we use the <completed> element. By using the <invokeMethod> element, we specify a method that should be called when the Web Service is completed with the execution of its method. The <invokeMethod> element points to another binding, “resultsBinding”, which should be executed. The “resultsBinding” is added to a label control on the page, whoch task is to display the return value of the Web Service method:
<label id="results">
<bindings>
<binding
id="resultsBinding"
dataContext="myService"
dataPath="result"
property="text"
automatic="false" />
</bindings>
</label>
As you can see in the code above, we bind the Label control “results” to the Service Method. As you can see the “dataContext” for the Label control is the <serviceMethod> we specified earlier, “myService”. The “dataPath” is set to the result of the specified Service method. The result value is mapped to the “test” property of the label control. We also set the “automatic” attribute of the binding to false to make sure it will not automatically set the “text” property. Instead we make sure the binding is executed when the Web Service is completed with its execution. As you probably remember, it was done with the <invokeMethod> element added to the <comepleted> element of the <serviceMethod>.
No when we have bind the “myTextBox” value to the Web Service method’s argument and the result value from the Web service to a label, we also need to specify the our specified Service method should be execute from somewhere. We can do that by adding the <invokeMethod> element to a button control’s “click” event:
<button id="myButton">
<click>
<invokeMethod
target="myService"
method="invoke" />
</click>
</button>
The code above will invoke the ”myService” Service method when the click event of the button is pressed.
Here is the whole example:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<atlas:scriptmanager runat="server" id="scriptManager">
<services>
<atlas:servicereference path="~/MyWebService.asmx" />
</services>
</atlas:scriptmanager>
</head>
<body>
<form id="Form1" runat="server">
<div>
Enter value: <input id="myTextBox" type="text" /><br />
<input id="myButton" type="button" value="Execute" />
</div>
</form>
<label id="results"></label>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<textBox id="myTextBox" />
<serviceMethod
id="myService"
url="MyWebService.asmx"
methodName="MyMethod">
<bindings>
<binding
dataContext="myTextBox"
dataPath="text"
property="parameters"
propertyKey="value" />
</bindings>
<completed>
<invokeMethod
target="resultsBinding"
method="evaluateIn" />
</completed>
</serviceMethod>
<button id="myButton">
<click>
<invokeMethod
target="myService"
method="invoke" />
</click>
</button>
<label id="results">
<bindings>
<binding
id="resultsBinding"
dataContext="myService"
dataPath="result"
property="text"
automatic="false" />
</bindings>
</label>
</components>
</page>
</script>
</body>
</html>
By using the ASP.Net Ajax script markup we don’t need to learn how to code client-client-side script, such as Javascript, instead we learn how to write ASP.Net Ajax script in a markup language. Some client-side script can be difficult to write, we need for example learn how to call and use the DOM (document object model) and also how to write script that should work for different browsers etc. But by using the ASP.Net Ajax script markup we can now easy bound controls to each other and call methods etc without worry about writing client-side script that should be compatible with other browser etc.
Regards,
Sachin D.
