Skip to main content

Posts

Showing posts from 2007

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

Image-Based Bot Detector

Image-Based Bot Detector is a variant of image-based CAPTCHAs that uses human ability to recognize a distorted region on the image he never seen before. Licence Copyright (c) 2007, Mykola Tarasyuk All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: * Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. * The name of the copyright holder may not be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF ME

Merging columns in GridView/DataGrid header

As necessity to show header columns in a few rows occurs fairly often it would be good to have such functionality in the GridView/DataGrid control as an in-built feature. But meanwhile everyone solves this problem in his own way. The described below variant of the merging implementation is based on irwansyah 's idea to use the SetRenderMethodDelegate method for custom rendering of grid columns header. I guess this approach can be simplified in order to get more compact and handy code for reuse. The code overview As it may be required to merge a few groups of columns - for example, 1,2 and 4,5,6 - we need a class to store common information about all united columns. [Serializable] private class MergedColumnsInfo { // indexes of merged columns public List<int> MergedColumns = new List<int>(); // key-value pairs: key = the first column index, value = number of the merged columns public Hashtable StartColumns = new Hashtable(); // key-value pairs: ke

Flaw with buttons in the GridView pager

For unknown reason the GridView pager in Numeric and NumericFirstLast modes does not take into consideration values of the PreviousPageText and NextPageText properties from the pager settings. Instead an ellipsis is shown. Of course, you may say that the buttons with the ellipsis implement a bit different functionality. Yes, they do. But the problem leaves - text on these buttons is not customizable. Sometimes it becomes problematic especially if your customer is too pernickety. To solve this flaw you can use next approach: GridView1.RowDataBound+=new GridViewRowEventHandler(GridView1_RowDataBound); protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Pager) { Table pagerTable = (Table)e.Row.Cells[0].Controls[0]; TableRow pagerRow = pagerTable.Rows[0]; PagerSettings pagerSettings = ((GridView)sender).PagerSettings; int cellsCount = pagerRow.Cells.Count; if (pagerSettings.Mo

Image-based CAPTCHA. Demo Project

Demo project that illustrates the idea of the image-based CAPTCHA . The code overview The proposed image-based CAPTCHA control works in such a way: a visitor sees a picture with a distorted part and he has to click elsewhere in the anomalous region boundaries. The point he clicks on will be marked with a red spot. The control fulfils a double functionality, it renders its HTML content and forms the picture itself. It has two child controls: an image, and a hidden field that serves to store coordinates of the visitor's chosen point. The image URL forms by adding the special parameter to the currently requested URL. When the request to this new URL comes, the control interrupts the usual process of page loading and writes the image as a byte array in the response. protected override void OnInit(EventArgs e) { if (HttpContext.Current.Request[queryKey] != null) DrawImage(); ..... } private void DrawImage() { Bitmap bitmap; //the image creation goes here

Image-based CAPTCHA

The brief overview of the most known implementations Carnegie Mellon's PIX CAPTCHA - the so called "naming images CAPTCHA" - the user sees a few pictures, and has to select a word that is appropriate to all the shown pictures. The main problem of this type of CAPTCHAs is misspelling while writing the answer, and synonyms for the answer-word (for example: dog, hound, pooch). In the described case, this is solved by means of transferring all the variants of the answer to the client side. Oli Warner's KittenAuth - in order to prove his humanity, the visitor has to select all animals of a specified species among the proposed pictures. But, the limited number of pictures allows to recreate the picture base manually. Microsoft's Asirra - in outline, it is similar to KittenAuth - the user has to distinguish cats from dogs - but, it works with an extremely large array of pictures (photos of homeless animals from the specialized site), and a reconstruction of the pictur

Implementation of paging and sorting for the GridView control that works with an array of objects

Fairly often, such a data presentation model is used: an array of objects is bound to a GridView control with predefined columns. This model was popularized by the DotNetNuke web framework and has the advantage of working with the business objects instead of nameless rows of a data table. A classic example: <asp:GridView id="gv" runat="server" AutoGenerateColumns="False" ... <Columns> <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" /> ... </Columns> </asp:GridView> and elsewhere in Page_Load: if (!IsPostBack) { gv.DataSource = someArray; gv.DataBind(); } A pretty good model, in my opinion. But, the GridView control does not have built-in ability for sorting and paging if it is bound to an array of objects. Let's implement it. The code overview I inherit my control from the GridView control and override the OnInit method in order to add two