ASP.Net @ timstall.dotnetdevelopersjournal.comhttp://timstall.dotnetdevelopersjournal.com/(ASP.Net) Copyright 2008 timstall.dotnetdevelopersjournal.comSat, 06 Sep 2008 21:21:00 GMTASP.Net @ timstall.dotnetdevelopersjournal.comhttp://res.sys-con.com/portlet/163/featured-blog-graphic-145.gifhttp://timstall.dotnetdevelopersjournal.com/360http://backend.userland.com/rssHashtables in JavaScripthttp://timstall.dotnetdevelopersjournal.com/hashtables_in_javascript.htmhttp://timstall.dotnetdevelopersjournal.com/hashtables_in_javascript.htmWed, 22 Feb 2006 03:41:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=hashtables%5Fin%5FjavascriptTim StallAs a bit of trivia for the day, JavaScript can handle pseudo-hashtables, via the Array object. You can reference the item with its key, and enumerate through all the objects.

function DoHashTest()
{
  var h = new Array();
  h["aaa"] = "Aardvark";
  h["bbb"] = "Babboon";
 
  var s = "";
  //This won't work, length will be 0.
  for (var i = 0; i < h.length; i++)
  {
     s += h[i];
  }

  //Cycle through like a hash:
  for (var i in h)
  {
    s += i;
  }
}

]]>JavaScript Debugging in 2005http://timstall.dotnetdevelopersjournal.com/javascript_debugging_in_2005.htmhttp://timstall.dotnetdevelopersjournal.com/javascript_debugging_in_2005.htmTue, 31 Jan 2006 03:12:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=javascript%5Fdebugging%5Fin%5F2005Tim StallJavaScript debugging in 2003 with the Running Documents Window. In 2005 they do things a little differently. Instead of the running documents window, there is the script explorer.

One immediate perk is that the script explorer has source code color-coded, whereas the running document window did not.

Check out Microsoft's Jerry Orman's blog to see how to debug in VS2005.

]]>Pair and Triplet classeshttp://timstall.dotnetdevelopersjournal.com/pair_and_triplet_classes.htmhttp://timstall.dotnetdevelopersjournal.com/pair_and_triplet_classes.htmThu, 26 Jan 2006 14:32:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=pair%5Fand%5Ftriplet%5FclassesTim StallThere are some Framework classes out there that are useful, but infrequently used. In my experience, System.Web.UI.Pair and System.Web.UI.Triplet are two such examples. These provide basic utilities (like serialization) to store two or three related objects into single object. They have predictable members, for example Pair has a "First" and "Second" property that can be set either in the constructor or once instantiated.

They're simple classes, but are easy and helpful to use in web applications. Of course you could write your own container, but this saves you the step.

]]>Sudoku board enhanced with DHTMLhttp://timstall.dotnetdevelopersjournal.com/sudoku_board_enhanced_with_dhtml.htmhttp://timstall.dotnetdevelopersjournal.com/sudoku_board_enhanced_with_dhtml.htmFri, 06 Jan 2006 15:15:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=sudoku%5Fboard%5Fenhanced%5Fwith%5FdhtmlTim StallI've blogged about Html, JavaScript, CSS, and combining them into DHTML. Normally I apply this to enterprise architecture, but you can apply this to online games too. One fun application of this is the Sudoku solver, editor, and generator at http://www.thetoolboxsite.com/Sudoku.aspx. Sudoku is a logic game of 9x9 cells, where each cell contains a single digit 1-9, and no row, column, or 3x3 square can have the same digit twice. Apparently it's becoming pretty popular, and hence people are making web versions of it. Here's a screen shot of a board in progress:

Sudoku Board

 The Sudoku mentioned above has a lot of JavaScript on it. Some initial interesting JavaScript features are:

  • You can navigate the cells with the arrow keys, and it highlights the current cell. This kind of functionality can be implemented by using the onkeydown, onkeyup, and onfocus events to first select another cell (using .select() ), and then change the style (using .style=).
  • If you type multiple values into a cell - something that's useful to record your notes - then the text shrinks accordingly to make room. This can also be done by the onkeyup event setting the styles.
  • If you type an invalid value into a cell, like the letter "a" (only digits are allowed), it won't let you - there is JavaScript to block invalid user input. This can be done by returning false on the onkeydown event (i.e.: onkeydown="return IsValid()" ).
  • If you click the "paste" button, it gets the text from the JavaScript clipboard, serializes it into a board object, and then updates the UI. Vice versa with the paste.

There's a lot more stuff going on there, but even with these there is a classic principle of programming: Making computer games teaches you things to make better enterprise applications! All of those input features could be useful to an enterprise app: using JavaScript validation to not even let you type invalid input, navigating and highlighting cells in a grid with the arrows (like in Excel), or juggling data to and from the clipboard. These are all good examples of using JavaScript to enhance your web UI.

]]>Adding and Removing items from an Html ListBoxhttp://timstall.dotnetdevelopersjournal.com/adding_and_removing_items_from_an_html_listbox.htmhttp://timstall.dotnetdevelopersjournal.com/adding_and_removing_items_from_an_html_listbox.htmWed, 28 Dec 2005 14:10:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=adding%5Fand%5Fremoving%5Fitems%5Ffrom%5Fan%5Fhtml%5FlistboxTim StallASP.Net makes things easy, like adding and removing items from an HTML listbox. The problem is that these items are stored as inner nodes... it's not just as simple as setting a value property. Therefore you modify items by modifying the DOM itself. Here's an Html page to do that. It gives each item a description and id (for lookup purposes). The methods that really matter (i.e. reuse them into your own code) are AddItem and RemoveItem. Both take a listBox object, and id, and AddItem also takes the text to display.

Note that in pure html, both the ListBox and Dropdown are created from the <select> tag. However a ListBox has a size attribute > 1.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name=ProgId content=VisualStudio.HTML>
<meta name=Originator content="Microsoft Visual Studio .NET 7.1">
    <script language="javascript">
<!--
function DoAdd()
{
  var strText = document.getElementById("TxtContent").value;
  var strId = document.getElementById("TxtId").value;
  AddItem(document.getElementById("Select1"), strText, strId);
}

function DoRemove()
{
  var strId = document.getElementById("TxtId").value;
  RemoveItem(document.getElementById("Select1"), strId);
}


function AddItem(objListBox, strText, strId)
{
  var newOpt;
  newOpt = document.createElement("OPTION");
  newOpt = new Option(strText,strText);
  newOpt.id = strId;
  objListBox.add(newOpt);
}

function RemoveItem(objListBox, strId)
{
  var intIndex = GetItemIndex(objListBox, strId);
  if (intIndex != -1)
    objListBox.remove(intIndex);
}

function GetItemIndex(objListBox, strId)
{
  for (var i = 0; i < objListBox.children.length; i++)
  {
    var strCurrentValueId = objListBox.children[i].id;
    if (strId == strCurrentValueId)
    {
      return i;
    }
  }
  return -1;
}

//-->
    </script>
</head>
  <body MS_POSITIONING="FlowLayout">
    <form id="Form1" method="post" runat="server">
      <P>ID: <INPUT id="TxtId" type="text" name="Text1" runat="server" value="1234">  Text: <INPUT id="TxtContent" type="text" name="Text1" runat="server" value="ddddd"></P>
      <P><INPUT type="button" value="Add" onclick="DoAdd()" ID="Button1" NAME="Button1"> <INPUT type="button" value="Remove" onclick="DoRemove()" ID="Button2" NAME="Button2"> </P>
      <P><SELECT id="Select1" size="8" name="Select1" runat="server" style="WIDTH: 176px; HEIGHT: 128px">
          <OPTION id="a1">aaa</OPTION>
          <OPTION id="b1">bbb</OPTION>
          <OPTION id="c1">ccc</OPTION>
        </SELECT></P>
    </form>
  </body>
</html>

]]>DHTML IV: Highlighting a table row or columnhttp://timstall.dotnetdevelopersjournal.com/dhtml_iv_highlighting_a_table_row_or_column.htmhttp://timstall.dotnetdevelopersjournal.com/dhtml_iv_highlighting_a_table_row_or_column.htmMon, 12 Dec 2005 21:38:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=dhtml%5Fiv%5Fhighlighting%5Fa%5Ftable%5Frow%5For%5FcolumnTim StallEvery now and then it's nice to do some fun UI enhancements. We can use DHTML to select a row or column of a table. We can do this by:

  1. Decide what event triggers the highlight (clicking or mouse hovering, any cell or just the header)
  2. Have a way to reference the row or column
  3. Attach the appropriate JavaScript event handler, and have it change the property of the target row or column.

Highlighting rows is easy, just add the event handles to the <tr> tag and reference it with the "this." keyword:

      <TABLE id="Table2" cellSpacing="1" cellPadding="1" width="300" border="1">
        <TR>
          <TD>Header 1</TD>
          <TD>Header 2</TD>
          <TD>Header 3</TD>
        </TR>
        <TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
          <TD>a</TD>
          <TD>b</TD>
          <TD>c</TD>
        </TR>
        <TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''">
          <TD>d</TD>
          <TD>e</TD>
          <TD>f</TD>
        </TR>
      </TABLE>

Highlight columns is a little more tricky. As there isn't a "column" object (at least not to my knowledge), you need to select each cell individually. Therefore we need to add an id to each cell, and then cycle through them. Note that this doesn't interfere if you wanted to make the columns be hyperlinks, perhaps to fire off some "sort" method. If we give each cell a structured id like so:

        <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
          <TR>
            <TD id="td_0_a" onclick="SelectColumn('a')">Header 1</TD>
            <TD id="td_0_b" onclick="SelectColumn('b')">Header 2</TD>
            <TD id="td_0_c" onclick="SelectColumn('c')">Header 3</TD>
          </TR>
          <TR>
            <TD id="td_1_a">a</TD>
            <TD id="td_1_b">b</TD>
            <TD id="td_1_c">c</TD>
          </TR>
          <TR>
            <TD id="td_2_a">d</TD>
            <TD id="td_2_b">e</TD>
            <TD id="td_2_c">f</TD>
          </TR>
        </TABLE>

... then we can use JavaScript to cycle through all the cells in a column:

    <script language="javascript">
      var strCurrentColumn = 0;
      var intRowCount = 3;

      function SelectColumn(strIndex)
      {
        //clear previous column
        if ( strCurrentColumn != 0 )
        {
          for (var i = 0; i < intRowCount; i++) {
            document.getElementById('td_' + i + '_' + strCurrentColumn).className = '';
          }
        }

        //set new column:
        strCurrentColumn = strIndex;
        for (var i = 0; i < intRowCount; i++) {
          document.getElementById('td_' + i + '_' + strCurrentColumn).className = 'SelectColumn';
        }
      }
    </script>

Lastly, we could combine these two approaches such that you could select both the column and row - that might be helpful for a big table. Also, you could have some script to give alternating rows different colors too.

These are all straight-forward techniques, and they may be able to make your tables a little more flashy.

]]>DHTML III: Detecting the mouse click and coordinateshttp://timstall.dotnetdevelopersjournal.com/dhtml_iii_detecting_the_mouse_click_and_coordinates.htmhttp://timstall.dotnetdevelopersjournal.com/dhtml_iii_detecting_the_mouse_click_and_coordinates.htmThu, 08 Dec 2005 14:03:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=dhtml%5Fiii%5Fdetecting%5Fthe%5Fmouse%5Fclick%5Fand%5FcoordinatesTim StallContinuing my DHTML posts (DHTML I: Intro and Positioning Text, and DHTML II: Using Hidden Divs instead of Popup windows), there are more cool things you can do, such as detecting the mouse click and its coordinates. This is useful if you're trying to make a more complex UI or perhaps even a simple game. Perhaps the best way to flush this out is with an example. Say you want to be able to click a table cell, and have a yellow dot appear where ever you clicked. You could do this by first getting the mouse coordinates, and then positioning a div tag (which holds the image for the dot) to those coordinates.

Here's the code, then I'll explain it:

<HTML>
  <HEAD>
    <title>DetectClick</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name="vs_defaultClientScript" content="JavaScript">
    <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <style>
      .divAbsPosition1
        {
          z-index: 1;
          left: 0px;
          position: absolute;
          top: 0px;
          visibility:hidden;
        }
    </style>
    <script language=javascript>
      <!--
      function doSomething()
      {
          var e = window.event;
         
          var s = e.clientX + ',' + e.clientY;
          document.getElementById('span1').innerText = s;
         
          //set pic:
          document.getElementById('DivDot').style.visibility = 'visible';
          document.getElementById('DivDot').style.left = e.clientX - 10;
          document.getElementById('DivDot').style.top = e.clientY - 10;
      }
      //-->
    </script>

  </HEAD>
  <body MS_POSITIONING="FlowLayout">
    <form id="Form1" method="post" runat="server">
    <div id="DivDot" class="divAbsPosition1">
      <img src="dot.gif">
    </div>
   
    <table border=1>
      <tr>
        <td>Click on next cell:</td>
        <td width=300px height=100px onmousedown="doSomething()">
      Mouse coordinates: (<span id="span1"></span>)
    </td>
      </tr>
   
    </table>

    </form>
  </body>
</HTML>

The cell has an onclick that triggers a JavaScript method. This method gets the window event, from which it can get the mouse click coordinates. We then simply set the div tag to that position. It's surprisingly simple. There's also a deeper discussion of this here.

Of course, you could combine these three DHTML posts (positioning, visibility, and mouse clicks), and the JavaScript timer, to create simple games. For example, you could have another dot move by getting its position set by the timer, and then detect if you clicked that moving dot by comparing the mouse coordinates. There's a lot of potential.

]]>Changing Custom Validator Messageshttp://timstall.dotnetdevelopersjournal.com/changing_custom_validator_messages.htmhttp://timstall.dotnetdevelopersjournal.com/changing_custom_validator_messages.htmWed, 07 Dec 2005 15:43:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=changing%5Fcustom%5Fvalidator%5FmessagesTim StallSometimes you may want to have one custom validator potentially display two different error messages depending on context. For example you may make your own date validator (perhaps to work with your own custom calendar control), and this control may first validate format ("xyz" is not a date, "12/3/2005" is), and then validate integration with the rest of the page ("Start Date occurs before End Date"). Each type of validation merits its own message. The reason you'd combine these controls is because the integration requires first performing the type validation.

Ideally we could change this at both the client and the server. We can do this with ASP 1.1's validators.

We can set the error message at the client via using the source.errormessage property:

function ValidateStuff(source, arguments)
{
    source.errormessage = "I changed this on the fly!"; //or source.errormessageB
    arguments.IsValid = false;
}

We can set the error message at the server via casting the source object and setting its ErrorMessage.

protected void ValidateMaxLength (object source, ServerValidateEventArgs value)
{
    ((CustomValidator)source).ErrorMessage = "This was changed at the server";
    value.IsValid = false;
}

We can access the other error message simply by adding a attribute to the current validtor, like ErrorMessageB, and then referencing it like source.errormessageB. Check out Validation Tips for Validators for more details about this.

If you have two error messages, you'll want separate properties for each of those, i.e. have messageA and messageB. Then set source.errormessage to the appropriate one. Don't store your main message in source.errormessage because it will just get overwritten when you set it with something else.

Note that in order for this to show up, the error messages must be displayed in a ValidationSummary control.

A sample custom validator Html might be:

<asp:ValidationSummary id="ValidationSummary1" runat="server"></asp:ValidationSummary>
...
<asp:CustomValidator id="CustomValidator1" runat="server"
ErrorMessage="CustomValidator"
ErrorMessage_A = "..."
ErrorMessage_B = "..."
ControlToValidate="Text1"
ClientValidationFunction="ValidateDate"
OnServerValidate="ValidateDate"
Display="None">
</asp:CustomValidator>

This is just another trick for ASP.Net validators to give you some more flexibility.

]]>DHTML II: Using Hidden Divs instead of Popup windowshttp://timstall.dotnetdevelopersjournal.com/dhtml_ii_using_hidden_divs_instead_of_popup_windows.htmhttp://timstall.dotnetdevelopersjournal.com/dhtml_ii_using_hidden_divs_instead_of_popup_windows.htmWed, 30 Nov 2005 20:13:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=dhtml%5Fii%5Fusing%5Fhidden%5Fdivs%5Finstead%5Fof%5Fpopup%5FwindowsTim StallPrevious on DHTML: DHTML I: Intro and Positioning Text

A common UI problem is wanting to display a small amount of information (like a date) that takes a big UI control to generate (like a calendar). The standard solution to this is to make some sort of sub-window where the user has as much real-estate as needed to get that information. Two ways to implement this are (1) a new browser popup window, (2) hidden divs.

Each has their own pros & cons. Popup windows are pretty standard and relatively cross-browser dependable. Recall that you can open a popup like so:

window.open("Window.aspx","Name1",'toolbar=no,location=no ...');

Popup windows have several disadvantages:

  • It's hard to get data to and from them (you can pass data to them through the querystring, and from them with the window.opener property, but this is messy).
  • You can't control where the user drags them. They can hide them behind other windows, move them all over, max or min them, etc.. To some extent you can pile on the JavaScript to minimize what the user can do, but it gets tedious.
  • They open up a whole separate application (i.e. a new browser)

A whole different solution is to use a hidden div, and perhaps enclosing an iFrame to present a whole new page. This gives you the benefits of a popup (more temporary real-estate), without the drawbacks.

We can implement this using CSS's visibility style, along with the positioning attributes. Here's a sample how:

<html>
  <head>
    <title>SimplePopup</title>
    <style>
      .divAbsPosition1
      {
        z-index: 1;
        left: 100px;
        position:absolute;
        top: 50px;
      }
    </style>
  </head>
  <body MS_POSITIONING="FlowLayout">
   
    <form id="Form1" method="post" runat="server">

    <div id="DivAbsPosition" class="divAbsPosition1" style="COLOR: black">
      <table border="1" bgcolor=#ffffcc>
        <tr>
          <td>Whatever content you want goes here.</td>
        </tr>
      </table>
    </div>
      <input type=button value="Show"
        onclick="document.getElementById('DivAbsPosition').style.visibility='visible'" />
      <input type=button value="Hide"
        onclick="document.getElementById('DivAbsPosition').style.visibility='hidden'" />
      <p>Some normal page content goes here.</p>
      <p>Some normal page content goes here.</p>
     </form>
  </body>
</html>

This technique is another great benefit of DHTML. It's very useful when writing your own custom control (such as a dropdown or calendar) or making appropriate popups.

]]>DHTML I: Intro and Positioning Texthttp://timstall.dotnetdevelopersjournal.com/dhtml_i_intro_and_positioning_text.htmhttp://timstall.dotnetdevelopersjournal.com/dhtml_i_intro_and_positioning_text.htmMon, 28 Nov 2005 17:35:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=dhtml%5Fi%5Fintro%5Fand%5Fpositioning%5FtextTim StallHTML is essentially static. However with some JavaScript and CSS, you can make it dynamic - hence DHTML (D is for Dynamic). There are lots of neat things you can do with DHTML. While some of it may just be for "toys", some of it can also enhance the UI for an enterprise app.

Using CSS, you can position your text in several ways. First you can set whether the style refer to an absolute or relative position. You can then specify the left or top. You can also specify the "layer" via the Z index. For example, the following snippet offsets the div tag:

  <style>
    .pos1
    {
      z-index: 1;
      left: 100px;
      position:absolute;
      top: 20px;
      background-color:Yellow;
    }
  </style>
  </head>
  <body MS_POSITIONING="FlowLayout">
    <form id="Form1" method="post" runat="server">
      <div class="pos1">
      Hello World
      </div>
     </form>
  </body>

You can use JavaScript to programmatically change the CSS class as whole, or switch a specific style:

document.getElementById('DivPosition').className = 'myNewClass';
document.getElementById('DivPosition').style.left = 10;

The combination of all these things opens up a lot of possibilities. For example, using a JavaScript timer, you could move a div across the page by continually updating the .left property.

The next several posts will dive more into DHTML.

]]>Implementing a timer in JavaScript with setTimeouthttp://timstall.dotnetdevelopersjournal.com/implementing_a_timer_in_javascript_with_settimeout.htmhttp://timstall.dotnetdevelopersjournal.com/implementing_a_timer_in_javascript_with_settimeout.htmTue, 22 Nov 2005 19:14:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=implementing%5Fa%5Ftimer%5Fin%5Fjavascript%5Fwith%5FsettimeoutTim StallSometimes you want something cycling in the background to give your page an active feel, like images or text labels updating every 4 seconds. You can do that with the JavaScript setTimeout function. The script below keeps a running clock:

<html>
  <head>
    <script language=javascript>
    <!--
    function SetTime()
    {
      var s = new Date();
      document.getElementById("Span1").innerText = s;
    }
    function UpdateCycle() {
        SetTime();
      setTimeout("UpdateCycle()",500);
    }
    //-->
    </script>
  </head>
  <body MS_POSITIONING="FlowLayout" onload="UpdateCycle()">
    <form id="Form1" method="post" runat="server">
      This is a timer test.
      <span id="Span1"></span>
    </form>
  </body>
</html>

This method takes a method to call, and the time (in milliseconds) to wait. The pattern is simple:

  1. Have the body onload event call the looping function, like UpdateCycle(). This function manages the cycling.
  2. Have the looping function call whatever action you want, and the setTimeOut method.
  3. Implement the action method (in this case SetTime) to do whatever action you need.

You could even make a global variable, increment it in each UpdateCycle, and therefore keep a global counter of how many cycle have passed. You could also have the body onload call an initialization method instead, that method would do start-up initialization, and then call the UpdateCycle method.

This is a simple JavaScript method to use, but it can have a big return to help certain pages feel more lively.

]]>HtmlControls vs. WebControlshttp://timstall.dotnetdevelopersjournal.com/htmlcontrols_vs_webcontrols.htmhttp://timstall.dotnetdevelopersjournal.com/htmlcontrols_vs_webcontrols.htmTue, 01 Nov 2005 14:46:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=htmlcontrols%5Fvs%5FwebcontrolsTim StallPlain Html provides form controls via the <input> tag. These are standard controls like textBoxes, dropdowns, and radiobuttons. ASP.Net provides its own version of these controls. Ultimately the ASP.Net version gets rendered as a html. For development you can use either the WebControls or the normal html controls run as server controls. The table below offers some comparisons:

 WebControlHtmlControl runat=server
DescriptionThe ASP.Net controls residing in System.Web.UI.WebControlsNormal html controls that are run at the server. These reside in System.Web.UI.HtmlControls. Setting a HtmLControl to be runat=server does not automatically make it an ASP.Net webControl.
Pro
  • Easier to initially use. For example, automatically works with validators (a disabled Html control doesn't).
  • Many more webControls than htmlControls (such as the dataGrid, validators, and placeHolders)
  • Lighter - doesn't have all the extra properties of WebControls
  • Easier to hook up to JavaScript.
Con
  • Heavier - has more properties, state, and methods, such as the AutoPostBack. Just compare HtmlInputText and TextBox.
  • Lacks the extra features of WebControls

The Pros and Cons mean that they each have scenarios where one is better than the other. For cases like textBox and dropdown where both can provide the same control: HtmlControls are good for high performance apps because you use only the functionality that you need, WebControls are good for rapid development because it automatically gives you more stuff (which then must be paid for with performance).

]]>Using a single html file for easy managementhttp://timstall.dotnetdevelopersjournal.com/using_a_single_html_file_for_easy_management.htmhttp://timstall.dotnetdevelopersjournal.com/using_a_single_html_file_for_easy_management.htmFri, 28 Oct 2005 14:59:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=using%5Fa%5Fsingle%5Fhtml%5Ffile%5Ffor%5Feasy%5FmanagementTim StallNormally you want to split your html objects (like styles, scripts, and data) into separate files to make things more reusable. However sometimes when you're creating an internal developer report (for status, confirmation, quick info, etc...), it's easier to give the user a single html file than a whole collection of files. For example, suppose you're making an internal WinForms tool that assists with some development task, and then generates an Html status report. As a single file, it's easier to mail to others or copy into different directories,.

An html page can have several components, each as separate, physical files:

  • The main html page itself
  • A style sheet
  • External JavaScripts
  • Inline frames
  • Images
  • An Xml data source

We can embed both the style sheet and JavaScript into the head of the main html file itself:

<html>
<head>
<title>Security Rights</title>


<Style>
.TableHeader
{
    font-weight: bold;
    background-color: #FFFFCC;   
}
</Style>


<script language=javascript>
<!--
function DoStuff() {
    //...
}
//-->
</script>


</head>
<body>

We can imitate some features of inline frames via CSS by scrolling inline tables.

If you're already automatically generating the report, then you've already essentially split data from presentation and therefore you can also hardcode the data directly into the Html itself.

That leaves us with Images - which I'm not sure of any way to embed images into an Html file.

However all in all, having the option of putting your styles, scripts, inline frames, and data all into a single file may make it easier to manange for internal reports.

]]>CSS Tip: Scrolling inline tableshttp://timstall.dotnetdevelopersjournal.com/css_tip_scrolling_inline_tables.htmhttp://timstall.dotnetdevelopersjournal.com/css_tip_scrolling_inline_tables.htmWed, 05 Oct 2005 15:44:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=css%5Ftip%5Fscrolling%5Finline%5FtablesTim StallA common UI problem is displaying a large amount of information in only a little space. Different user requirements allow for different solutions. For example, perhaps the user has 50 items, but only needs to see 10 at a time. The entire list is still small enough that you can bring all the data to the client - don't need to page through it with a previous/next button doing server hits. Technically, this could be implemented by putting all 50 items in a sub-page, and then displaying that sub-page in the main page as an inline frame. This would fulfill the user requirements:

  • You could set the frame size to be only 10 items.
  • All the data is still at the client - so it's quick
  • The user can conveniently scroll through the list.

While this functionally works, it's technically tedious. Having a separate sub-page means extra JavaScript to pass values between the main and sub page (such as when you save and you want to see the item selected). It also means one more page to keep track of. An alternative solution is to use CSS to inset the table within a div region:

  <body MS_POSITIONING="FlowLayout">
    <form id="Form1" method="post" runat="server">
      <P>This is an inline table test:</P>
      <P>
      </P>
      <table width="100%">
        <tbody>
        <tr>
          <td width="50%">
                <div style="BORDER-RIGHT: 1px inset; BORDER-TOP: 1px inset; Z-INDEX: 1; OVERFLOW: auto; BORDER-LEFT: 1px inset; BORDER-BOTTOM: 1px inset; HEIGHT: 100px">
        <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="1">
          <tbody>
          <TR>
            <TD>aaaaa</TD>
            <TD>bbb</TD>
          </TR>
          <TR>
            <TD>bbbbb</TD>
            <TD>bbb</TD>
          </TR>
          <TR>
            <TD>ccccc</TD>
            <TD>bbb</TD>
          </TR>
          <TR>
            <TD>ddddd</TD>
            <TD>bbb</TD>
          </TR>
          <TR>
            <TD>eeeeeeeeee</TD>
            <TD>bbb</TD>
          </TR>
          <TR>
            <TD>fffffffff</TD>
            <TD>bbb</TD>
          </TR>
                    <TR>
            <TD>ggggggggg</TD>
            <TD>bbb</TD>
          </TR>
                    <TR>
            <TD>hhhhhh</TD>
            <TD>bbb</TD>
          </TR>
                    <TR>
            <TD>iiiiiiii</TD>
            <TD>bbb</TD>
          </TR>
                    <TR>
            <TD>jjjjjjj</TD>
            <TD>bbb</TD>
          </TR>
                    <TR>
            <TD>kkkkkkkkk</TD>
            <TD>bbb</TD>
          </TR>
                    <TR>
            <TD>llllllllllll</TD>
            <TD>bbb</TD>
          </TR>
        </tbody>
        </TABLE>
      </div>
          </td>
          <td>Other stuff</td>
        </tr>
      </tbody>
      </table>

      <P></P>
    </form>
  </body>

This technique is quick to develop, has the same user benefit, and is all around cleaner.

]]>Anchor onclick vs. Hrefhttp://timstall.dotnetdevelopersjournal.com/anchor_onclick_vs_href.htmhttp://timstall.dotnetdevelopersjournal.com/anchor_onclick_vs_href.htmMon, 03 Oct 2005 15:22:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=anchor%5Fonclick%5Fvs%5FhrefTim StallASPX, including all its "special" features like postbacks and validators, ultimately renders as standard Html. So it's good to understand how certain Html components, like anchors, work.

A simple anchor just has an target page in the Href, look like so:

<a href="PageB.aspx" >AnchorLink</a>

Clicking this anchor will always redirect to PageB.aspx. The Href property can also contain a method to call. For example, ASP.Net renders LinkButtons as anchors whose Href calls the postback method:

<a id="LinkButton1" href="javascript:__doPostBack('LinkButton1','')">LinkButton</a>

Anchors can also have an onclick event. You could have this method call a message box, set hidden fields, or do whatever else you needed. However, the Href will not be called if the onclick returns false. For example, you could create a "Do you want to save?" yes-no MessageBox like so:

<a onclick="return confirm('Do you want to save')" href="PageB.aspx">AnchorLink</a>

The JavaScript confirm() method displays a yes-no confirm box, and returns either true or false depending on what the user clicked. Therefore if the user clicks no, the messageBox returns false, and the href is never activated. This concept applies whether the Href contains a navigation page or JavaScript. For example, you could add the confirm box to the LinkButton, and block the postback if the user answered "No" to a certain question.

Knowing the relationship between the anchor onclick and href lets you develop a more interactive and rich UI.

]]>Referencing lists of Html controls in Repeaters and DataGridshttp://timstall.dotnetdevelopersjournal.com/referencing_lists_of_html_controls_in_repeaters_and_datagrid.htmhttp://timstall.dotnetdevelopersjournal.com/referencing_lists_of_html_controls_in_repeaters_and_datagrid.htmMon, 08 Aug 2005 21:02:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=referencing%5Flists%5Fof%5Fhtml%5Fcontrols%5Fin%5Frepeaters%5Fand%5FdatagridTim StallNote that each html control can have an ID (which must be unique) and a Name (which need not be unique). If you assign your controls a common name attribute, such as giving each checkbox in the repeater rows the name "chkA", then you can easily access those fields. Say you had the following repeater:

<asp:Repeater id="Repeater1" runat="server">
    <ItemTemplate>
        <tr>
            <td><input type="checkbox" name="ChkA" value="ABC"></td>
            <td> ... other columns</td>
        </tr>
    </ItemTemplate>
</asp:Repeater>

On the server, you can create an array of the selected values like:

string[] s = Page.Request["ChkA"].Split(',');

On the client, you can access the fields via the document.getElementsByName('name'):

function DoClick() {
    var v = document.getElementsByName("ChkA");
    var s = "";
    for (var i = 0; i < v.length; i++) {
        if (v[i].checked) {
            s = s + v[i].value + ",";
        }
    }
}

]]>CSS Tip: Using media=print for printer-friendly pageshttp://timstall.dotnetdevelopersjournal.com/css_tip_using_mediaprint_for_printerfriendly_pages.htmhttp://timstall.dotnetdevelopersjournal.com/css_tip_using_mediaprint_for_printerfriendly_pages.htmFri, 29 Jul 2005 11:57:00 GMThttp://timstall.dotnetdevelopersjournal.com/console/comments/popup/?f=css%5Ftip%5Fusing%5Fmediaprint%5Ffor%5Fprinterfriendly%5FpagesTim StallWhen you print a page, you want just the workspace of the page in normal portrait view - not banner ads, left navigation bars or text that extends off the printed page . This is a printer-friendly view. There are at least two categories of solutions:

  1. Have a "click here for printer-friendly version" link that posts back to the server, does manipulation such as hiding menus, and creates a new instance of the page in printer-friendly mode
  2. Use Cascading Style Sheets (CSS).

The former has several problems that the latter solves:

  • It posts back to the server, which hurts performance
  • It becomes a nightmare if you want to open a new instance of the page for printing, such that closing this print-page won't accidentally close the main app page.
  • It is a pain for editable pages because it requires the developer to manually persist all values to the new print page. Say the user enters a value in a text field, how do you persist that to a new page instance, perhaps via querystring or session? But what if the values are large?
  • It requires additional effort for each page.

CSS provides a "media" attribute that can apply different style sheets to different media. The two media we're looking at here are screen (default) and print.

A stylesheet can set the color, visibility, or any other style that's relevant to a print-version. Here's a practical example that hides buttons (you can click a button in printview) and formats all text in greycolor (you many not want to waste color printing on text):

Html page:

<HTML>
    <HEAD>
        <!-- two different style sheets, 1 for print, 1 for screen -->
        <LINK href="Print.css" type="text/css" rel="stylesheet" media="print">
        <LINK href="StyleSheet1.css" type="text/css" rel="stylesheet" media="screen">
    </HEAD>
    <body MS_POSITIONING="FlowLayout">
        <form id="Form1" method="post" runat="server">
            <P>This tests styles.</P>
            <P>
                <asp:Label id="Label1" runat="server" CssClass="MainFont">
                Label</asp:Label></P>
            <P>
                <asp:Button id="Button1" runat="server" CssClass="PrintButton"
                Text="Button"></asp:Button></P>
        </form>
    </body>
</HTML>

Stylesheet (Normal):

body
{
}
.MainFont
{
    font-weight: bold;
    color: red;
}

Stylesheet (Print):

body
{
}
.PrintButton
{
    display: none;
}
.Template
{
    display: none;
}

Eric Myer has a great article that explains how to use CSS for printing.

]]>Overlapping Server and embedded &lt;% %&gt; tags.http://timstall.dotnetdevelopersjournal.com/overlapping_server_and_embedded_lt_gt_tags.htmhttp://timstall.dotnetdevelopersjournal.com/overlapping_server_and_embedded_lt_gt_tags.htmWed, 20 Jul 2005 11:15:00 GMThttp://timstall.dotnetdevelopers