Life, Opportunity, and Development

New Blog!

nobody@vox.com(Matthew Kruskamp) — Thu, 10 Apr 2008 13:39:14 -0600

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 :).

Read and post comments | Send to a friend

Intellisense for jQuery

nobody@vox.com(Matthew Kruskamp) — Mon, 07 Apr 2008 03:40:31 -0600

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

Read and post comments | Send to a friend

Publishing Silverlight 2 beta

nobody@vox.com(Matthew Kruskamp) — Thu, 27 Mar 2008 10:09:20 -0600

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

Silverlight3

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).

Read and post comments | Send to a friend

Creating tableless forms

nobody@vox.com(Matthew Kruskamp) — Wed, 20 Feb 2008 13:08:00 -0700

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.

SimpleForm

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>

Read and post comments | Send to a friend

Creating WebParts

nobody@vox.com(Matthew Kruskamp) — Thu, 07 Feb 2008 18:15:04 -0700

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.

Read and post comments | Send to a friend

Things to look forward too

nobody@vox.com(Matthew Kruskamp) — Thu, 07 Feb 2008 17:43:48 -0700

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

Read and post comments | Send to a friend

QotD: Chinese New Year

nobody@vox.com(Matthew Kruskamp) — Thu, 07 Feb 2008 12:34:39 -0700

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

tiger :)

Read and post comments | Send to a friend

I Should (Not) Have Done That

nobody@vox.com(Matthew Kruskamp) — Wed, 06 Feb 2008 17:33:50 -0700

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.

Read and post comments | Send to a friend

Calling C# Code from JavaScript

nobody@vox.com(Matthew Kruskamp) — Wed, 06 Feb 2008 13:27:23 -0700

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">

Now for the code-behind:

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page,

   ICallbackEventHandler

{

   string fromClient;

   /// 

   /// Fired when the page loads. Creates 

   /// JavaScript to connect to the server.

   /// 

   /// 

   /// 

   protected void Page_Load(

      object sender, EventArgs e)

   {

      // Get javascript function from the

      // server that is capible of connecting

      // to our server. RecieveServerData is

      // the javascript method we will call when

      // we are done processing the data

      string reference = 

         this.ClientScript.GetCallbackEventReference(

         this, "arg", "RecieveServerData", "");

      // Generate the javascript that can connect

      // to the server

      string callBackScript =

         @"   function CallServer(arg, context)

            {" + reference + ";}";

      // Put the javascript on the page

      this.ClientScript.RegisterClientScriptBlock(

         this.GetType(), "CallServer", 

         callBackScript, true);

   }

   /// 

   /// This is the method called by the 

   /// javascript. Here you can do some server

   /// processing to manage what you are going

   /// to give back to the client if anything.

   /// 

   /// 

   public void RaiseCallbackEvent(

      string eventArgument)

   {

      /* Im saving stuff here */

      this.fromClient = eventArgument;

   }

   /// 

   /// This is the method that passes back

   /// to the javascript.

   /// 

   /// 

   public string GetCallbackResult()

   {

      return this.fromClient;

   }

}

And that is it. Run it and you will be sending information to the
server, processing it, and sending the information back to the client.
How does it work? The ICallbackEventHandler interface defines the
contract allowing the javascript to connect to it. The registration in
the Page_Load() generates javascript capible of connecting to the
server, and the rest is your server-side code. This functionality is
not limited to pages as well. As long as you can access the page to do
the script registration, you can create server-side code that can be
connected to by client-side javascript.

This is very useful, but be aware of the security risks involved. Always make sure to validate the input. Hope this helps.

Read and post comments | Send to a friend

Collapsing/Expanding CollapsiblePanelExtender Programatically

nobody@vox.com(Matthew Kruskamp) — Wed, 06 Feb 2008 13:24:52 -0700

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 :).

Read and post comments | Send to a friend