Couple articles extracted from Scott Mitchell’s 4GuysFromRolla on RoundedCorner Web Control:
Couple articles extracted from Scott Mitchell’s 4GuysFromRolla on RoundedCorner Web Control:
Referring to Scott Mitchell’s article “Client-Side Enhancements in ASP.NET 2.0” on 4GuysFromRolla, it contains
ClientID and UniqueID are definitely different. In the simplest sense, ClientID is used for client-side, UniqueID is used for server-side. However, there are more subtle differences between them.
ClientID:
UniqueID:
With regard to the separator explained above, I’ve encountered one exception, whereas the UniqueID separator is “&”. I have a button and a update panel on a page, with the button being the AsyncPostbackTrigger for the update panel. When trying to access the button via its ID in code behind, the ID rendered and written to the HTML is not the button’s ClientID, but its UniqueID, which then has “&”, instead of colon (:), as the separator. The only explanation I can think of for such behavior is due to the postback triggers for the update panel. Trial and error always help.
In addition, both ClientID and UniqueID can be overridden to be identical all around, of course. Just simply assign them with the ID attribute of the control.
First step one should take to understand UpdatePanel – what it is and what it can do…
MSDN – UpdatePanel Class
MSDN – UpdatePanel Control Overview
There’s a lot of information. Some are easy, some are a bit more trickier. Extracting some below…
UpdatePanel’s update process is coordinated by the ScriptManager server control and the client PageRequestManager class. An asynchronous postback behaves like a regular postback in that the resulting server page executes the complete page and control life cycle. However, with an asynchronous postback, page updates are limited to the regions of the page that are enclosed in UpdatePenel controls and that are marked to be updated.
Add content to UpdatePanel
By default, any postback control inside an UpdatePanel control causes an asynchronous postback and refreshes the panel’s content, or you can specify a trigger. A trigger is a binding that specifies which postback control and event cause a panel to update. Controls inside an UpdatePanel control that causes a postback are automatically configured as triggers for the UpdatePanel control. To disable Automatic Triggers, set ChildrenAsTriggers to false and UpdateMode to Conditional. To specify triggers declaratively, register a control by using the RegisterAsyncPostBackControl method of the ScriptManager control. Controls that are programmatically identified as triggers must be registered every time that a postback occurs. It’s recommanded to be registered in Page_Load.
Example: ScriptManager1.RegisterAsyncPostBackControl(SurveyDataList);
How UpdatePanel Controls Are Refreshed:
Nested UpdatePanel Controls work like this:
protected override void CreateChildControls() { base.CreateChildControls(); Control parent; Control container; // Get a reference to the ScriptManager object for the page // if one exists. ScriptManager sm = ScriptManager.GetCurrent(Page); if (sm == null || !sm.EnablePartialRendering) { // If partial rendering is not enabled, set the parent // and container as a basic control. container = new Control(); parent = container; } else { // If partial rendering is enabled, set the parent as // a new UpdatePanel object and the container to the // content template of the UpdatePanel object. UpdatePanel up = new UpdatePanel(); container = up.ContentTemplateContainer; parent = up; } AddDataboundControls(container); Controls.Add(parent); }
Exposing the Capabilities of the UpdatePanel Control Publicly – just the typical .NET way, use properties
Adding Code to Refresh the User Controls – call the Update method of the inner UpdatePanel control
(Code below straight from MSDN)
public UpdatePanelUpdateMode UpdateMode { get { return this.EmployeeInfoUpdatePanel.UpdateMode; } set { this.EmployeeInfoUpdatePanel.UpdateMode = value; } } public void Update() { this.EmployeeInfoUpdatePanel.Update(); }
To be continued…
A fundamental article on ASP.NET Data Binding found on CodeProject
http://www.codeproject.com/KB/aspnet/Mastering_DataBinding.aspx
In order to change the default look of the tab panel, the tab’s css class property needs to be changed. The official AjaxToolkit site talks about how it should be done briefly:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx
Here are some more extra resources found thru Google (duh!):
http://mattberseth.com/blog/2007/09/creating_a_yui_tabview_style_t.html
http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html
http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx
In Nazar Rizvi’s blog he talks about making changes to the default AjaxToolkit TabPanel’s css class to enable multiple rows of tabs.
The blog teaches where to modify in the source code and you have to rebuild the dll. However, you can just put the following in your style sheet. Note that you do need all of them, and the !important.
.ajax__tab_default .ajax__tab_header {white-space:normal !important;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}
Matt Berseth’s blog talks about lazy-load for the Ajax Toolkit Tab Panels: http://mattberseth.com/blog/2007/07/how_to_lazyload_tabpanels_with.html
The basic idea is to put an update panel inside each tab panel, along with a hidden button as the async trigger of the update panel. The tab panel provides an OnClientActiveTabChanged event, which then calls a JavaScript to click on that hidden button, which in turn causes the postback and the button click event will perform the databinding. In addition, one of the comments suggested another approach by wrapping a update panel around the tab container. While doing this achieves the lazy-load, it also causes the reload of the whole tab container every time, which is rather unpleasant – less of the Ajax feel. The post itself is really useful and it also provides sample code. It’s more helpful to just read the blog than my words here. =)
AJAX-styled FileUpload is the ultimately goal. It’s quite painful right now. I certainly hope that Microsoft comes up with a “real” solution in the near future.
Here are some existing resources to look at, until we combine all the knowledge and build our own. I’ve simply ignore all the paid services and components out there, but modifications to a certain open source solution is definitely acceptable.
SWFUpload
JavaScript/Flash – looks very good at least, and it’s open source.
http://geekswithblogs.net/rashid/archive/2007/08/01/Create-An-Ajax-Style-File-Upload.aspx
Microsoft’s Official ASP.NET video tutorial is actually based off this.
http://www.codeproject.com/KB/aspnet/AJAXUpload.aspx
Uses WebServices – lower level, less of a hack or work-around
Microsoft’s most basic tutorial
http://www.asp.net/learn/data-access/tutorial-54-cs.aspx
FileUploadAjax.Subgurim.net
Does the job, need to dig deep into the non-english code to configure it nicer; Open source
NeatUpload
Seems to be actually neat; Open source
#Upload
Says itself to be a helper class; Open source
CodeProject: Multiple File Upload With Progress Bar Using Flash and ASP.NET
Rating’s high… LOL
http://www.seemysites.net/projFolder/uploader/
Another iframe version and has progress bars
http://www.15seconds.com/issue/010522.htm
Some other reference – relating to help of XML
We need to test all the above and eventually come up with our own flash/activex component.