Asp.net: Required Field Validator with DropDownList

Today I want to share a very simple stuff That I learned while working, its kind of a silly learning, but hopefully will help someone someday. I want to make sure that a DropDownList is been selected before submitting a form. In asp.net we have a control for validation name “RequiredFieldValidator”, till now I have seen using this with only textbox. Below an example is given.

<asp:TextBox runat="server" ID="txtNumber" Width="200px"></asp:TextBox>
<asp:RequiredFieldValidator ForeColor="red" runat="server" ID="rfvNewTrackingNumber"
ControlToValidate="txtNumber" ErrorMessage="* Please type number">
</asp:RequiredFieldValidator>

But we can actually use this required field validator with DropDownList as well. Below another example is given for using with DropDownList

<asp:DropDownList runat="server" ID="ddlMethods" AppendDataBoundItems="True" Width="205px">
<asp:ListItem Value="0">Select Method</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ForeColor="red" runat="server" ID="rfvNewMethod"
ControlToValidate="ddlMethods" ErrorMessage="* Please select method" InitialValue="0">
</asp:RequiredFieldValidator>

Note that in ListItem we have assigned Value=0 and in RequiredFieldValidator InitialValue=0 that is the main trick. If you have binding code in c# please make sure you also Set DataValueField.

Until next time.

Convert anything in online-convert

I was working on a html5 video player dialog in one of my project and I needed some sample video, After few minutes of research I found this awesome site which would help developers a lot when we in need of different file format of a same file.

Here is the direct link for the site. http://www.online-convert.com/. I used in case of converting videos. I hope everyone would be able to find something useful here.

Simple Yet powerful html Content rotator

I found this simple yet powerful html content rotator and using in few of my projects. I think its worth sharing with the community. The library named

jShowOff: a jQuery Content Rotator

You can download the script from this location. It requires two file only, on css which you can copy to your own css file and the other one is of course the java script , there are two distribution for this library, I strongly suggest that you should use the min version.

http://ekallevig.com/jshowoff/

There are some comprehensive set of examples given in the home page for the library. I would suggest to download and look for this examples.

 

Best of luck and happy programming.

Rounded Corner and other stuff in IE7 or IE8

Often we need to have rounded corner support for our html content, filefox, crome, safari and latest version of IE9 have native support for rounded corner for html div and other supported html elements. But Alas! we don’t have support in IE6, IE7 or IE8.

An interesting website is http://border-radius.com/ where we can generate rounded border radius. just visit this site and add your desired pixel. It will generate the required css for you.

 

It’s a copy and pest effort. Now if we need rounded corner in pre IE9 browsers we need some thing out of the box. Then come the custom css and JavaScript libraries and some time html “.htc” behaviors files.

In first option we are going to talk about css3pie it’s a simple yet powerful tool to get some html5 support in old ie browsers. You can download the libraries from its homepage at http://css3pie.com/

Add what ever border you need and at last include behavior:url(/pie.htc) that’s it.

Next we are going to see an query based rounded corner support, http://jquery.malsup.com/corner/ this is the site where from you can download the library its s single file and required to have query in advance. the use is very easy. bellow an screen shot from original site is given.

Try it you would love it. I am sure lots of you are already using it. Good luck and happy programming.

Custom style for your Radio Button,Checkboxes and Select Lists

I was searching for some easy JavaScript code via which I can change the style of html select. Its because we often have requirement to show different style of html select. When I say custom it mean how to entirely change the look and feel of a drop down.

Searching in Google I found couple of solutions to my problem. Most of the design is done via JQuery plugin. among those I find one easy one the link is given bellow.

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

The usage is pretty simple just add the script in your project and add link to your master page or page.

Then add css for your items. example css is given bellow.

.checkbox, .radio {
    width: 19px;
    height: 25px;
    padding: 0 5px 0 0;
    background: url(checkbox.gif) no-repeat;
    display: block;
    clear: left;
    float: left;
}
.radio {
    background: url(radio.gif) no-repeat;
}
.select {
    position: absolute;
    width: 158px; /* With the padding included, the width is 190 pixels: the actual width of the image. */
    height: 21px;
    padding: 0 24px 0 8px;
    color: #fff;
    font: 12px/21px arial,sans-serif;
    background: url(select.gif) no-repeat;
    overflow: hidden;
}

Lastly add css class ‘styled’ tag to the element that you want to make custom. you can customize the script and css to get your designed theme.

"<input type="checkbox" class="styled" /> “

Both script and css is given in the above url. just download and use.

Note: I found a problem while using this. when I use this the auto post back feature of asp.net elements are not working. When I have the solutions will share again.

Update: You can find whole lot of html form element customization examples here. Just choose what ever best suites you. “http://www.netwaver.com/23/24-html-form-elements-customization-techniques/”

Best of luck and Happy programming

Display html Content in WPF (XBAP)

Story of displaying html content in WPF or XBAP (WPF browser application) begins with a simple requirement, we have to show printer friendly version(which is a html content) on few reports in our project that run on Internet and which is a WPF browser application. Well it is a quite simple requirement and most of the application needs such kind of printer friendly version that run on web. There are several techniques or solutions to this problem we are going to take a look each of a kind in short.

WPF Frame Element

First of all we are going to see a simple solution to this problem. WPF have an element called Frame element. Frame element is used to display wpf  page and user control. We can also use a frame element to show our html contents. User need to set the source property of the "Frame" to Uri of the Html Page. Here is a simple code example that shows how to do that.

<Grid Height="300" Width="479">
    <Frame x:Name="myframe" Source="C:\TabotGenerator\TestXbap\HTMLPage1.htm"></Frame>
</Grid>

Few things must need to take in concern before using frame wpf frame or other elements don't support uri other than the site of origin in partial trust mode. so report handler html or aspx or custom handler must be in the site of origin. And while navigating the source must be marked as a Absolute Uri using the "UriKind" Enum.

Open a new Browser Window

Second solution to show html page in wpf is to use a navigation window object of wpf. Its kind of a mini browser where any wpf page or any resource that is viewable can be loaded. The following code snippet will show how to use a navigation window to show html page.

NavigationWindow window = new NavigationWindow();
Uri source = new Uri("http://mydomain/myapp/report.aspx", UriKind.Absolute);
window.Source = source;window.Show();

In the same category we can also use Hyperlink to Popup more traditional kind of browser window, that is popup a IE browser window just like traditional printer friendly version on sites. but to lunch a new browser window target name property must be set to _blank or some thing like that. bellow code snippet is given. Note that hyperlink element is created inside a label. WPF is by designed like this. hyperlink must be inside text elements for example label and text block.

<Label>
    <Hyperlink TargetName="_blank" NavigateUri="http://mydomain/myapp/report.aspx"></Hyperlink>
</Label>

3.5 SP1 Web Browser Control

Microsoft dot net framework 3.5 Service pack one is equipped with a new control type called web browser control. Web browser control is a very smart control supporting navigation to normal Uri source and also displays html content dynamically. User can set its source property to display html page which is traditional way just like two above mentions technique. Web browser control also support three life saving methods.

Uri source = new Uri("http://mydomain/myapp/report.aspx", UriKind.Absolute);
WebBrowser browser = new WebBrowser();
this.Content = browser;browser.Navigate(source);
browser.NavigateToStream(new FileStream("Pathofthehtmlfile",FileMode.OpenOrCreate));
browser.NavigateToString("<html> whole html content </html>");

 

Among the above mention methods “NavigateToString” is very usefull in case we need to display html content which is available to us as a string data. And we don’t have to use any printer friendly handler page on the source of origin site in this case. We can retrieve our printer friendly html content using a string content and then just use NavigateToString to display the conent. We can also use template html to generate html content for printer friendly version.

Using Windows Forms Web Browser control

In case we are not using dot net framework 3.5 sp1 we can still implement the technique to display html content directly in browser without having a ASPX handler page in the site of origin of the XBAP. We are going to use a legacy browser control of window forms. Window forms have a built-in browser control from the release of Microsoft .net framework 2. We can also use this control using this legacy browser control via windows forms host control of WPF.

<Grid Height="300" Width="479"><WindowsFormsHost Name="windowsFormsHost1" /></Grid>

 

System.Windows.Forms.WebBrowser browser = new System.Windows.Forms.WebBrowser();
windowsFormsHost1.Child = browser;
//do assign the html content directly 
browser.DocumentText = "our html string";
//or do assign the uri of the html page
Uri source = new Uri("http://mydomain/myapp/report.aspx", UriKind.Absolute);
browser.Navigate(source);

Conclusion

Using the above solution one thing must be kept in mind that any time you can encounter with the system.net.permission error or perhaps partial security violation error. for this you need to modify your code in such a way so that you can get the best out of it. In my case I will use the new 3.5 sp1 browser control. I will retrieve the html content via some web service or WCF service and then assign the string to web browser using navigate to string method. Best of luck and happy programming.

Window Close Event of Browser

"Window close event of browser"... people is searching for this key sentence for long and found some solutions also. But sorry to admit that there is no direct support for detecting the window close event of browser or perhaps browser's tab in html or JavaScript. All we have few nice trick of html DOM(document object model) event which is used to simulate the browsers close event. Not all the codes work fine, or we can say that not all code work on all conditions.

onbeforeunload or onunload

Two of the most popular event of html DOM that is used to detect browser's close event is "onunload" and "onbeforeunload". Using onunload is pretty strait just subscribe the JavaScript event. "onunload" work okay on IE(Internet explorer) but doesn't work fine in Mozilla firefox on the other hand "onbeforeunload" works okay on both IE and firefox, so using "onbeforeunload" is safe. Lets look at a strait example how this is accomplished.

<script language="JavaScript">
window.onbeforeunload = WindowCloseHanlder;
function WindowCloseHanlder()
{
window.alert('My Window is reloading');
}
</script>

As you can see this approach is pretty strait and suppose to work. But it doesn't work always, in fact it doesn't work at all! well these two event fires each and every time on these operations.

• post back
  
• navigate to another page
  
• refresh
  
• close the browser
  
• close the current tab
  

There could be more cases that I haven't encountered yet or failed to mentioned, but these are the most renowned cases. As you can see that the first three cases happens very frequently, so this technique does not work. Yet there are other solutions for overcoming the problem. Here is a forum discussion on that http://codingforums.com/archive/index.php?t-37279.html. You can find more discussion if you Google it.

Extending the onbeforeunload technique

If we handled the case of post back, navigate and refresh, "close event" detect will be fulfilled. So we are going to use some old fashion technique to handle that. If you want to perform any operation in html using mouse, you have to click on some kind of html element to do that. And that's why we will trap the mouse down event. We will mark any kind of mouse down on link, button, and any element so that when post back or navigate we can detect that, its happening because of user interaction on page. Next we will trap any special key event to make the page refresh or reload, for instance pressing Ctrl+f5,f5 and Ctrl+R can make the page refresh so we will also mark such kind of keyboard operation. So we will mark any kind of keyboard event and any kind of mouse event, other than those already mentioned case we are not marking the Alt+f4 or the browser or tab close. So if our window close event fires it happen definitely because of closing the browser or closing the tab. Bellow a simple code snippet is given to demonstrate the idea.

<body onbeforeunload="doUnload()" onmousedown="somefunction()">
<form id="form1" runat="server">
</form>
</body>
<script language="javascript" type="text/javascript">
var isClose = false;
//this code will handle the F5 or Ctrl+F5 key

    //need to handle more cases like ctrl+R whose codes are not listed here
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event)
keycode = window.event.keyCode;
else if (e)
keycode = e.which;
if(keycode == 116)
{
isClose = true;
}
}
function somefunction()
{
isClose = true;
}
function doUnload()
{
if(!isClose)
{
alert('window is closing');
}
}
</script> 

Conclusion

As we have already discusses that there is no 100% full proofed way to detect the browser close event in lot of case the above technique can failed, for example if the user kill the browser's process from task manager there could be many more cases. Yet in lot of case this technique can be handy. Best of luck and happy programming.

Select Items of a html Select

As you all know in asp .net when we define a dropdown list it is converted to a html select.

<asp:DropDownList id="ddlNewsLetter" runat="server"></asp:DropDownList>

Now in html…

Its look like this

<select name="GcbsUC:ddlNewsLetter" id="GcbsUC_ddlNewsLetter">
<option value="1">July 11, 2006</option>
<option value="2">June 14, 2006</option>
<option value="3">May 14, 2006</option>
<option value="4">April 9, 2006</option>
<option value="5">March 16, 2006</option>
<option value="6">February 19, 2006</option>
</select>

In C# code i have populated the dropdown list with a counter and a data…

Well if we what to select a perticular dropdown item from the list… how we do it…

Option

1 . document.getElementById(‘ControlName’).selectedIndex = ‘ourvalue’; [here ourvalue must be an integer and between a range of the options.length.

2. document.getElementById(‘ControlName’).value = “ourknownvalue”;

[here ourknownvalue can be 6 that is <option value="6">February 19, 2006</option>]

3. well can can always loop through the items and do what ever we like with the property

    document.test.test2.options[0].value
    document.test.test2.options[2].text

Here is an example

var ddlNewsLetter = document.getElementById('ddlNewsLetter');
if(ddlNewsLetter!=null)
{
for(var i=0; i < ddlnewsletter.options.length; i++)
{
if(ddlnewsletter.options[i].text == strnewsletterdate)
{
ddlnewsletter.options[i].selected = true;
break;
}
}
}