We are going to create a single web page that will allow the input of two numbers from the user, and then we will access a WCF Service to make a calculation and return the value back to the Web Page. We will do this using AJAX so that we will get a near-instant response.
Let’s begin by creating our Service Model. It is fairly straight forward and it will call our services from our WCF framework.
Use the ServiceContractAttribute properties to modify the service contract.
The ConfigurationName property specifies the name of the service element in the configuration file to use.
The Name and Namespace properties control the name and namespace of the contract in the WSDL <portType> element.
The SessionMode property specifies whether the contract requires a binding that supports sessions.
The CallbackContract property specifies the return contract in a two-way (duplex) conversation.
The HasProtectionLevel and ProtectionLevel properties indicate whether all messages supporting the contract have a explicit ProtectionLevel value, and if so, what that level is.
- Start by opening a new project or website in Visual Studio 2010 choose VB as your language of choice.
- Now in our handy dandy solution explorer right click and we will add an App_Code Folder. Still with me right?
- Cool lets proceed, in the App_Code folder we will add a new item and select WCF Data Service. Name it Service1.vb
- Now we have our WCF service file, it’s a blank canvas let’s get creative and paint. We must import these namespaces.
Imports System.ServiceModel Imports System.ServiceModel.Activation Imports System.ServiceModel.Web
- Great job so far, In our first property we called our Service Contract, then for our Operation Contract we called a new method DoWork. Fairly standard in Services so far, nothing really outstanding here.
- Our next method is where we will start calling out our operation. Since we are building a mini program here to add to the numbers inside of our textboxes we will then code that out. Here is how we did it, very simple and easy.
' Add more operations here and mark them with <OperationContractundefined)>
<OperationContractundefined)> _
Public Function AddundefinedByVal theNum1 As Double, ByVal theNum2 As Double) As Double
Return theNum1 + theNum2
End Function
End Class
- Notice we specify a static method, and the OperationContract attribute defines it as an operation of this Service.
- Now that we have our service finished lets get to building our webform :)
- Now if we move to our ASPX page, we will want to add a ScriptManager to the page to manage all of our AJAX calls behind the scenes. But in order for our Service method to be accessible at page level, we will need to add a Service reference to our WCF Service. We do so like this:
<asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="~/Service1.svc" /> </Services> </asp:ScriptManager>Now let’s go ahead and create our form. We will use HTML form elements instead, as we are going to use JavaScript to call our Service method.
<input type="text" id="Text1" size="3" /> + <input type="text" id="Text2" size="3" /><br /> <input type="button" id="Button1" value="Submit" onclick="AddNumbersundefined)" />Not much different than a regular ASP.NET Web Application here. Notice we include the handler for the button. Here we are calling a JavaScript function, which we can now add to the page. Add the following to the bottom of the page:
<script language="javascript" type="text/javascript">
function AddNumbersundefined) {
Service1.Addundefineddocument.getElementByIdundefined'num1').value, document.getElementByIdundefined'num2').value, onSuccess);
}
function onSuccessundefinedstring) {
alertundefined'Answer = ' + string);
}
</script>
Above, we are directly referencing the public method we created within
the WCF Service. We have access to this via JavaScript because we are
using the ScriptManager to expose the Service to page level. We get the
response from the method and display it in a JavaScript alert window. We
have no need to write any code-behind logic, as all of the
functionality is being handled by the Service. We can expand this Web
Application by creating more methods (Operation Contracts) in the
Service, and then referencing them in the same way via JavaScript.Our entire service code looks like this:
[ServiceContractundefinedNamespace = "")]
[AspNetCompatibilityRequirementsundefinedRequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1
{
// Add [WebGet] attribute to use HTTP GET
[OperationContract]
public void DoWorkundefined)
{
// Add your operation implementation here
return;
}
// Add more operations here and mark them with [OperationContract]
[OperationContract]
public Double AddundefinedDouble theNum1, Double theNum2)
{
return theNum1 + theNum2;
}
}
See how easy that was? Not as easy when,We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect’s help, we were able to avoid any headaches!
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
