Life, Opportunity, and Development

If your jquery forms don't work when you call ajax with a get. Make sure if it is using theming then you have the theme set to nothing :).

Post your methods for getting intellisense in jQuery. So far, this is the best I have found.

 

http://lancefisher.net/blog/archive/2008/02/12/intellisense-for-jquery-in-visual-studio-2008.aspx

Overview
Silverlight 2 Beta brings the wonders of Silverlight and removes the annoyance of Javascript. The question remains: How do I get Silverlight deployed on my webserver even though it isn't out yet? This article will walk through creating a simple "hello world" silverlight application and deploying it on your webserver. This article assumes you have Silverlight 2 installed with the Visual Studio 2008 templates.

Create the Silverlight project

• Open Visual Studio 2008
• Click File->New Project
• Under Visual C# click Silverlight
• Select Silverlight Application, name it what you want, and click ok
• When it asks you if you would like to create a web project, click add a new and click ok

Now you should have two projects. Under the library, click and open up your Page.xaml file. You are going to add xaml to the Grid control so that it looks like this:

<UserControl x:Class="SilverlightDeploy.Page"

    xmlns="http://schemas.microsoft.com/client/2007"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White">

        <Button x:Name="BtnHelloWorld" Content="Hello World"

                Width="100" Height="50" Click="BtnHelloWorld_Click" />

    </Grid>

</UserControl>

Then in the Page.xaml.cs file, you need to add the code for the button's Click event:

public partial class Page : UserControl

{

       public Page()

       {

              InitializeComponent();

       }

 

       private void BtnHelloWorld_Click(object sender,

RoutedEventArgs e)

       {

              this.BtnHelloWorld.Content = "You Clicked Me!";

       }

}

Now you can build the application, but it is not quite publish ready.

Publishing the application
First thing we need to do is create a publish version of the application.

• Right click on the web application and click "Publish Website"
• Specify your publish location (I used the desktop), and click ok

Now the issue with publishing Silverlight 2 is that webservers don't recognize the xap file as a proper mime type. The good thing is xap files are essentially just zip files. With this in mind, we can use some wizard trickery to make it all work happily.

• Go to the folder where you published your web application
  
• There should be a .xap file in your ClientBin directory. Change the file extension file to .zip instead of .xap
• Go to any pages that reference this file (Visual Studio will have created a [ProjectName]TestPage.aspx and .html file.
• Open the SilverlightDeployTestPage.html and find the object section.
• Rename the .xap reference to .zip as done in the ClientBin file

<object data="data:application/x-silverlight,"

type="application/x-silverlight-2-b1"

width="100%" height="100%">

       <param name="source" value="ClientBin/SilverlightDeploy.zip"/>

       <param name="onerror" value="onSilverlightError" />

       <param name="background" value="white" />

                    

       <a href="http://go.microsoft.com/fwlink/?LinkID=108182"

style="text-decoration: none;">

       <img src="http://go.microsoft.com/fwlink/?LinkId=108181"

alt="Get Microsoft Silverlight"

style="border-style: none"/>

       </a>

</object>

You should be good to go. You can now ftp the site wherever your heart desires and it will work. For now, you have to do this for all of the references to your xap files. I'll keep you posted (No pun intended).

Overview
I decided to go back to the basics on this article. It has occurred to me that many people are making the switch to div layouts, and forgetting about their forms. In my case I just didn't know how to do it in a good cross-browser fashion. I thought tables were easier. This article will demonstrate a simple way to create forms that are correct and easy.

Why create tableless forms?
People will argue speed as well as many other reasons. I do it for one reason alone. Syntactical correctness. Ok, I'll elaborate. HTML is designed to be a markup language defining the content within an HTML document. When you put your forms in a table you are telling your web-browser and search engines that you have tabular data. The sad truth is you told a fib to both your browser and your search engines :(. You have input forms designed for the user, not tabular data.

The answer!
Simple. Fieldsets, legends, lists, and inputs. The fieldset tells the browser that there are a set of fields in here. The legend gives you pretty text at the top explaining the fieldset. The list tells the browser we have the items in a list. The labels caption the input boxes.

Simple form
Here is the HTML for a simple form done without tables.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title>Untitled Page</title>

    <style type="text/css">

      

       fieldset {

              width: 250px;

       }

       fieldset ul {

              list-style: none;

              margin: 0px;

              padding: 5px 0px;

       }

       fieldset li {

              padding: 2px 0px;

       }

       fieldset label {

              width: 75px;

              float: left;

              vertical-align: top;

              padding-right: 5px;

              text-align: right;

       }

             

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

<fieldset>

       <legend>Login Information</legend>

       <ul>

              <li>

                     <label>Username:</label>

                     <input name="username" type="text" tabindex="1" />

              </li>

              <li>

                     <label>Password:</label>

                     <input name="password" type="text" tabindex="1" />

              </li>

              <li>

                     <label>Email:</label>

                     <input name="email" type="text" tabindex="1" />

              </li>

       </ul>

</fieldset>

 

    </div>

    </form>

</body>

</html>

Overview

This is the first of a couple articles on managing web parts. I would like to keep these articles as simple and concise as possible. This tutorial simply covers how to place WebParts onto the screen. WebParts are a portion of Asp.Net that doesn’t receive very much love. From my experience they feel complex, and where to apply them in your application very ambiguous. Let’s just start with creating one.

Creating your WebPart

• Open Visual Studio (I am using 2008), and add a new website
• This will create the Default.aspx page. Open the Default.aspx page
• Create three Divs
• Drag a WebPartManager and a DropDownList in the first
• Drag a WebPartZone in the second
• Drag a WebPartZone in the third

<div>

<asp:WebPartManager ID="WebPartManager1" runat="server">

       </asp:WebPartManager>     

       <asp:DropDownList ID="DropDownList1" runat="server">

       </asp:DropDownList> 

</div>

<div>

       <asp:WebPartZone ID="WebPartZone1" runat="server">

       </asp:WebPartZone>

</div>

<div>

       <asp:WebPartZone ID="WebPartZone2" runat="server">

       </asp:WebPartZone>

</div>

• In the design view, place something in each webpartzone (like a calendar, button, or wizard control)

<div>

       <asp:WebPartZone ID="WebPartZone1" runat="server">

              <ZoneTemplate>

                     <asp:Calendar ID="Calendar1" runat="server" />

              </ZoneTemplate>

       </asp:WebPartZone>

</div>

<div>

       <asp:WebPartZone ID="WebPartZone2" runat="server">

              <ZoneTemplate>

                     <asp:Button ID="Button1" runat="server" Text="Button" />

              </ZoneTemplate>

</asp:WebPartZone>

</div>

• Set your dropdown list to AutoPostBack and then double click it to create an event handler

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true"

       onselectedindexchanged="DropDownList1_SelectedIndexChanged1">

</asp:DropDownList> 

• Switch to your code-behind
• Change your code to this

protected void Page_Load(object sender, EventArgs e)

{

       if (!IsPostBack)

       {

              // Set up the list of options

foreach (WebPartDisplayMode mode in this.WebPartManager1.SupportedDisplayModes)

             

// Add an item for each mode

              this.DropDownList1.Items.Add(

                     new ListItem(mode.Name, mode.Name));

       }

 

       this.WebPartManager1.DisplayMode =

              this.WebPartManager1.SupportedDisplayModes[

              this.DropDownList1.SelectedValue];

}

 

protected void DropDownList1_SelectedIndexChanged1(

                     object sender, EventArgs e)

{

       this.WebPartManager1.DisplayMode =

              this.WebPartManager1.SupportedDisplayModes[

                     this.DropDownList1.SelectedValue];

}

Explaination

The first time the page loads, the dropdown will populate with the different display modes of the WebPartManager. The WebPartManager handles all of the cool drag and drop functionality. With every page load, the WebPartManager is set to the display mode specified by the dropdown. The eventhandler just changes the display mode of the WebPartManager.

If you run this code in IE, you will see your dropdown with options. If you select the Design options, you can move the controls inside the WebPartZone to another WebPartZone. In Firefox, this functionality isn’t there, but we will enable it in the next article.

Conclusion

This is the simple hello world application with WebParts. In the near future, we will cover more advanced topics in WebParts as well as how and where to integrate them into your application.

Here are a list of things to check back for in the near future:

• WebParts - A series breaking down Asp.Net web parts
• Windows Workflow - A few tutorials on implementing Windows Workflow
• Home Automation - Tutorials on what you can do with your home
  

2008 is the Year of the Rat.  Which animal year were you born in?

tiger :)

What's one thing you regret doing, or not doing? 
Submitted by ashleyy.

I really don't regret anything. There are things I could have done better (finance planning), but I don't regret the decisions I made.

Every once in a while people want to call their server-side code from JavaScript. I ran into this particular difficulty myself to find that many people online (including inside the msdn forums) say that this cannot be done. Well I hope it hasn't led too many people astray as I am going to demonstrate it here. So first thing is first:

• Create a new Website (It doesn't even have to be an AJAX-Enabled Website)
• Open the Default.aspx Page and change it to the following:

<%@ Page   Language="C#" AutoEventWireup="true" 

         CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

   Calling C# from JavaScript

   <script type="text/javascript">

      function RecieveServerData(arg, context)

      {

         Message.innerText = arg;

      }

  

   <form id="form1" runat="server">

  

      <input type="button" value="Callback"

         onclick="CallServer('Calling From Button', null)" />

      <span id="Message">

  

  

I ran into the problem of collapsing my CollapsiblePanelExtender programatically. This is a quick solution to that for those running into the same problem.

Here is the code:

this.cpeTest.ClientState = "true";

this.cpeTest.Collapsed = true;

And here is the control information:

<ajaxControlToolkit:CollapsiblePanelExtender
    id="cpeTest"
    runat="server"
    TargetControlID="pnlTarget"
    Collapsed="False"
    ExpandControlID="divExpand"
    CollapseControlID="divCollapse"
    AutoCollapse="False"
    ScrollContents="False"
    TextLabelID="lblExpand"
    CollapsedText="Expand"
    ExpandedText="Collapse"
    ExpandDirection="Vertical" />

I hope this helps :).