Skip to main content

Posts

How to use standard FileUpload in AJAX-enabled web applications

I would like to note that this article is not about the ability to upload files to the server without the postback. There are a lot of articles on this topic, just type "AJAX FileUpload" on any search engine and you'll get many examples. However with AJAX they actually have little in common, because the XMLHttpRequest does not support asynchronous uploading of files to the server, they are rather a variety of imitations, for example, using hidden IFRAME element. Nevertheless I want to emphasize that the article is not about that but about the standard FileUpload control. There are two problems you might encounter when using it on UpdatePanel. Problem 1 If the postback is caused by the control which lies on UpdatePanel, FileUpload is always empty when it has come to the server, regardless whether a file has been selected or not. Example: <asp:UpdatePanel ID="UpdatePanel1" runat=server> <ContentTemplate> <asp:FileUpload ID="FileUpload1...

Simultaneous Selection of Checkboxes in a GridView's column

If you are using checkboxes in GridView in order to select a few rows, then, no doubt, you have been faced with the task how to select/deselect all checkboxes in a selected column at a time. Usually it is solved by addition of special buttons somewhere or addition a checkbox in the GridView's column header. I want to dwell on the second variant. In order to refrain from repetition of code all of required functionality can be hidden inside of a special control. This control is inherited from the CheckBox and have only one method overriden (OnLoad). Inside the method a script is registered, this script allows to select/deselect all checkboxes in a GridView's column if a checkbox in the GridView's header is clicked. Besides, the script tracks situation when all checkboxes in rows are selected one by one and selects the checkbox in the column's header. public class GridViewCheckBox : CheckBox { protected override void OnLoad(EventArgs e) { GridViewRow parentRow = th...

Dynamic Rounded Panel

This is another variant of the rounded panel creation (the first one you can see here ), that uses images to present curved corners. To be more precise, the only image is used, the one that is build based on the specified circle radius, the background color, the border color and width. The panel appearance varies according to all these parameters and can be dynamically changed in runtime. Picture 1. The structure of the top part of the rounded panel a - the left part where the upper left part of the image is shown. b - the middle that is filled with the background color and contains a block element (d). The d element imitates the image border. c - the right part where the upper right part of the image is shown. Of course, the middle can be simpler if to use the only block that is filled with the background color and has the upper border. But different browsers interpret borders ambiguously, some of them enlarge total height of the block element. It caused a small complication of th...

How to avoid unexpected postback after pressing Enter in textbox

Problem You fill a form with many input fields. After filling first textbox you mechanically press Enter and see that the page are submitted to the server. Inasmuch as the rest of the fields stay blank the result of this submit is either saving incomplete data or a few validators of type "Field XXX is required." are shown. The well-known situation, is not it? It is not very good to allow such behaviour in a web application, especially because it easily can be corrected. Of course, there are situations when this is useful (e.g.: you have a single search box and after typing a search keyword it is very convenient to start search by pressing Enter). But in the most cases such behaviour just annoys visitors. Solution Surprisingly, but this inconvenience caused by built-in browser conveniences. :) Convenience #1. If a form contains only textbox then regardless of the submit button presence pressing Enter will send the form to the server. http://msdn2.microsoft.com/en-us/library/...

How to Register Stylesheet Created in Runtime

Here is an example from MSDN : // Create a Style object for the section of the Web page. Style bodyStyle = new Style(); bodyStyle.ForeColor = System.Drawing.Color.Blue; bodyStyle.BackColor = System.Drawing.Color.LightGray; // Add the style to the header of the current page. Page.Header.StyleSheet.CreateStyleRule(bodyStyle, this, "BODY"); It is the simple and handy method but has a few flaws. 1. Output is far from optimal. For example, following code that adds a border someStyle.BorderColor = System.Drawing.Color.Red; someStyle.BorderStyle = BorderStyle.Solid; someStyle.BorderWidth = new Unit("1px"); produces this output border-color:Red;border-width:1px;border-style:Solid; instead of border:Solid 1px Red; It has no matter if you don't pay attention to the size of pages you develop, but it is taken into consideration if you take into consideration your visitor's needs (sorry for tautology). But it's a trifle, of course. I mentioned it just for completene...

How to Add Additional Element to GridView Pager without PagerTemplate

PagerTemplate allows to create any configuration of pager but it also requires custom paging to be implemented. Sometimes built-in paging completely meet all needs but a little modification is reduired, for example, ability to change page size. That can be done within RowCreated event handler. <asp:GridView ID="GridView1" runat=server AllowPaging="True" OnRowCreated="GridView1_RowCreated" ... Code behind: protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Pager) { DropDownList ddl = new DropDownList(); //adds variants of pager size ddl.Items.Add("5"); ddl.Items.Add("10"); ddl.AutoPostBack = true; //selects item due to the GridView current page size ListItem li = ddl.Items.FindByText(GridView1.PageSize.ToString()); if (li != null) ddl.SelectedIndex = ddl.Items.IndexOf(li); ddl.Se...

Rounded Panel without Images

Panels with rounded borders are widely used in the web site design. So widely that it is hard to add something new. I just try to wrap existing ideas in the form of a web control. Features: Can be set radius of the circle, back color and border color Without images (pure HTML) Only 130 lines of code Easy to use (see examples below this article) <cc:RoundedPanel ID="RoundedPanel1" runat="server" CssClass="r1" BorderColor="Gold" BackColor="Beige" Radius="9"></cc:RoundedPanel> I inherit control from WebControl. Mainly it will be a container for another elements so it needs PersistChildrenAttribute and ParseChildrenAttribute to be set correctly. BackColor and BorderColor properties have been defined in the base class, only radius of circle has to be added. [PersistChildren(true), ParseChildren(false), ToolboxData("<{0}:RoundedPanel runat=\"server\"></{0}:RoundedPanel>"), Designer(typ...