Controls that are not compatible with UpdatePanel controls

We all know that update panel is one of the wonder of asp.net Ajax and really gave a very good first impression on everyone. After mounts past some problems are starting to popup as some of the controls are not compatible with update panel. 

We might need to use other tricks to achieve required feature while using the bellow controls. I have done a little research on Update panel and found that bellow listed controls are not compatible with UpdatePanel.

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not designed to work inside an UpdatePanel control:

• Treeview
• Menu control
• FileUpload
• HtmlInputFile.
• GridView
• DetailsView
• Login
• PasswordRecovery
• ChangePassword
• CreateUserWizard    
• The Substitution control

We might skip Updatepanel or use some kind of trick to overcome the problems with the above controls while using Updatepanel.

Source

http://msdn.microsoft.com/en-us/library/cc295545.aspx

Multiline editable combo in WPF

Today I am going to share a interesting learning experience that I had about editable combo box. In one of my project we have a requirement that all editable text need to support  multi-line support. very easy stuff. Just set IsEditable property of combo box to "true".

   1: <ComboBox x:Name="ddlCombo" 

   2: MaxDropDownHeight="200"  

   3: FontWeight="Normal" 

   4: Text="{my:CellEditorBinding}"  

   5: BorderThickness="0" 

   6: Padding="0" Margin="0" 

   7: IsEditable="True"  

   8: Foreground="Black" />

Now, the problem is, in couple of our grid cell we had combo box with editable feature. User can write their own choice or they can pick a value from the drop down list. since the text box of combo is a text editing area. clients wanted warp text with new line in the edit area of the combo box. After few minutes of "R & D" we discovered the way to override the control template and modified the textbox of combo box in such a way so that it can take multi-line and warp text content in combo box.

To give a textbox warped text feature i just added the following code, and it will do the job.

   1: <TextBox x:Name="PART_EditableTextBox"

   2:             Style="{x:Null}" 

   3:             Template="{StaticResource ComboBoxTextBox}" 

   4:             HorizontalAlignment="Left" 

   5:             VerticalAlignment="Center" 

   6:             Margin="3,3,23,3"

   7:             Focusable="True" 

   8:             Background="Transparent"

   9:             Visibility="Hidden"

  10:             TextWrapping="Wrap" 

  11:             AcceptsReturn="True"                                 

  12:             IsReadOnly="{TemplateBinding IsReadOnly}"/>

Best of luck and happy programming.

Light box effect with WPF.

Light box effect is becoming a trend to show modal dialog in both web and desktop applications now a days. In WPF we can also achieve this goal with little effort. Its not actually a light box but give users a elusion of a light box.

Wpf Container controls display last element of the logical tree on top of all visual elements. we have used that feature to produce this effect. First of all we are going to add a grid as the root element of a page or window, and we are going to add the dialog XAML as the last child of the grid.

<Border x:Name="panelDialog" Visibility="Collapsed">
<Grid>
<Border Background="Black" Opacity="0.49"></Border>
<!--While Xmal Content of the dialog will go here-->
</Grid>
</Border>

Just put two function for hide and display the dialog. Total Code is given bellow. In bellow code I have Displayed a loading screen with light box effect. When displaying modal dialog just invoke show and hide wait screen methods. Its good to send your cpu expansive jobs to background thread and use dispatcher to update UI while you are in background thread.

 

XAML CODE

<Page x:Class="Home">
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<!--All the contents will go here-->
</ScrollViewer>
<Border x:Name="panelLoading" Visibility="Collapsed">
<Grid>
<Border Background="Black" Opacity="0.49"></Border>
<local:TMEWaitScreen></local:TMEWaitScreen>
</Grid>
</Border>
</Grid>
</Page>

C# CODE

#region About Wait Screen
/// <summary>
/// Show wait screen before a web request
/// </summary>
public void ShowWaitScreen()
{
Process del = new Process(ShowWaitScreenUI);
Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Normal, del);
}
private void ShowWaitScreenUI()
{
panelLoading.Visibility = Visibility.Visible;
}
/// <summary>
/// Hide a wait screen after a web request
/// </summary>
public void HideWaitScreen()
{
Process del = new Process(HideWaitScreenUI);
Dispatcher.Invoke(System.Windows.Threading.DispatcherPriority.Normal, del);
}
private void HideWaitScreenUI()
{
panelLoading.Visibility = Visibility.Collapsed;
}
#endregion

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.

Install WCF & Asp.net in IIS7

II7 is the default Internet information server for Window vista and window server 2008. In few cases I found that WCF and asp.net 2.0 is not working in iis7. This short of problem is often encountered, if you install dot net framework first and then install IIS7.

To resolve any kind of issue regarding this short of problems an easy way out is to reregister asp.net to IIS and register service model stuff to iis7.

Register Asp.net

To register asp.net go to your visual studio command prompt and type "aspnet_regiis -i" this will install and set all configuration to iis7. provided you have dot net 2.0 and later available in your machine. window vista by default have dot net 3.0.

Register WCF

To register wcf service to iis you got to run another tool called "ServiceModelReg.exe" this tool is located in "C:\WINDOWS\Microsoft.NET\Framework\v3.0\Windows Communication Foundation" directory. Provided that "c:" contains your windows directory. open the command prompt and go to the above mentioned directory with "cd" and run "ServiceModelReg.exe -i", that's it you are done. 

A Special note

Same procedure can be used to resolve any issue in widows XP and windows server 2003. To work above things in windows vista you must run the command prompt with "run as administrator". For this right click on the command prompt and select run as administrator.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.