jQuery Validate with WebForms & WebService - asp.net

Question

Right now I have simple form with a single input. I'm trying to use the remote part of jQuery Validate to call my webservice that right now is just returning false. The problem I'm having right now is when it calls my webservice it is pulling the name of the input which is some garbage created by .net. Is there a way to override this and use the Id of the input verse the name of the input. Here is my jQuery:
$(function () {
$('form').validate();
$("#tbSiteName").rules("add", {
required: true,
remote: "webservices/webservice.asmx/HelloWorld"
});
});
Here is my HTML:
<label for="tbSiteName">Name:</label>
<input name="ctl00$MainContent$tbSiteName" type="text" id="tbSiteName" class="required" />
Here is the header info from Chrome: (notice the Query string params)
Accept:application/json, text/javascript, */*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Type:application/x-www-form-urlencoded
Cookie:ASP.NET_SessionId=qvupxcrg0yukekkni323dapj
Host:localhost:56803
Referer:http://localhost:56803/Default.aspx
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.224 Safari/534.10
X-Requested-With:XMLHttpRequest
Query String Parameters
ctl00%24MainContent%24tbSiteName:ts
From the server side I'm getting a 500 Internal server error because my signature doesn't match my post.
Webservice Code:
[WebMethod]
[ScriptMethod]
public bool HelloWorld(string tbSiteName) {
return tbSiteName.Length > 5;
}
Thanks for the help.

Answer 1

Unfortunately, to my knowledge, there's no way to get around this when using ASP.Net WebForms server controls such as <asp:textbox>. Although in .NET 4 you have the ClientIdMode="Static" attribute (see here) to disable the auto-generated client IDs, that does not affect the name attribute.
Rick Strahl has suggested in response to comments on his blog post that if you really need predictable names, you should just use an html <input> control:
ClientIDMode only affects the ID not the NAME attribute on the control, so for post back form elements the name will still be a long name as held in UniqueID. This is reasonable though IMHO. If you really need simple names use plain INPUT elements rather than ASP.NET controls especially if you don't rely on POSTBACK assignment of controls anyway to retrieve the values by using Request.Form[].
Have you considered just using a client-side <input> instead of an <asp:textbox runat="server">?
Additionally, have you considered dropping ASP.NET WebForms and using MVC? ;-)

Answer 2

This is the answer I've came up with. I had to change my asp:textbox to a HTML input in order to get this to work. Also, I had to change the web.config to all HttpGet to my webservice. This is painful at best. I've also lost viewstate on the control by using a standard input. I'd love to switch this over to MVC, but it is just not an option.
Thanks for the help.
$("#tbSiteName").rules("add", {
required: true,
remote: function() {
var r = {
url: "/webservices/ipmws.asmx/SiteValid",
type: "POST",
data: "{'tbSiteName': '" + $('#tbSiteName').val() + "'}",
dataType: "json",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return (JSON.parse(data)).d; }
}
return r
},
});