Calling Web Services using Client-Side ASP.NET AJAX for Server-Side Validation
by David Hayden ( Florida .NET C# SQL Server Developer ), Filed: ASP.NET 2.0
This is really a part 2 on ASP.NET AJAX Server-Side Validation based on the ServerSideValidationExtender Control in the Validation Guidance Bundle that is a part of WCSF v2.0. You can read the first part here so this makes more sense:
I can avoid the whole partial-page postback needs of the ServerSideValidationExtender to clue the user in on whether the URL they typed in is valid by making a client-side network call to a web service that checks to see if the URL exists using WebRequest and WebResponse as mentioned in the previous post. Here is another screenshot of providing a similar experience to what the ServerSideValidationExtender with just a textbox and label control and a bit of javascript on the client. I removed the CustomValidatorControl to focus on the client-side web service call, but you would/could keep it there for actual page validation.
I need a web service to call that will actually check the existence of the URL. The code is basically the same as in the previous post:
/// <summary>
/// Summary description for ValidatorService
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class ValidatorService : WebService
{
[WebMethod]
public bool ValidateUrl(string url)
{
try
{
HttpWebRequest request =
(HttpWebRequest)WebRequest.Create(url);
request.MaximumAutomaticRedirections = 4;
HttpWebResponse response =
(HttpWebResponse)request.GetResponse();
response.Close();
return response.StatusCode
== HttpStatusCode.OK;
}
catch
{
return false;
}
}
}
The addition of the [ScriptService] Attribute opens up this web service for use with AJAX.
I need to register the web service with ScriptManager on the page so it will create a proxy for me:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="ValidatorService.asmx" />
</Services>
</asp:ScriptManager>
I need to create a bit of Javascript on the page that calls the webservice and returns the results:
<script language="javascript" type="text/javascript">
function CheckUrl () {
ret = ValidatorService.ValidateUrl
(document.getElementById("Text1").value,
OnComplete);
return(true);
}
function OnComplete (arg) {
if (!arg)
{
document.getElementById("UrlExists")
.innerText = 'Invalid Url.';
}
}
</script>
I then hook into the TextBox's onBlur Event to call the Javascript Code:
<div>
Url:<br />
<input
id="Text1"
onblur="javascript:CheckUrl();"
style="width: 319px"
type="text" />
<asp:Label ID="UrlExists"
ForeColor="Red"
runat="server" />
<br />
<br />
<asp:Button
ID="btnAdd"
runat="server"
OnClick="btnAdd_Click"
Text="Add" />
</div>
The end result is basically the same in terms of appearance and functionality:
However, rather than a partial-page postback, one gets a more performant request and response. Fiddler tells the story:
And that is an alternative :) I think you have to look at UI complexity, maintainability, and other factors to decide what is right for the application. I have another option I am working on as well and will post it in the near future.
Author: David Hayden ( Florida .NET C# SQL Server Developer )
Filed: ASP.NET 2.0