I have a new ASP.NET Web Forms project that was started about 6 months ago. Being as how the project is still fairly new and in its infancy, this hasn't been much of a problem till recently.
The application is an ASP.NET Web Form application with a C# and SQL Server back end and an HTML5 and jQuery front end. The application is mostly ajax powered with very little post backs. It consists of mostly jQuery ajax calls to C# WebMethods.
The problem I am running into is some of my aspx pages are over 50kb in size with all the javascript and jQuery that is in the aspx page. I would like to move a lot of this javascript and jQuery code into separate files, but most of it consists of code that use the aspx <%= %> tags, which makes moving it a difficult (if not impossible) task.
It is getting tedious to find things in the code. I am wondering if there is a way to optimize the code (by somehow reducing the size of the aspx file) and if there is a good way to keep all this jQuery and javascript organized better so that finding things are a little bit easier? Also, is there maybe a javascript minifier that will minify the javascript inside an aspx page?
Any help would be appreciated!
Since you are using AJAX, I'm assuming you're using HTML markup, not any of the web controls. If so, one thing you can do is trun of ViewState in the aspx page. I was in the same position a few years ago, and decided to switch the Asp.net MVC. I would recommend you look into that. It gives you a much better development model, with minimal overhead.
Also, is you JS/CSS minified? I'm still confused about why "...but most of it consists of code that use the aspx <%= %> tags, which makes moving it a difficult (if not impossible) task."
WebForms, like MVC, also now supports bundling and minifications of JS files, check this out: http://blogs.msdn.com/b/rickandy/archive/2012/08/14/adding-bundling-and-minification-to-web-forms.aspx
Update: As OP pointed out, for .Net 3.5, you can use http://getcassette.net/ for bundling and minification.
to avoid using <% %> in your js to be able to reference your controls you can set the ClientIDMode to "static", that way the ID you set for the controls is the one that will be rendered and in js you can reference the control with something like
asp.net
<asp:DropDownList ID="ddlStateName" runat="server" ClientIDMode="static"></DropdownList>
jquery
$("#ddlStateName").val();
Related
I've implemented and used a pretty functional grid through this tutorial for MVC:
http://www.codeproject.com/KB/aspnet/AspNetMVCandJqGrid.aspx
I was wondering how to migrate this to ASP.NET WebForms, for another project I want to use jqGrid on, but is written in WebForms instead of MVC.
I've found some examples but they're rather incomplete (require me to declare the columns in both js and codebehind, don't feature paging, no multi-filtering, etc)
Jquery and page methods in WebForms application are working well together. ( http://www.junasoftware.com/blog/using-jquery-ajax-and-page-methods-with-a-asp.net-webservice.aspx )
After glance on the article you pointed to, I think they will work too. Here are what I think you should do.
Including the article above I mentioned, read more on using jquery with page method.
you will be able to reuse most of html and javascripts and c# data structures for communicating with jquery from the article (of codeproject).
What you need to do is that basically, you have to make your page method act as a controller while aspx as views. And adjust other elements accordingly. One thing you have to remember is that page method should be static.
I was wondering, whats the best way to handle common HTML controls in ASP.NET? I mean, ASP.NET server controls generate too much crap inside the code so I rather use common controls.
But how about databind and how to manage those common objects correctly (such as combobox, textbox and so on)?
Don't forget that you can always set runat="server" on any control - that includes standard html form controls such as <input> and <select>, and also other elements like <div>. Anything, really.
This means that you can regain control of the html output in your WebForms pages quite effortlessly - as long as you don't need viewstate or any other more advanced databinding/state managing that ASP.NET normally handles for you.
That said, learning to use the ASP.NET MVC Framework is not a bad idea, since it helps you regain control of much more than just the html output. Generally, creating a page in ASP.NET MVC takes a little more work, since there are no drag-n-drop controls like gridview, textbox or even repeater. Instead, you use html helper methods and regular foreach loops, which means you have to type a lot more code. However, the MVC framework is designed so that you won't have to repeat much code anyway.
If you're concerned about the html markup generated by the WebForms ASP.NET engine, i suggest you take a look at ASP.NET MVC. It's purpose is specifically to give you the control you need over the generated html.
If you don't want to start learning ASP.NET MVC, ASP.NET 4.0 WebForms gives you more flexibility in the generated HTML (such as enabling the ViewState for a specific control only, setting the html id's etc.).
As for the databinding, again if you study MVC in depth and start thinking in terms of action -> result you can gain a lot more control and flexibility.
Later edit: I forgot to mention Razor, the new ViewEngine under development at microsoft. It's currently in beta and only inside WebMatrix, a very stripped down 'getting-started type' development platform for ASP.NET. MVC combined with the very clean code you can write using Razor will be in my opinion an important trend-setter in the web development world.
There's a reason ASP.Net controls generate all that "crap". It's so you can databind and manage those objects correctly. Using standard html controls is useful when you don't need direct databinding or if you have no need to manipulate the control through server-side code.
The best way to handle common HTML controls in ASP.Net is not to handle them directly. By using them to handle data and functionality, you're basically neutering .Net. You might as well go back to classic ASP.
In order to generate clean markup, I often resort to using code similar to this:
<asp:Literal ID="ltItem" runat="server">
<li class="{0}">{2}</li></asp:Literal>
And in the codebehind:
...
lt.Text = string.Format(lt.Text,
cssClass,
item.Url,
Server.HtmlEncode(item.Caption)
);
Some of the advantages are:
clean html markup, no ASP.Net WebForm id's etc
designer can do minor modifications in the aspx without developer intervention
code is precompiled (as opposed to use inline code or databind statements)
Disadvantages:
somewhat cryptic
fragile - when a parameter is removed in the markup, string.Format throws an exception
Therefore my question:
Is this a common way to generate clean markup? Are there better alternatives? Is the databinding syntax approach preferable?
It seems that you're fighting with your framework. ASP.NET web forms were designed to automatically resolve client-side ids and allow property-based UI customization that feels like Windows forms. These features often make a mess of the rendered HTML but the result is tolerated because of the perceived benefits.
If you don't perceive the benefits and find yourself fighting the ASP.NET web forms approach, consider another framework. There's no sense using a framework that doesn't share your values and goals.
If you want total control of your rendered HTML, consider ASP.NET MVC. Control of HTML output is one of its stated goals. In addition, it's designed to enforce separation of concerns.
If you're open to a non-Microsoft framework, there are many available including:
MonoRail - a framework inspired by Ruby on Rails
Maverick.NET - a .NET port of Java's Maverick framework
Correct me if I am wrong but using MVC won't gives you precompiled code isn't it ?
I do the same when using webforms and I had several issues with it.
We are plannning to use Ajax in our ASP.net project. However, we still want the member panel of our web site to work in all browsers. We have decided not to use Ajax in some forms where browser independence is must.
I am now confused with whether we should use ASP.NET controls or HTML controls or both?
I have two questions:
Are there any problems that I might face using either of approach?
Also which one is better considering efficiency and performance?
The Asp.Net Controls including the ajax controls are independent of browsers, asp.net will detect your browser and try to render the best html/javascript for that browser. So you are good with server controls.
If you are going to implement the project in asp.net then for all the controls that need to be accessed via code at server side needs to be asp.net controls. Those controls that are static and only displaying some value can be html controls.
The main point is that the asp.net controls are rendered to html controls... so the client who views the web-page actually gets the html controls.
For AJAX refer this
ASP controls and HTML controls as complementary.
ASP controls bring facilities for programming like the viewstate (the control keeps its content after a post back), the binding with datatable, and a lot of presentation properties. It is really an advantage in terms of time and maintainability to use these controls. They also manage some security feature like html code injection. ASP controls could be controled and managed from the code behind page.
HTML controls are out of the native ASP.NET page process. It is sometime a good thing to have particular control that you don't want ASP.NET take in charge and modify, but it is not the core of an ASP.NET web application.
If you can use HTML - it is always better - as it is much faster.
The use of ASP controls should work on all browsers as far as I know, but it less efficient.
Better create a small example and test it on some browsers before you decide.
(I've used ajax on both explorer and Firefox and it works)
I'm just getting into ASP.NET Been avoiding it for years as I'm a desktop application advocate.
Anyway, I was wondering if there's a way to stop the generated html being so cluttered with javascript. Is there a way to make the generated script go into a referenced js file rather that inline with the page.
Look into ASP.NET MVC - it is an alternative to WebForms and tends to have less clutter.
Are you sure you're using code-behind?
When you add a new page, make sure you check "Place code in a separate file", otherwise all your server-side code will be on the page (even tough it won't show up for the end-user)
If you're using code-behind but it still has a lot of javascript code in the page (maybe you're using ajax?) I'd suggest you don't use the .NET ajax controls, just do all the ajax by hand, using jQuery or Prototype. It's fast and it'll be as lightweight as it can be.
Check out ClientScriptManager.RegisterClientScriptInclude.