jQuery server side DOM manipulation.

Question

Does anyone know if it is possible to leverage the power of JQuery on the .Net serverside?

For example I have some HTML as a String in some code behind. Is there a way to execute JQuery on it?

I'm currently doing this...

Assume this is the String...

<input id='AddressSettings_txtFirstName' name='txtFirstName' 
value='#firstNameValue#' size='25' type='text'  class='val_required'/> 

My C# does this

 strHTML = strHTML.Replace("#firstNameValue#", customerInfo.FirstName);

And this is how I bind my data to my HTML.

Now what I would like to do is instead of having to add the #firstNameValue# as a place holder and replacing it I would like to somehow execute a line of JQuery on the HTML string in my C# code.

strHTML = strHTML.ExecuteJQuery("$('#AddressSettings_txtFirstName').text('" 
         + customerInfo.FirstName + "')");

What are my options here?

Answer 1

For all intents and purposes, the answer is "no" (while there might be some obscure way of handling this, it's not the most optimal way).

It appears you are looking for a way to manipulate the HTML that is being produced on the server-side, which is a very legitimate desire, it's just that the approach on the server side using .NET (or other) technologies is radically different than how you would approach it on the client-side.

Because the content is already rendered on the client, the way you would apprach modifying it is different. On the server, the page is built of from various parts which ultimately render the HTML to the client, using data that the client doesn't necessarily have access to (as well as resources and libraries).

It's for that reason you want to use what's available on the server to accomplish what you are doing.

Whether you are using the WebForms model or MVC model of ASP.NET, there are mechanisms that allow you to bind to data without having to write out the tag yourself.

For example, in the WebForm model, you have the TextBox class which you can set the Text property on.

In ASP.NET MVC, there is the TextBox extension method on the InputExtensions class which allows you to pass the content of the textbox and the method will render the tag for you.

Answer 2

The DOM is a browser specific entity. Thus, not directly available as you seek. However, you can determine just what you want to manipulate, and use either .live() or calling your jQuery code to add behavioral stuff as elements get added. As for change:

<input id='AddressSettings_txtFirstName' name='txtFirstName'  
value='#firstNameValue#' size='25' type='text'  class='val_required'/>  

$('#AddressSettings_txtFirstName').change(function(){
// do stuff here
});

will fire when it changes for instance. EDIT: One other option is to have the client pull the data using ajax and JSON - but that is a small shift in your method of working at present.

Answer 3

Well this is the answer for Java.Here and Here Provided by some guy named John Resig. (Not sure he knows what hes talking about when it comes to JQuery...wink wink)

Now what about .Net?