Archive for March, 2010

Non-Embedded Content for your Popup Control’s Target Container

Yesterday I posted about client side predicates for Popup controls. Thanks for all the Tweets and Emails.

The Popup control is very powerful and Popups are now an expected construct in many web user interfaces.

I received a number of questions about using content in Popups that is not embedded in the containing page.

Probably the easiest is to use in iFrame inside the Panel container for the Popup.

In code it looks like this.

Code Snippet
  1. <h1>Modal iFrame</h1>
  2. <asp:Button ID="ButtonIFrame" runat="server" Text="Button" /><br /><br />
  3. <div>
  4.     <asp:Panel ID="PaneliFrame" runat="server" CssClass="modalPopup"
  5.                                 Style="display: none" Width="450px" Height="250px">
  6.     <iframe name="f1" src="Popup.aspx"  frameborder="0" scrolling="no" width="100%" height="200px">
  7.     </iframe>
  8.     <br />
  9.        <div align="center">
  10.           <asp:Button ID="OkButton" runat="server" Text="OK" />
  11.           <asp:Button ID="CancelButton" runat="server" Text="Cancel" />
  12.        </div>
  13.     </asp:Panel>
  14.     <br />
  15.    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderIF" runat="server"
  16.              TargetControlID="ButtonIFrame"
  17.              PopupControlID="PaneliFrame"
  18.              BackgroundCssClass="modalBackground"
  19.              DropShadow="true"
  20.              OkControlID="OkButton"
  21.              OnOkScript="onOk()"
  22.              CancelControlID="CancelButton" />
  23. </div>

There is an advantage when using the iFrame in that you can reference a complete HTML or ASPX page since the iFrame expects this.

IN the example above I set the href attribute of the iFrame to a .aspx page (Popup.aspx) in the same solution but you need not do this. The href attribute can be set to any url that you like, even on a different domain.

This avoids an issue that we will need to consider when using the other three methods that I will discuss below.

HTML and ASP.NET both have requirements that define “well formedness”. HTML, for example, declares that a page may only have one <head> section. ASP.NET declares that a page may only have <form> tag with a “runat=server” attribute.

We need to consider this when “inserting” content into our page elements (such as the container that is displayed whern a Popup is shown.

Next lets look at using an ASP.NET User Control in a Popup.

Code Snippet
  1. <h1>Modal Control</h1>
  2. <asp:Button ID="ButtonControl" runat="server" Text="Button" /><br /><br />
  3. <div>
  4.     <asp:Panel ID="PanelControl" runat="server" CssClass="modalPopup"
  5.                                  Style="display: none" Width="450px" Height="250px">
  6.    <uc1:ControlForPopup ID="ControlForPopup1" runat="server" />
  7.  
  8.        <br />
  9.        <div align="center">
  10.           <asp:Button ID="ButtonOkControl" runat="server" Text="OK" />
  11.           <asp:Button ID="ButtonCancelControl" runat="server" Text="Cancel" />
  12.        </div>
  13.     </asp:Panel>
  14.     <br />
  15.    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderControl" runat="server"
  16.              TargetControlID="ButtonControl"
  17.              PopupControlID="PanelControl"
  18.              BackgroundCssClass="modalBackground"
  19.              DropShadow="true"
  20.              OkControlID="ButtonOkControl"
  21.              OnOkScript="onOk()"
  22.              CancelControlID="ButtonCancelControl" />
  23. </div>

This method works pretty much as you would expect with the use of any User Control, and you need to be careful with things like code based rendering (Response.Write), just like any other User Control

Or, we could use the #include directive as below..

Code Snippet
  1. <h1>Modal Include</h1>
  2. <asp:Button ID="ButtonInc" runat="server" Text="Button" /><br /><br />
  3. <div>
  4.      <asp:Panel ID="PanelInc" runat="server" CssClass="modalPopup"
  5.                               Style="display: none" Width="450px" Height="250px">
  6.         <!–#include file="inc_popup.aspx"–>
  7.  
  8.        <br />
  9.        <div align="center">
  10.           <asp:Button ID="ButtonOK_Inc" runat="server" Text="OK" />
  11.           <asp:Button ID="ButtonCancel_Inc" runat="server" Text="Cancel" />
  12.        </div>
  13.     </asp:Panel>
  14.     <br />
  15.    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtenderInclude" runat="server"
  16.              TargetControlID="ButtonInc"
  17.              PopupControlID="PanelInc"
  18.              BackgroundCssClass="modalBackground"
  19.              DropShadow="true"
  20.              OkControlID="ButtonOK_Inc"
  21.              OnOkScript="onOk()"
  22.              CancelControlID="ButtonCancel_Inc" />
  23. </div>

I’m including a file with a .aspx extension but it is not (nor can it be) a complete ASP.NET page for the reasons stated above.

Lastly, you could fetch the content to be displayed in the Popup on demand via a JavaScript callable services method as shown in this video -

AJAX Content Fetch from JavaScript

Grab a working sample here http://misfitgeek.com/downloads/code/ModalPopup-ExternalSource.zip 

Have fun !

Technorati Tags: ,

ASP.NET AJAX Modal Popup on Mouse Over

Today’s customer question concerns client side predicates for showing a Modal Popup control.

I’m happy to be getting these kind of questions because it shows how ASP.NET developers are continuing to evolve their web development perspective and separate server logic execution and client logic execution.

Though the Modal Popup Extender is a Server Side control extender it HAS client side events and methods. This exposes the Modal Popup to any JavaScript coding that we want.

Example – mouseover !

Code Snippet
  1. <a href="" onmouseover="myMouseOver();">
  2. <img runat="server" id="rollover" alt="" src="image.jpg" border="0" name="rollover" /></a>
  3. <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
  4.           TargetControlID="rollover"
  5.           PopupControlID="Panel1"
  6.           BackgroundCssClass="modalBackground"
  7.           DropShadow="true"
  8.           OkControlID="OkButton"
  9.           OnOkScript="onOk()"
  10.           CancelControlID="CancelButton" />

Note that the TargetControlID is the Image of the anchor tag and the onmousover event handler calls my custom JaqvaScript function myMouseOver() which displays the Modal Popup as follows:

Code Snippet
  1.     <script type="text/javascript">
  2.     var MakeChoice;
  3.     function onOk() {
  4.     // Do stuff Here.
  5.     }
  6.     
  7.     function myMouseOver() {
  8.         $find("ModalPopupExtender1").show();
  9.     }
  10.  
  11. </script>

Click OK or Cancel closes the Modal Popul as you would expect.

Viola !

Bur don’t stop there – use more client side logic to customize the user experience. For example, you could automatically display the Pop Up on Mouse Over and start a timer to count down and hide it again ( $find(“ModalPopupExtender1”).hide(); ) after a certain number of seconds.

Keep making your UIs ROCK !

You can download a runnable sample [ HERE ]

Technorati Tags: ,

Podlogger – Half Baked Code, but yours for free.

image

Some time ago I started building a demo application that would have been posted on www.asp.net.

It is a Podcast Publishing application and completing “basic” functionality we decided that it was a bit too complex for the intended introductory material.

Though not finished (Meaning NOT FINISHED, INCOMPLETE, IMPERFECT, ETC) I thought I’d share it in case anyone finds it useful.

Some of the stuff that is in there :

  • Basic Post Publication with Rich Editor
  • File Upload
  • Comments Submission
  • RSS Feed Publication
  • Integrated Silverlight Audio Player
  • Basic Admin

This code is NOT supported and NOT offered as best practice.

It’s simply a prototype that I’m sharing in case anyone finds it useful.

If you use it anywhere, please let me know what you grow it in to.

[ Click HERE to get the code. ]

Dynamic User Specific CSS Selection at Run Time

I had a cool question while I was at MIX.

A developer needed the ability to have his site render pages using a CSS file selected based on some user specific criteria.

ASP.NET 4 controls generate CSS friendly output and more and more we web developers are using CSS for layout etc.

Using multiple CSS files in our site wide templates we can not only provide different aesthetic experiences but we can charge the style based on the device type (Printer or Phone) or the special needs of the end user (Color Blind of Vision Impaired).

It’s really easy.

I set the Theme Directory yin the Session Start Event Handler.

Though I’, simply setting to a static value here, this is were you would make some decisions in code. You could check for a cookie or the device type.

If you want to make the CSS user selectable you might use a default CSS file until the user logs in and then set this Session Object in the Log In event handler.

protected void Session_Start(object sender, EventArgs e)
{
Session["Theme"] = "Default";
}

Make sure your login never fails to set this value. If you’re depending on a Profile setting or Cookie Value, make sure you have a default setting do that it’s never empty.

Then you can just reference it dynamically in the Style Sheet inclusion of your Mast Page file like this.

 

<link href="/Styles/<%= Session["Theme"] %>/Site.css" rel="stylesheet" type="text/css" />

Simple, but useful.

I was going to get an iPhone, BUT ……..

WinMo7 My cell phone contract expires in a couple weeks and I was all set to buy an iPhone.

The iPhone had started to take off when I got my current phone / contract but at that the time Microsoft paid for a significant portion of my phone bill so staying with a Windows powered phone was appropriate (I like to be a good team player.) 

Budget tightening as changed the expense policy and now Microsoft’s contribution to my cell phone expenses is limited to $35.

So, I figured I’d get an iPhone, it’s what all the cool geeks have. 

Plus, my Windows phone from T-Mobile is falling apart, which matters little since it’s never really worded all that well any way.

Windows Mobile 6 wasn’t a real home run in comparison.

There have been a number of reasons to prefer the iPhone.

  • Its Cooler
  • Multi Touch UI.
  • Best phone media experience.
  • The App Store with TONS of applications.
  • Huge 3rd party hardware market.
  • Windows mobile apps never seem to be stable enough.

Everyone knows that Apple’s iPhone is the bomb, right ?

Well, today at MIX “The Gu” introduced then Windows Phone 7.

Yea, I know, I work for Microsoft but if you think THAT means I’ll toe the party line than you must be new to reading my blog. 

But as a consumer of phones and a developer there is much in Windows Phone 7 to interfere with my decision to move to the iPhone.

Though the Windows Phone 7 is not “in my hands” yet and I’m talking about preview technology, lets consider what some of those this are.

  • The User Experience – there is nothing wrong with the iPhone user experience but the Win Phone 7’s UE appeals to me because it’s not just a slick interface, it seems to be designed and optimized for phone specific use from little things like like the quick one touch “I’ll be late to this meeting” feature to built in Social Networking functionality.
  • Hardware standards. Microsoft has set detailed specs for the venders who are implementing the hardware. Screeen dimensions, multi-touch, etc will all be standard across devices making development of applications that will work on all devices much easier.
  • Zune features ! – Though perhaps not as neuvo-cool as latest generation iPods, I’ve always felt that for full media experiences the Zune was the best device on the market. Win Phone 7 has a Zune-Like Media Experience.
  • xBox Live – Win Phone 7 supports XNA. This means that you can use the same development technology for games development as that which is used for the xBox. In fact you can play games on the Win Phone 7 that are xBox Live aware.
  • Silverlight 4 !!!!!!! (That’s right the SAME technology stack that was just used to stream and deliver the winter Olympics to millions of sports fans.)

As a developer myself, Silverlight 4 is HUGE !!

The Silverlight 4 PHONE developer experience is the same as any other Silverlight 4 experience. That means you use Visual Studio and C# or Visual Basic to do your development. (And we’ve announced FREE versions of our development tools for Windows Phone 7 Application Development.)

That means like a MILLION developers are already out there who can start with the technology that they already know to build Phone 7 Applications.  And, Visual Studio, .NET, and C#/VB will prove to be move productive than previous phone development paradigms (including Microsoft’s)

…. and there will be apps !!!

Ebay announced a program by which developers will be able to sell and distribute Windows Phone 7 applications on eBay. And, I suspect eBay won’t be the only on line Windows Phone 7 application store to appear.

So, as a consumer, the only question left to be answered when comparing the iPhone to Windows Phone 7 is 3rd party hardware, and I predict that the 3rd party hardware offerings will be plentiful and will start becoming available about the same time the actual phones start hitting the street.

But, I’m not just a phone consumer, I’m a developer.

I dabbled in in Windows CE/CF style phone development and phone development for the iPhone but found both to be too “nitty” for my casual use.

Now though, I can use the same tools that I develop with every day to build apps that I (and hopefully YOU) really want on my phone.

Since it’s .NET I get a network stack so I can code any feature that I like interfacing with Twitter, Facebook, etc.. Since it’s Silverlight I get XAML based UI and the richest media experience on the web.

And THAT seals the deal for me.

Not the only question is – how soon can I get my hands on a couple of them.

Thankfully, the new dev tools come with a complete emulator so I can start building those applications NOW and deploy them as soon as I get my Windows Phone 7 in my geeky little hands.

Podcast – Julie Lerman on Learning The Entity Framework

Episode #6 – Julie Lermon on Learning The Entity Framework

In this episode The Misfit Geek talks with Data Expert Julie Lerman on leanring LINQ to Entities and the Entity Framework. .

 Resources ……


 If you are interested in advertising, have suggestions, or advice…. Please CLICK HERE and send them to me. 


Download Now !

Download MP3 Download WMA Download WMA-Fi Download ACC

Did you miss the IIS7 FastCGI Update ?

In case you did, there are some interesting improvements like….

  • Monitor changes to a file. The module can be configured to listen for file change notifications on a specific file and when that file changes, the module will recycle FastCGI processes for the process pool. This feature can be used to recycle PHP processes when changes to php.ini file occur. To enable this feature use the monitorChangesTo setting in the <fastCgi> configuration element.
  • Real-time tuning of MaxInstances setting. This MaxInstances setting dictates the maximum number of FastCGI processes which can be launched for each application pool. Set it to 0 to let FastCGI module automatically adjust the number of instances up or down based on the system load and number of requests waiting in the queue.
  • STDERR stream handling. There are several options of how the module can handle text sent by FastCGI application on STDERR. The module can send the error data as a failure response to the HTTP client or it can ignore the error and send whatever was received on STDOUT as a response with 200 status code. This behavior is controlled by the stderrMode setting.
  • Sending a termination signal to FastCGI processes. The module can be configured to send a termination signal to FastCGI process before terminating it. This enables FastCGI processes to do a clean shutdown before getting killed. The signalBeforeTerminateSeconds setting can be used to specify how long the module will wait before it forcefully shuts down the FastCGI process that does not respond to the termination signal. This feature is disabled by default.
  • _FCGI_X_PIPE_ environment variable. This variable is set by FastCGI module and it contains the name of the named pipe that is used for communication between the module and FastCGI process.
  • Relaxed enforcement of response headers syntax. The FastCGI module now has less strict enforcements for the correctness of the response headers.
  • Using UTF-8 encoding for server variable values. By default FastCGI uses ASCII encoding when setting server variables. If a FastCGI application requires UTF-8 encoded values for certain server variables, the module can be configured to use UTF-8 only for required server variables. Follow these instructions to enable this functionality.

 

Get the update with the “Web Platform Installer” here – http://www.iis.net/webpi