Ajax Toolkit Client Rendering - asp.net

I'm working on a long, dynamic form (100 or so fields) and am using toolkit items such as CalendarBehaviors, HovermenuBehavior, etc for each field.
I've never worked with that many toolkit items at once, and am seeing a big performance hit in rendering. Every instance of a toolkit control is being sent to the client in its' own <SCRIPT></SCRIPT> tags. In other words, 200 instances of he following:
<SCRIPT type="text/javascript">
Sys.Application.add_init(function() { $create(AjaxControlToolkit.HoverMenuBehavior, {"OffsetX":20,"PopDelay":50,"dynamicServicePath":"/default.aspx","id":"hmePopupHelpPolicyNumber","popupElement":$get("lblHelpPolicyNumber")}, null, null, $get("imgHelpPolicyNumber"));});
</SCRIPT>
<SCRIPT type="text/javascript">
...snip
</SCRIPT>
Is there any way to control this and have all the controls created in a single script block?
Also, does anybody know of a good, detailed article that would describe how IE 7 parses and renders html and javascript?
And I know most of you will recommend JQuery instead. Unfortunately that is not an option in this project.
Thanks in advance and happy coding.

I'd say rethink your design of the page. That many items on your page can't make for a good user experience. Instead of coding a really far out solution, reconsider your design and it will probably benefit your user in the end as well.
Edit:
Your question is at the heart of what many consider the major drawback to using WebForms. There is little control on how the server renders the controls and emits their HTML. Without a more "advanced" approach which you are trying to avoid, I'd be hard pressed to suggest anything other than breaking the form up into smaller pieces. If it is a data entry form, it may be faster for the user to type in the date fields as opposed to populating the form via mouse clicks.

Going along the lines of #Achilles' answer, I would break up the form into multiple pages. You could also try one page with multiple tabs.
Update:
Something else that might help you is the ToolkitScriptManager. It combines all of the external toolkit scripts into one single external script. I think it also combines all of the inline toolkit scripts into one block.

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.

javascript conflicts UpdatePanel

I'm using a ReportViewer control which often runs into problems with the javascript associated with UpdatePanels in ASP.NET. I've created a second page which is very simple, no Update Panels. What's the best way to link the two pages? An iframe sounds bad. However, having to run a report, then be returned a link to the results also sounds bad. Sending the user to the simple display won't work in this case. Any suggestions, am I seeing things wrong here?
What I would do is rewrite the page that uses an update panel such that it uses straight javascript web method calls. This would remove the need for the reportviewer control to be on a seperate page because you would no longer need an update panel.

Add a new item to html-select list without leaving the page. How?

I've always wondered what is the best way to add a new item to html-select in a website.
Yes, this may sound silly but it is a great problem from the usability perspective. I don't want the user to be taken to a new page every time they need to add new item to a html-select.
I like the way Google Reader and Gmail handle this problem in there "add folder" and "add label" functionality. I would like to mimic that but i have no clue how they did that.
I'm using jQuery, so any reference to plugins, code examples or tutorials are welcome.
I would like it to be as modular as possible so i can reuse it anywhere.
I'm using ASP.NET 3.5 web-forms, Microsoft Access 2003, jQuery, IIS 5 and Win XP Professional as web server.
Thanks.
there's a jquery select plugin that might help you with this. I've manipulated select lists client side and had no problem with subsequent form-submits but you'd need to do some experiments w asp.net
The standard technique of doing this is called ajax, which basically means replacing only parts of the page. JQuery ajax and maybe a tutorial should get you going.
A common mistake for this scenario is to add the item on client (using jQuery or plain javascript). It may look that it works until the next post-back. Unfortunately the Asp.NET post-back model does not allow to alter the controls contents on client side only. So basicaly there are two choices:
Use ajax (the simplest would be to
use an UpdatePanel)
Make a normal
postback to add the item (simple and
fast to code, if performance is not
an issue - for intranet applications
for example)

Facebook Wall functionality using ASP.Net

I want to create something similiar to a facebook wall on my social site. I want to store the posts in an sql database and that should be rather simple. What I am looking for is a good way to display the posts? I guess I don't even really know where to start, as I can only think of using a loop to display asp:textboxes. Which obviously is not correct.
I want there to be multiple posts displayed on the page, which should include:
the user who posted,
the text posted,
the date posted,
and if I want to get crazy...a means of deleting/editing the post.
I really have no idea of how to implement this concept, so any ideas would help greatly.
To get started, view this article from asp.net on the Repeater control, or this great article.
The Repeater control lets you databind to a list of objects, and then define one template for how that object should be displayed. Then, ASP.NET will handle showing it as many times as necessary. You can write the code-behind for dealing with delete and edit as if there were only one instance on the page.
go ahead with jquery, use a lot of ajax. for the mark up, use a repeater control with all clean html mark up (instead of server side controls which would generate a lot of unnecessary mark up quickly creating performance issues)
only populate x number of items on initial load, and then using jquery pull data as required based on user action. you can serve this data via json, decode json on client side using jquery and perform a loop which converts this json into appropriate html and injects it into the correct html element
should be simple ;-)
ASP.NET gives you lots of ways to do this. A Repeater, DataGrid, GridView are the first that come to mind. If you'd rather use ASP.NET MVC, there's always the good old foreach loop.
Additionally, check out ListView too.

Easy way to AJAX WebControls

I've got a web application that I'm trying to optimize. Some of the controls are hidden in dialog-style DIVs. So, I'd like to have them load in via AJAX only when the user wants to see them. This is fine for controls that are mostly literal-based (various menus and widgets), but when I have what I call "dirty" controls - ones that write extensive information to the ViewState, put tons of CSS or script on the page, require lots of references, etc - these are seemingly impossible to move "out of page", especially considering how ASP.NET will react on postback.
I was considering some kind of step where I override Render, find markers for the bits I want to move out and put AJAX placeholders in there, but not only does the server overhead seem extreme, it also feels like a complete hack. Besides, the key element here is the dialog boxes that contain forms with validation controls on them, and I can't imagine how I would move the controls and their required scripts.
In my fevered imagination, I want to do this:
AJAXifier.AJAXify(ctlEditForm);
Sadly, I know this is a dream.
How close can I really get to a quick-and-easy AJAXification without causing too much load on the server?
Check out the RadAjax control from Telerik - it allows you to avoid using UpdatePanels, and limit the amount of info passed back and forth between server and client by declaring direct relationships between calling controls, and controls that should be "Ajaxified" when the calling controls submit postbacks.
I recommend that you walk over to your local book store this weekend, get a cup of coffee and find jQuery in Action by Manning Press. Go ahead and read the first chapter of this 300 page book in the store, then buy it if it resonates with you.
I think you'll be surprized by how easy jQuery lets you perform what your describing here. From ajax calls to the server in the background, to showing and hiding div tags based on the visitor's actions. The amount of code you have to write is super small.
There are a bunch of good JavaScript libraries, this is just one of them that I like, and it really is easy to get started. Start by including a reference to the current jQuery file with a tag and then write a few lines of code to interact with your page.
Step one is to make your "dirty" pieces self contained user controls
Step two is to embed those controls on your consuming page
Step three is to wrap each user control tag in their own Asp:UpdatePanel
Step four is to ensure your control gets the data it needs by having it read from properties which check against the viewstate for pre-existing values. I know this makes your code rely on ugly global variables but it's a fast way to get this done.
Your mileage may vary.

Resources