De-cluttering ASP.NET javascript - asp.net

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.

Related

Get value form elements inside div with only ASP.NET

I'm newbie in ASP.NET and i think that my question is quite simple, but I'm not getting success in my searches through google or even stackoverflow.
I have a asp.net method (vb.net) that loads a entire html page inside a div.
Doing searches, i discovered that it can be like this:
On .aspx page:
<div id="content"></div>
On .vb codebehind:
Private sub LoadContent()
content.InnerHtml = MyDLL.LoadFromDatabase.Value.ToString()
End Sub
So, nothing special until here.
But, if consider that the html code loaded from database has form elements like <input id="name" type="text">, my problem starts...
On page postback these don't keep the values as <asp:TextBox> created natively on code, does.
And the other thing that I want is a way to retrieve the value from them to work on codebehind, like: myvar = content.Controls("name").Value
At least, is there a way to solve my problem?
Sorry for my bad english, and thanks so much.
CRice is right. If you want the viewstate to persist through postback you need to create the controls server-side.
Careful though: I've had bad experience with dynamically created controls on Asp.Net, specifically when trying to bind events to them. Not only would you have to use delegates and events (a hard topic for a newbie), also when I tried it a few years ago I just couldn't get it to work, no matter what.
If you're going for dynamic created controls, make sure it's worth the effort, because it WILL be an effort, now and in the future when you would like to maintain and add expand. A rule of thumb is that dynamic mechanisms are always harder to maintain than static ones, but they provide more flexibility.
Having that said, if you're still going for dynamic html loading, be aware that better solutions exist, though they require different architectures: client side frameworks (best is angluar.js) provide dynamic loading of "modules" (and much more), which is what you want. On the server side, asp.net MVC with its Razor view engine, partial views etc., is better suited for dynamic html generation.
Back to your original question,are you sure you need a full postback? What about a nice neat Ajax call to a web service? Can get the job done in many cases without reloading the whole page. I guess using jquery's $.ajax syntax and creating a simple .asmx web service will be easiest for you.
Last but not least, why use vb.net instead of c#? It sucks man. Give it up while you still can.

Optimizing and organizing ASP.NET content

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();

Dynamically loading asp.net controls with javascript

I am developing a series of ASP.NET controls that allow for a dynamically created sites where the layout gets generated from a class.cs file, the controls then get Loaded into an Placeholder in an update panel.
what I am hoping to achieve is using stuff like ajax to build the screen with javascript.
can you guys maybe point me in the right direction,
my google is not helping today.
I want to use stuff like ajax, json
thanks in advance
Javascript is a client-side scripting language and cannot be used to trigger loading of server-side controls.
You can use ASP.NET elements like etc., which have runat=server to trigger server side code, though.
Through AJAX? Not possible without page reload.

Any suggestions for a nice ASP.NET Ajax tooltip?

I am looking for a nice tooltip control (with delay) in ASP.NET AJAX. I know there are many nice Javascript libraries out there, but since I am already using ASP.NET AJAX, I may just as well use that.
An "oldie-but-goodie" that I have used many times for tooltips would be overlib It's quite nice, VERY flexible and can be used independent of any particular AJAX platform.
Telerik seems to have the mojo in this area, but since I assume you're looking for free...
The nicest ones appear to be jQuery plugins, like this one:
http://rndnext.blogspot.com/2009/02/jquery-ajax-tooltip.html
There is also this ASP.Net AJAX TooltipExtender:
http://weblogs.asp.net/cjdevos/archive/2008/03/29/asp-net-ajax-tooltipextender.aspx
I was able to make a pretty nice balloon popup using the PopupControlExtender from the ASP.Net AJAX Control Toolkit. You can specify the target control to invoke the popup, the control or div that contains the popup content, and you can also dynamically populate the content using an AJAX callback to a service method.
I recommend:
Pure JavaScript with Ajax capability:
Menucool Tooltip
ASP.NET version, with Ajax Load On Demand:
Menubasic Tooltip
If you don't need the Ajax feature, Menucool has a very easy-to-use CSS tooltip either.
One option is WZ_Tooltip. Most tooltips are basic javascript; you should not expect to find much in the way of .NET integrated tooltips, since there is not much reason to use it rather than just using a javascript.

jQuery UI + ASP.NET UpdatePanel - Is it worth it?

I really like the looks of jQuery UI and I'd love to integrate it into my ASP.NET Web Applications. I like the themes and how easy it is to use the widgets. I'm currently using AJAX Control Toolkit controls like the Calendar and ModalPopup. I'm hoping to replace them with the DatePicker and Dialog widgets, but I hear they have issues with UpdatePanels. There are workarounds for these issues, but I wonder, is it worth it?
Which leads into my question(s):
Has anyone had luck using jQuery UI widgets exclusively (instead of AJAX Toolkit Controls) in an ASP.NET Web Application that occasionally uses UpdatePanels?
Are there any best practice resources for getting jQuery UI and UpdatePanels to play nice?
Update:
Based on the answers so far, it seems that the best thing to do is replace UpdatePanels with $.ajax and PageMethods. That should allow me to use jQuery UI without any issues and also improve my AJAX performance.
No, it's not worth it. If the toolkit's calendar and modalpopup extenders are working for you, then just hold on to them.
In future projects, stay away from asp.net ajax and use jQuery exclusively. This way you wont run into any of the updatepanel problems. ASP.NET 4.0 Webforms are going to make using jQuery much easier in the past, because you will have more control of how controls get named when they are rendered to HTML.
We use Microsoft AJAX (only using UpdatePanels) and jQuery and all works great.
Using UpdatePanels makes all UserControls, Postbacks, Viewstate etc work as you would expect with the UI enhancements of jQuery. There are a few things to learn in getting them to work together and until we find an alternative we will continue to do this. We think its worth it.
I would be keen to see how UpdatePanels can be easily replaced with jQuery, but I expect one would need to write additional code for each UpdatePanel replacement, rather than letting asp.net handle things? Are there any articles out there that demonstrate replacing UpdatePanels that contain asp.net controls and UserControls with events etc?
I'm working on a project with a lot of UpdatePanel and jQuery, things just work fine.
Yes, it is a period when you need to learn, to make things work.
If you have a lot of UpdatePanels and you don't want to remove them then this is understandable, and using jQuery is just improving the UI, so it's not going to much worse.
Also jQuery has functionalitys related to AJAX,so you can make elegant client side coding with jQuery which is not related to Design and ui stuff.
I think if you search for jQuery and Ajax on the internet you will find a bunch of good examples, and fine techniques to both technologies together.
PS:
Remenber that UpdatePanel is evil in sort of way when you are using in an inappropriate way.
UpdatePanel is (and generally AJAX) is very customizable, make time for yourself to optimize it
Good luck!

Resources