Sunday, April 17, 2011

Advantage of switching from ASP.NET to bread & butter HTML/jQuery

Hi, I have been getting more and more sick of all the quirks about control ids, trying to get your data in serverside (based on client-side events). I seem to spend more time fighting with controls in asp.net, that I think it takes me more time than I gain by using it.

I was thinking about using plain html/javascript with jQuery and a web service that returns json for the data.

The only thing I think I would miss from webforms is the MasterPages, the session management, authentication based on windows login and possibly validators(although they have some quirks too). (In fact, maybe not for sessions and auth, but I have never developped webservices)

  • Is there something wrong with the way I am thinking about this, or something I didn't think about ?
  • Are there things in asp.net that you think I will miss ?
  • Has anyone done this before and wants to share experience ?

Please, also take note, that I only have the Framework 2.0 available for development.


Edit: The kind of things giving me troubles in asp.net that makes me wonder for the switch:

Here is a sample of a page giving me problems.

There is a tree table (master / details)

You can edit fields on each child row.

When you press the save button, the data from the group row must be updated (just data from a select, no modification in database), as the data from the child row.

I don't want to refresh the whole page because the displayed records are based from search criterias.

The Master / Details are generated using Repeaters

Trying to update a record from code behind is really quirky, and still have no clue about updating the display.

Using jQuery and a web service, my guess would be that i could update directly to the database, request what I want to be displayed and just update that record. This is the kind of things that make me wonder if asp.net is just getting in my way.


 ________________________________________________________________________
| -  Some             Details           About            Group           |
|________________________________________________________________________|
    |¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
    | ChildRecord Some  Editable  Fields       SaveButton   |
    | ChildRecord Some  Editable  Fields       SaveButton   |
    | ChildRecord Some  Editable  Fields       SaveButton   |
    | ChildRecord Some  Editable  Fields       SaveButton   |
    |_______________________________________________________|
 ________________________________________________________________________
| +  Some             Details           About            Group           |
|________________________________________________________________________|
 ________________________________________________________________________
| +  Some             Details           About            Group           |
|________________________________________________________________________|


Edit2: The problem I have about ASP.NET is not related to ajax. Yes, I use jQuery to make the interfaces more dynamic like showing / hiding the search section when not needed and collapsing details from the tree, but this is all I do with it.

What bothers me is that if I want to check which button has been clicked in this example, I have to use some tricks that feel a bit haky.

If you want to use databound comboboxes in a repeater, you have to use codebehind to set the selected value, it will be a pain to retreive the data selected.

Next, if you want to check what data was modified, you have to save the datatable in the viewstate, read data from all controls in the repeater, then compare with the datatable to make an update. This is this kind of things that bother me with asp.net.

From stackoverflow
  • I think the fundamental question to ask yourself is:

    Am I using the controls for what they've been designed to do?

    Having worked solely with ASP.NET in the 2.0 Framework, I've found I have not had to deal with the issues you are describing. ASP.NET can be quirky yes, but mostly when you use it for something other than it was intended. In which case custom rolled controls fill the niche easily.

    Edit:

    Your troubles sound like you're trying to implement AJAX techniques, however in your question you don't mention using the AJAX framework. Have a look at that as it may be able to fill your niche.

    Martin : In my opinion, Controls should be general enough so I should not even have to ask myself the question you just mentionned.
    Chris Lively : @Martin: Ditto.
  • You don't have to give up everything, like MasterPages. You might try to turn off ViewState, turn off EventValidation and use as little ASP.NET controls as possible (basically - if some functionality can be easily achieved with XHTML, write it as XHTML). You can still use ASP.NET controls where you need them.

    I think that you're not alone. After two years of working with WebForms I also got tired of them and after I discovered how wonderful jQuery was and how well it worked with web services I vastly changed my development model. I am slowly moving towards MVC right now, as I find it the ultimate solution, but for some other apps (small and/or targetting 2.0) I just try to use less server controls, get rid of ViewState, use more AJAX (web services). It works fine. I'd recommend Dave Ward's Encosia - start with this article. I admit it opened my eyes on some other ways to developing web applications using .NET Framework. Good luck!

    Martin : thanks, nice link and nice description
  • Creating a table in JavaScript/JQuery is not the most elegant code either. So I would miss the Repeater control.

    Also, there are workarounds for the ClientId issue.

    I have a lot of code in my page that looks like this:

    var myTextBoxId = '<%=MyTextBox.ClientID %>';

    If there are a bunch of controls I need the client ID for I will put them in an object

    var myControlIds = { MyTextBoxID: '<%=MyTextBox.ClientID %>' };

    Another work around is to put specific css classes on your controls or custom attribute name/values.

    So your textbox could be:

    And my final trick is to use the "Ends With" attribute finder.

    So your JQuery, instead of

    $("#MyTextBox") // doesn't work because of client id mangalling

    instead do: $("[id $=MyTextBox]")

    This searches the 'id' attribute of all controls to find one with a value that ends with "MyTextBox"

    vitorsilva : >>Creating a table in JavaScript/JQuery is not the most elegant code either. So I would miss the Repeater control. you can use a Client side template parser like http://www.west-wind.com/weblog/posts/509108.aspx
  • This might be a paradigm shift, but if you are looking for more "bread and butter" and are comfortable working without asp.net server controls, Monorail might just be a good option for you. It allows you what you are looking for, while being much lighter weight, an MVC based architecture as well. I would recommend asp.net mvc if it were not for your .net 2.0 restriction. Since you are restricted, Monorail might just be a viable choice.

    Zhaph - Ben Duguid : It will be a paradigm shift, but it will certainly get Martin closer to his goal.
  • If used properly, ASP.NET and JavaScript/jQuery web applications really can compliment each other. I have now implemented jQuery in 3 different web applications and am loving every minute of it. So long as you use each component to its strength, you'll end up being happy with the project in the end.

    You specifically mentioned that Control ID's were causing a problem, but its really not that big of a deal.

    JavaScript

    document.getElementById("<%=this.MyObject.ClientID %>");
    

    jQuery

    $("#<%=this.MyObject.ClientID %>")....
    

    In your example of a parent child relationship, you can very easily handle exactly what you are discussing with ASP.NET and the AJAX framework with UpdatePanels.

    Jon Erickson : the only time it gets a bit difficult is when you want to place all of your js code in an external file. one way around it is to get the client id's on the page and then reference that from the external file.
    Jon Erickson : on initial code page: "var MyObjectClientID = <%= MyObject.ClientID %>"
    Jon Erickson : on external js file: "document.getElementById(MyObjectClientID)" or "$("#" + MyObjectClientID)"
    RSolberg : We all start there, some of us just stay there a bit longer I guess.
    Martin : @Jon Erikson:I only use external files for things that are reusable. And in that case, I would still call a function, with an initializer object containing parameters, so in my case, this is not an issue.
    RSolberg : @Martin - Good call...

0 comments:

Post a Comment