A Code Thief's Brag

ASP.NET MVC Dynamic Model Binding

2012-01-29T07:30:00.000-08:00

Published at: http://dotnetslackers.com/articles/aspnet/ASP-NET-MVC-Dynamic-Model-Binding.aspx

Correction

CustomModelBinder definition:

public class PetBinderAttribute : CustomModelBinderAttribute {

  public override IModelBinder GetBinder() {
    return new PetModelBinder();
  }

  public class PetModelBinder : DefaultModelBinder {
    public override object BindModel(ControllerContext controllerContext, 
      ModelBindingContext bindingContext) {
      var type = controllerContext.HttpContext.Request.Form["PetType"];
      bindingContext.ModelName = type;
      bindingContext.ModelMetadata = ModelMetadataProviders
        .Current.GetMetadataForType(null, petMap[type]);
      return base.BindModel(controllerContext, bindingContext);
    }
    
    static Dictionary<string, Type> petMap = new Dictionary<string, Type>{
      {"Dog", typeof(Dog)},
      {"Cat", typeof(Cat)},
      {"Fish", typeof(Fish)}
    };
  }
}

Use the CustomModelBinder:

[HttpPost]
public ActionResult Create([PetBinder]IPet pet) {
  // BusinessLogic.Save(pet)
  return View();
}

Re-size and re-center Telerik MVC modal window after ajaxRequest

2011-12-18T19:15:00.000-08:00

Telerik MVC modal window can auto-size to fit its initial content. After ajaxRequest, however, the window size stays the same, not adjusting to the new content. Here is how to re-size and re-center a modal window after ajaxRequest. The trick is to remove css "width" and "height" properties from the .t-window-content div.

@{Html.Telerik().Window()
 .Name("Popup")
 .Modal(true)
 .Visible(false)
 .ClientEvents(events => events
  .OnRefresh("resizeOnRefresh")
  .OnResize("centerOnResize"))
 .Render();
}

Set Min- and Max-Sizes on Telerik ASP.NET MVC Windows

2011-12-17T19:52:00.000-08:00

Telerik ASP.NET MVC window (as of 2011.Q3) does not directly support min-length, min-width, max-length or max-width. However, you can set these css properites on its child .t-window-content div. For example,

var winContent = $('#MyWindow .t-window-content');
winContent.css("min-width", "100px");
winContent.css("max-width", "500px");
winContent.css("min-height", "50px");
winContent.css("max-height", "500px");

OBIEE XMLViewSerive.executeXMLQuery does not accept filters in ReportParams.filterExpressions

2011-11-17T06:44:00.000-08:00

OBIEE version:

11.1.1.5.0

Symptom:

I need to evoke XMLViewService.executeXMLQuery() with different saved filters. I tried to set the filter in ReportParams.filterExpressions. The server returned the query result without any complaints. But the results were always the same as the result without any filters.

Work-around:

Set filters directly in ReportRef.

Bind Telerik MVC TreeView to XElement

2011-11-06T17:58:00.000-08:00

In order to bind Telerik MVC TreeView to an XElement, you need to define a recursive function, not a helper. For example,

@using Telerik.Web.Mvc.UI.Fluent;
@using System.Xml.Linq;
@model XElement

@functions {
 void BindXElement(TreeViewItemFactory item, XElement elem){
  var node = item.Add().Text(elem.Name.LocalName);
  foreach (var e in elem.Elements()) {
   node.Items(subItem => BindXElement(subItem, e));
  }
 }
}

@(Html.Telerik().TreeView()
  .Name("TreeView")
  .Items(item => BindXElement(item, Model))
)

A Killer Example for Functional Programming

2011-08-24T19:30:00.000-07:00

Published at dotnetslakers.

Get SQL Expression out of WhereClause

2011-08-08T19:08:00.000-07:00

Introduction

Several years ago I posted a method to get SQL expression out of a WhereClause. I did not dig deep enough, so it was practically unusable because of Null Object Exception. This post is a long overdue correction.

Implementation

Put the following code in a .cs file under App_Code (website) or Shared (web application) folder.

using BaseClasses;

using BaseClasses.Data;

using BaseClasses.Data.SqlProvider;



namespace DingJing {

	public static class ExtensionWhereClause {

		public static string GetSQL(this WhereClause wc, BaseTable tbl) {

			var f = new CompoundFilterExt(wc.GetFilter() as CompoundFilter);

			return f.GetSQL(tbl.DataAdapter);

		}

	}



	class CompoundFilterExt : CompoundFilter {

		public CompoundFilterExt(CompoundFilter cf)

			: base(cf.CompoundingOperator, cf.GetFilters()) { }



		public string GetSQL(IRelationalDataAdapter adapter) {

			var arg = new SqlGenerationArgs() {

				Adapter = adapter,

				Encoder = new SqlFragmentEncoder()

			};

			

			var tjl = new TableJoinList();

			var s = ToSql(arg, ref tjl);

			return s.Expression;

		}

	} 

}

The above code adds an extension method GetSQL() to WhereClause. To get the SQL expression, you only need 1 line of code. For example,

public override WhereClause CreateWhereClause() {

	var wc = base.CreateWhereClause();

	if (wc != null)

		SQLClause.Text = wc.GetSQL(OrdersTable.Instance);



	return wc;

}

DataStage Shared Container Parameters

2011-07-29T08:57:00.000-07:00

Shared containers can have parameters. They are passed literally. Single quotes must be escaped with "\" character.

(v8.1)

Smart Search Filter

2011-07-01T21:39:00.000-07:00

Introduction

In Iron Speed Designer, it is very easy to add a search filter above a table control. It is also very easy to config the filter to work in Equals, StartsWith, EndsWith or Contains mode. At design time, I always set search filters in Contains mode to get the most search power. At run-time, however, Contains mode sometimes returns too many hits. These are the times I wish I could double-quote the search text, and the filter would automatically switch to Equals mode.

This turns out to be a pretty straightforward customization.

Code customization

Use the following convention to define a search filter's operator:

Text	Operator
"search term"	Equals
"search term	StartsWith
search term"	EndsWith
search term	Contains

Override the table control's CreateWhereClause() method. Find the code block that defines the search behavior. Insert the following code right before the WhereClause is declared.

var searchOp = BaseFilter.ComparisonOperator.Contains;
if (formatedSearchText.StartsWith("\"") && formatedSearchText.EndsWith("\"")) {
  searchOp = BaseFilter.ComparisonOperator.EqualsTo;
  formatedSearchText = formatedSearchText.Substring(1, formatedSearchText.Length - 2);
} else if (formatedSearchText.StartsWith("\"")) {
  searchOp = BaseFilter.ComparisonOperator.Starts_With;
  formatedSearchText = formatedSearchText.Substring(1);
} else if (formatedSearchText.EndsWith("\"")) {
  searchOp = BaseFilter.ComparisonOperator.Ends_With;
  formatedSearchText = formatedSearchText.Substring(0, formatedSearchText.Length - 1);
}

Then replace the search operator in the WhereClause:

WhereClause search = new WhereClause();
search.iOR(CustomersTable.CustomerID, searchOp, formatedSearchText, true, false);
search.iOR(CustomersTable.CompanyName, searchOp, formatedSearchText, true, false);
search.iOR(CustomersTable.EmailAddress, searchOp, formatedSearchText, true, false);
search.iOR(CustomersTable.City, searchOp, formatedSearchText, true, false);
search.iOR(CustomersTable.Region, searchOp, formatedSearchText, true, false);
search.iOR(CustomersTable.PostalCode, searchOp, formatedSearchText, true, false);

Conclusion

Now you have a smart search filter.

DataStage Custom Routine to Get a File Size

2011-05-21T17:57:00.000-07:00

Below is a DataStage custom transform routine to get the size of a file. The full path of the file is passed in as a parameter called "Filename".

CMD = "ls -la " : Filename : " | awk '{print $5}'"
CALL DSExecute("UNIX",CMD,Output,SystemReturnCode)
size = Group(Output, @FM, 1)
Ans = If Num(size) Then size Else -1

If the file doesn't exist, -1 is returned.

Securing ELMAH with Independent HTTP Authentication

2011-05-16T21:26:00.000-07:00

Published at DotNetSlackers:

Securing ELMAH with Independent HTTP Authentication

Zoom-n-Scroll on Oversized Chart using jQuery UI's Draggable and Resizable

2011-04-16T10:53:00.000-07:00

Published at Telerik code library: Zoom Window for Oversized Chart using jQuery UI's Draggable and Resizable

Reorder Table Control Rows with "Drag and Drop"

2011-04-03T21:24:00.000-07:00

Introduction

Suppose you need to design a page for users to order a list of items, for example, assigning priorities to a list of tasks, or ordering questions in a questionnaire. ISD's out-of-box solution is an edit table control, in which a textbox is for entering each item's order. An obvious drawback of the solution is that users have to manually maintain the integrity of all orders, and a change in one row may result in changes in other rows.

A slightly better design is to replace the textbox with a pair of up and down arrows. You can use custom code in the arrows' event handlers to switch order between the clicked item and its previous or next one. When the page is regenerated, the items are sorted on their new orders. This design guarantees order integrity, but is inefficient. In order to move an item from bottom to top of the list, it requires quite some clicks.

Wouldn't it be nice that user simply drag and drop an item to its desired position and its new order, as well as other affected items', is reassigned automatically? This post will show you how to implement it in ISD.

Solution

There are two candidate implementations for drag-n-drop ordering, AjaxToolkit's ReorderList and a jQuery plugin Table Drag and Drop (TableDnD). ReorderList is a data-bound server control. It asks for a list of items as data source, and takes full control of data-binding and rendering. ISD has little help to offer. On the other hand, TableDnD is a pure client-side solution, leaving ISD with full control at server-side. Therefore, I will use TableDnD in this implementation.

Implementation

Step 1: Create a regular EditTable page

Create a plain vanilla EditTable page as shown below. Nothing fancy.

Step 2: Add jQuery and TableDnD libraries

In the page's prologue, insert 2 script references (lines 2 and 3):

Step 3: Configure HTML table for DnD

Since ISD-generated pages are heavily loaded with HTML tables, it could be a little bit tricky to find the right one to configure. It is the inner most Fields table, as shown below.

First, give the table an unique ID. TableDnD will use the ID to locate the table and attach DnD behavior.

Then, add 2 classes (nodrag and nodrop) to the header row. This notifies TableDnD not to attach DnD behavior to the header row.

Step 4: Add CssClass to order field

Add CssClass (orderbox) to the textbox that holds the order field.

Step 5: Customize background color for the row in DnD

Add the following css class in Styles.css:

tr.tDnD_whileDrag td
{
  background-color: #CCCCCC;
}

Step 6: Attach DnD behavior

Finally, insert the following script into the page's epilogue:

Conclusion

It seems a lot of steps. But your users' uh-ah reaction makes it all worth the trouble. You can download the demo here.

Open ISD Pages in Popup Windows: A Comprehensive Guide

2011-03-27T09:14:00.000-07:00

Introduction

It is sometimes necessary to open a page in a popup window, for example, a printable version of an invoice page. ISD does this itself on large-list-selector (LLS) and quick-add pages. As a developer, when you make a page to be opened in a popup window (instead of redirecting in the main window), you explicitly or implicitly make the following decisions:

Where do you open the popup? Client-side or server-side?
How do you pass parameters from the main window to the popup?
How do you send information back to the main window from the popup?

Different scenarios need different combination of the decisions. This guide will help you make informed decisions.

Note: A theme button named "PopButton" will be used as the trigger to open the popup throughout the guide.

Primer: window.open()

Before we examine the above three decisions, let's first review window.open, for those who are not familiar with the JavaScript function.

No matter where and how you open a popup, you need to use the JavaScript function:

window.open(url, windowName, windowFeatures)

Theoretically, all three parameters are optional. In practice, however, the first parameter url is usually provided. It is meaningless to open a blank popup without an url, unless you are trying to annoy your users.

The second parameter windowName is optional. It assigns the name to the new popup window. If there is already an open window with that name, the function will not popup a new window. In stead, it just opens the url in the existing window. You can use this parameter to control multiple pages poping up in a single window or multiple windows.

The third optional parameter, windowFeatures, controls the popup's features, such as size, position, status bar, address bar, scroll bar, toolbar, etc.

With the basics out of the way, let us get back to the first decision, whether to open the popup at client-side or server-side.

Client- vs. server-side popup

To popup at client-side, call window.open() in PopButton's client-side OnClick event handler. This can be done within ISD through PopButton's Custom properties. For example,

Property	Value
Button-HtmlAttributes-OnClick	window.open('MyPage.aspx'); return false;
Button-OnClientClick	window.open('MyPage.aspx'); return false;

The two properties are synonymous, so they can be used interchangeably. Don't forget "return false" statement after window.open. This is to prevent the button from triggering postback.

Alternatively, it can be setup in code, especially if you need to formulate the URL at run-time. For example,

string url = ...; // Formulate url
PopButton.Button.OnClientClick = 
  string.Format("window.open('{0}'); return false;", url);

string url = ...; // Formulate url
PopButton.Button.Attributes["OnClick"] = 
  string.Format("window.open('{0}'); return false;", url);

To popup at server-side, register window.open() in PopButton's server-side OnClick event handler. For example,

public override void PopButton_OnClick(object sender, EventArgs e){
  string url = ...; // Formulate url
  string script = string.Format("window.open('{0}');",, url);
  ScriptManager.RegisterStartupScript(Page, GetType(), "OpenWindow", script, true);
}

From coding point of view, there is little difference between client- and server-side popup. From efficiency and performance point of view, however, there are huge differences. Client-side popup does not pose any overhead on the server and the network; and you get instant response. On the other hand, server-side popup triggers a round trip between the server and the client; and the server undergoes a full page life cycle. Therefore, client-side popup is almost always favored over server-side popup.

Send information to popup window

More often than not, you need to pass some information from the main window to the popup. For example, the invoice number to be printed, or the lookup table name in an LLS. There are two ways to pass the information, URL parameters and session variables. URL parameters are suitable for small number of primitive values, such as strings, integers, etc. For complex data (e.g. arrays, lists, records, etc.), session variables work better. Session variable also has the advantage to avoid sensitive information to be seen in address bar.

Send information back to main window

It is not always necessary to send information back to the main window. For example, after a user prints his invoice in a popup, he simply close the popup and continue shopping in the main window. If you do need to send information back to the main window, there are again two ways to do that, from client-side or server-side.

ISD's built-in LLS is a typical example for the client-side mechanism. When a value is selected within the LLS, it is sent back to a Textbox or DropdownList in the main window via client-side JavaScript. The key in the communication is the receiving control's ClientID. It is sent to the popup window as a URL parameter. The popup uses the ID to find the control in the main window and manipulate its value. Below is the built-in JavaScript function (in ApplicationWebForm.js) to update a control in the main window.

function updateTarget(targetName, selectedValue, selectedDisplayValue){
    if (window.opener && !window.opener.closed) {
        var target = window.opener.document.getElementById(targetName);
        
        var bSuccess = false;
        if (!bSuccess){
            if (Fev_ReplaceLastListControlOption(target, selectedValue, selectedDisplayValue) ){
                //try setting the selection again
                bSuccess = Fev_SetFormControlValue(target, selectedValue);
            }
        }
        
        if (bSuccess){
            if(target != null) {
                if (navigator.appName == "Netscape") {
                    var myevent = document.createEvent("HTMLEvents")
                    myevent.initEvent("change", true, true)
                    target.dispatchEvent(myevent);
                }
                else { // IE
                    target.fireEvent('onchange');
                }
            }
        }           

        window.close();
    }
}

Here is the scenario you may want to try the server-side mechanism. On a typical ShowTable page, there is an New ImageButton, which redirects to an AddRecord page. Instead of redirect, you make the New button to open the AddRecord page in a popup. When a new record is saved in the popup and the popup is closed, you would like the main page refreshed to show the newly added record. This is not an issue in the redirect scenario. After redirecting back from the AddRecord page, the ShowTable page is automatically refreshed. In the popup scenario, however, the main window won't automatically refresh when the popup is closed. You have to trigger a postback in the main window from the popup. Below are the steps to implement this mechanism.

Step 1: Set New button's OnClientClick to open popup

In ShowTable page's TableControl DataBind() method, insert the following 2 lines of code:

string url = "AddRecord.aspx?TargetID=" + NewButton.Button.UniqueID; // Formulate url
NewButton.Button.OnClientClick = 
  string.Format("window.open('{0}'); return false;", url);

Applying the above-mentioned decision making process, it is a no-brainer to popup at client-side and pass URL parameters. The AddRecord page itself does not need any parameters. We pass the NewButton's UniqueID so that the popup can use it to trigger postback. Please note it is the UniqueID that triggers server-side postback, not the ClientID for client-side manipulation.

Step 2: Change New button's action from redirect to refresh

Now the New button's server-side function has been changed. We no longer need it to redirect to AddRecord page. We need it to refresh the current page. This can be easily configured in ISD. Please don't forget to change "Redirect and Send Email Actions" to "Stay on the current page."

Step 3: Set popup's Save button to trigger postback in main window

Insert the following lines into AddRecord Save button's Click handler:

public void SaveButton_Click(object sender, EventArgs args) {

 // Click handler for SaveButton.
 // Customize by adding code before the call or replace the call to the Base function with your own code.
 SaveButton_Click_Base(sender, args);
 // NOTE: If the Base function redirects to another page, any code here will not be executed.

 if (!ErrorOnPage) {
  string script = string.Format("window.opener.__doPostBack('{0}', '');window.close();", Request.QueryString["TargetID"]);
  ScriptManager.RegisterStartupScript(Page, GetType(), "TriggerPostback", script, true);
 }
}

Please don't forget to change Save button's "Redirect and Send Email Actions" to "Stay on the current page." Otherwise, the inserted code won't get executed as commented in the method.

Conclusion

Using popups discretionally can improve your web applications' workflow. The tips in this post may help you decide whether to popup or how to popup.

Create Oracle Materialized Views on CLOB/BLOB via DB Links

2010-10-08T16:29:00.000-07:00

If you try to create a materialized view on a LOB column via a database link, for example,

CREATE MATERIALIZED VIEW myview
AS
SELECT LobCol FROM tbl@another_server

Oracle will throw you the following error,

ORA-22992: cannot use LOB locators selected from remote tables
22992. 00000 – "cannot use LOB locators selected from remote tables"
*Cause: A remote LOB column cannot be referenced.
*Action: Remove references to LOBs in remote tables.

Here is a simple workaround.
First, create a view on the remote server:

create or replace view remoteview
as
select LobCol from tbl

Then, create your materialized view against the view:

create materialized view myview
as
select * from remoteview@another_server

Persist Table Control Row Selection

2010-08-28T16:46:00.000-07:00

A demonstration of extension over customization.

Introduction

ISD’s table controls have built-in row selection checkboxes, which do not remember their checked states on filtering, sorting or paging. This behavior is undesirable in some cases. This article will show a solution to persist row selection on filtering, sorting and paging. More importantly, it also demonstrates that extension is better than customization.

Solution by Customization

Below is the custom code to implement the functionality for a table control named OrdersTableControl.


public class OrdersTableControlRow : BaseOrdersTableControlRow {

  public OrdersTableControlRow() {
    Init += new EventHandler(OrdersTableControlRow_Init);
    PreRender += new EventHandler(OrdersTableControlRow_PreRender);
  }

  void OrdersTableControlRow_PreRender(object sender, EventArgs e) {
    OrdersRecordRowSelection.Checked =
      MyAppSession.SelectedRows.Contains(RecordUniqueId);
  }

  void OrdersTableControlRow_Init(object sender, EventArgs e) {
    OrdersRecordRowSelection.CheckedChanged +=
      new EventHandler(OrdersRecordRowSelection_CheckedChanged);
  }

  void OrdersRecordRowSelection_CheckedChanged(object sender, EventArgs e) {
    if (OrdersRecordRowSelection.Checked)
      MyAppSession.SelectedRows.Add(RecordUniqueId);
    else
      MyAppSession.SelectedRows.Remove(RecordUniqueId);
  }
}

public class OrdersTableControl : BaseOrdersTableControl {
  public OrdersTableControl() {
    Init += new EventHandler(OrdersTableControl_Init);
  }

  void OrdersTableControl_Init(object sender, EventArgs e) {
    // Clear selection on initial page load
    if (!Page.IsPostBack)
      MyAppSession.SelectedRows.Clear();
  }
}

MyAppSession.SelectedRows is an intellisensified session variable defined in another file, as shown below.


using System;
using System.Collections.Generic;
using System.Web;
using System.Web.SessionState;

namespace SelectionDemo.UI {
  /// 
  /// MyAppSession provides access to session variables as static properties.
  /// 

  public class MyAppSession {
    /// 
    /// Private shortcut to HttpContext.Current.Session. Check its availability.
    /// 

    private static HttpSessionState currentSession {
      get {
        if (HttpContext.Current.Session == null)
          throw new Exception("Session is not available in the current context.");
        else
          return HttpContext.Current.Session;
      }
    }

    private static string selectedRowsKey = "selectedRowsKey";
    public static HashSet<string> SelectedRows {
      get {
        if (currentSession[selectedRowsKey] == null)
          currentSession[selectedRowsKey] = new HashSet<string>();
        return currentSession[selectedRowsKey] as HashSet<string>;
      }
    }
  }
}

Please note that this is just for a particular table control. If you need the functionality on other table controls, cut and paste the above code, and change control names accordingly.

Solution by Extension

Using the extension framework outlined in a previous article, we can implement the functionality in BaseTableControl and BaseRecordControl.
In BaseTableControl:


[Category("Behavior")]
[Description("Remember row selection")]
[TypeConverter(typeof(bool))]
[DefaultValue(false)]
public bool PersistRowSelection {
  get { return ViewState["PersistRowSelection"] != null; }
  set {
    if (value)
      ViewState["PersistRowSelection"] = value;
    else
      ViewState.Remove("PersistRowSelection");
  }
}

string SelectedRowsKey {
  get { return GetType().Name + "SelectedRows"; }
}

public BaseTableControl() {
  Init += new System.EventHandler(BaseTableControl_Init);
}

void BaseTableControl_Init(object sender, System.EventArgs e) {
  if (!Page.IsPostBack && PersistRowSelection) {
    HttpContext.Current.Session[SelectedRowsKey] = new HashSet<string>();
  }
}

public string[] GetSelectedRecordIDs() {
  if (!PersistRowSelection)
    throw new Exception("Row selection is not persisted.");

  HashSet<string> set =
    HttpContext.Current.Session[SelectedRowsKey] as HashSet<string>;
  return set.ToArray();
}

In BaseRecordControl:


internal string GetRecordUniqueId() {
  return GetType()
        .GetProperty("RecordUniqueId")
        .GetValue(this, null) as string;
}

internal CheckBox GetRowSelectionCheckBox() {
  string name = GetType().Name.Replace("TableControlRow", "RecordRowSelection");
  return FindControl(name) as CheckBox;
}

HashSet<string> SelectedRows {
  get {
    string key = GetType().Name.Replace("Row", "SelectedRows");
    return HttpContext.Current.Session[key] as HashSet<string>;
  }
}

public BaseRecordControl() {
  Init += new System.EventHandler(BaseRecordControl_Init);
  PreRender += new EventHandler(BaseRecordControl_PreRender);
}

void BaseRecordControl_PreRender(object sender, EventArgs e) {
  if(SelectedRows != null){
    GetRowSelectionCheckBox().Checked =
      SelectedRows.Contains(GetRecordUniqueId());
  }
}

void BaseRecordControl_Init(object sender, System.EventArgs e) {
  if (SelectedRows != null) {
    CheckBox box = GetRowSelectionCheckBox();
    if (box == null)
      throw new Exception("Cannot find row selection checkbox.");

    box.CheckedChanged += new EventHandler(RowSelection_CheckedChanged);
  }
}

void RowSelection_CheckedChanged(object sender, EventArgs e) {
  if (GetRowSelectionCheckBox().Checked)
    SelectedRows.Add(GetRecordUniqueId());
  else
    SelectedRows.Remove(GetRecordUniqueId());
}

The above code will add row selection persistence to ALL table controls. To turn it on, it is as simple as setting a TableControl’s custom property PersistRowSelection to True.

Of course, you cannot use ISD’s GetSelectedRecords() method to get the selection when persistence is turned on. Instead, you should use the newly defined method GetSelectedRecordIDs().

Conclusion

Persisting table row selection is as simple as setting PersistRowSelection = True after implementing this extesion.

Customization vs. Extension

2010-08-26T15:45:00.000-07:00

Introduction

Developing ISD applications is all about customization, customization and customization. Some customizations are project specific, while others are of generic purpose, which can be used across multiple projects. Below are some examples of general purpose customizations.

Roaming Alert: Display Alert Message even if Page Redirects

Hide Columns in TableControl (update)

Highlight Table Row with One Line of Code

This article is about how to better manage general purpose customizations.

Background

A trick for general purpose customization is to put the code in ISD's project template folder. When ISD generates a new project, the customization is automatically available. You don't have to manually cut and paste the customization from a previous project. An ideal example of code reuse, isn't it? Nope. It is cut-and-paste in disguise. Although ISD does the cut-and-paste for you, you are left to deal with the consequence of having multiple copies of the same code, a maintenance headache.

Take the Roaming Alert as an example. I put it in ISD's project template, so it became a standard feature in all of my projects. After implemented it in more than 10 projects, however, I found a bug in the original implementation. MiscUtils.RegisterJScriptAlert() method did not handle multi-line message correctly. I had to replace it with my own method. For all the previous projects, I had to go over their life cycles (development, staging, production) all over again, because the modification was at the source code level.

Solution? Do not customize ISD projects. Extend them.

Solution

To customize, insert your code directly into ISD generated projects so that
you get customized ones. To extend, keep your code outside of ISD projects so that they are extended. The following diagram illustrates the difference between customization and extension.

Implementation

Here is a sample implementation of the extension BasePage.


using System;
using System.Collections.Generic;
using System.Web.UI;

namespace DingJing {
  public class BasePage : BaseClasses.Web.UI.BasePage {

    public BasePage() {
      PreRender +=  new EventHandler(My_PreRender);
    }

    void My_PreRender(object sender, EventArgs e) {
      Dictionary<string, string> AlertQueue =
        Session["AlertQueue"] as Dictionary<string, string>;
      if (AlertQueue != null) {
        foreach (string key in AlertQueue.Keys)
          DisplayAlert(key, AlertQueue[key]);
        AlertQueue.Clear();
      }
    }

    private void DisplayAlert(string key, string msg) {
      msg = msg.Replace(@"\", @"\\").Replace("'", @"\'").Replace("\n", @"\n");
      string script = string.Format("alert('{0}');", msg);
      ScriptManager.RegisterStartupScript(this, GetType(), key, script, true);
    }

    public virtual void RegisterAlert(string key, string msg, bool roaming) {
      if (!roaming) {
        DisplayAlert(key, msg);
      } else {
        Dictionary<string, string> AlertQueue =
          Session["AlertQueue"] as Dictionary<string, string>;
        if (AlertQueue == null)
          Session["AlertQueue"] = AlertQueue = new Dictionary<string, string>();
        AlertQueue.Add(key, msg);
      }
    }

  }
}

Then, make your project's BaseApplicationPage a subclass of the extension BasePage.


namespace ProjectNamespace.UI {
  public class BaseApplicationPage : DingJing.BasePage {

You can make the class hierarchy change in generated projects, or in ISD project template. You can extend BaseApplicationTableControl and BaseApplicationRecordControl similarily.


using System.Web.UI;

namespace DingJing {
  public class BaseTableControl : System.Web.UI.Control {

    public void SetColumnVisibility(string colName, bool visible) {
      Control header = FindControl(colName + "Header");
      if (header != null)
        header.Visible = visible;

      Control[] rows = GetType().GetMethod("GetRecordControls").Invoke(this, null) as Control[];
      foreach (Control row in rows) {
        Control cell = row.FindControl(colName + "Cell");
        if (cell != null)
          cell.Visible = visible;
      }
    }

  }
}


namespace ProjectNamespace.UI {
  public class BaseApplicationTableControl : DingJing.BaseTableControl {


using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace DingJing {
  public class BaseRecordControl : System.Web.UI.Control {

    public void SetRowAppearance(string cssName) {
      WebControl ctrl = Controls
        .OfType()
        .Where(c => !(c is Literal) && c.Visible)
        .First();
      string script = string.Format(
        "$('td', $('#{0}').closest('tr')).addClass('{1}');",
        ctrl.ClientID,
        cssName);
      ScriptManager.RegisterStartupScript(this, GetType(), ClientID, script, true);
    }

  }
}


namespace ProjectNamespace.UI {
  public class BaseApplicationRecordControl : DingJing.BaseRecordControl {

Benefit

First, maintenance overhead is greatly reduced. You have only one copy of the source code to maintain. Other projects only need to update their reference if there is any changes. If they are already deployed to production, you only need to copy over one dll file.

Second, I no longer have to post my code samples in 2 languages. Even if your main ISD project is in VB, you can still reference libraries written in C#. If you are a consultant developing projects for different clients using different languages, this is also for you.

Conclusion

For general purpose customizations, refactoring them into a separate project will greatly reduce maintenance overhead.

Replace a detail table control with a list control: CheckBoxList or DualList

2010-08-15T09:50:00.000-07:00

Introduction

ISD's master-detail page supports adding/editing a master record and its detail records. However, the out-of-the-box detail table control is not the ideal presentation in some scenarios. Sometimes, a CheckBoxList is much clearer to present the information and easier for users to make selections, as described in Herman Chan's article, Implementing a Detail Table as CheckBox List. In some cases, a DualList might be the best choice as described in this article.

In both articles, the plumbing work of data loading and saving is encapsulated in custom user controls. User controls are easier to develop, but more difficult to deploy or use, than server controls. For example,

Maintain multiple source files within a project.
Maintain different versions (C# and VB) of source files for different projects. This may be not necessary for in-house development, but is likely for consulting projects.
Limited access to properties and methods for dynamically loaded user controls at run-time.
Limited access to inner properties at design-time.

It would be nice to see both implemented as server controls.

Solution

The most difficult part of implementing a server control is typically its rendering. You are not able to drag and drop components into a designer window, but have to code it line by line. However, using a technique described in Deveploy a Userver Control, you can design a server control with drag and drop just like a user control. In this article, I re-implemented CheckBoxList and DualList as server controls. The class diagram is shown below.

I am not going to reiterate the details about how they are implemented (you can get them from the above links). Instead, I will simply describe how to use them in your ISD projects.

Use the controls

Using the two controls is like using any other 3rd-party components.

Step 1: Add dll library

Download and unzip the demo at the end of this article. Find the following 3 dll files in the bin folder, and copy them to your project's bin folder.

DetailListControl.dll
DualListBox.dll
UserverCtrl.dll

If your project is a "Web Application" project, you also need to explicitly add reference to the first dll (DetailListControl.dll). You don't have to explicitly reference the other two dlls. They are just dependencies.

Step 2: Add control to a page

First, register the assembly in page prologue:

<%@ Register Assembly="DetailListControl" Namespace="DingJing" TagPrefix="dj" %>

Next, insert the control in a cell editor. For example,

Step 3: Configure the control

Both CheckListDetailControl and DualListDetailControl inherit the following properties from the DetailListControl.

Property	Required	Description
DetailTableName	Yes	Name of detail table or view. For example, Developer_Language, Developer_DBMS.
DetailColumnName	Yes	Name of detail comlumn. For example, Language_ID, DBMS_ID.
WhereString	No	Filter on detail column's parent table or view. For example, Programming, DBMS.

WhereString can be set dynamically. The ideal place to set it at runtime is in the PrePopulate event handler. In addition to the WhereString property (of string type), you can also set the ItemFilter property (of WhereClause type) directly at runtime, as shown in the following code snippet.

C#

public DevelopersRecordControl() {
  Init += new EventHandler(DevelopersRecordControl_Init);
}

void DevelopersRecordControl_Init(object sender, EventArgs e) {
  ProgrammingDualList.PrePopulate += new EventHandler(ProgrammingDualList_PrePopulate);
}

void ProgrammingDualList_PrePopulate(object sender, EventArgs e) {
  WhereClause wc = new WhereClause(ProgrammingTable.Language_Name,
    BaseFilter.ComparisonOperator.Starts_With, "C");
  ProgrammingDualList.ItemFilter = wc;
}

Public Sub New()
  Init += New EventHandler(AddressOf DevelopersRecordControl_Init)
End Sub

Private Sub DevelopersRecordControl_Init(sender As Object, e As EventArgs)
  ProgrammingDualList.PrePopulate += New EventHandler(AddressOf ProgrammingDualList_PrePopulate)
End Sub

Private Sub ProgrammingDualList_PrePopulate(sender As Object, e As EventArgs)
  Dim wc As New WhereClause(ProgrammingTable.Language_Name, BaseFilter.ComparisonOperator.Starts_With, "C")
  ProgrammingDualList.ItemFilter = wc
End Sub

The presentation components of the two controls are exposed as public properties, CheckList and DualList, respectively. So they can be configured declaratively or dynamically. For example,

Step 4: DataBind and SaveData

Each DetailListControl needs a line of code to be wired up with its master record at DataBind() or SaveData(). For example,

C#

public override void DataBind() {
  base.DataBind();

  if (DataSource != null) {
    ProgrammingDualList.DataBind(DataSource);
    DatabaseCheckList.DataBind(DataSource);
  }
}

public override void SaveData() {
  base.SaveData();

  ProgrammingDualList.SaveData(DataSource);
  DatabaseCheckList.SaveData(DataSource);
}

Public Overrides Sub DataBind()
  MyBase.DataBind()

  If DataSource IsNot Nothing Then
    ProgrammingDualList.DataBind(DataSource)
    DatabaseCheckList.DataBind(DataSource)
  End If
End Sub

Public Overrides Sub SaveData()
  MyBase.SaveData()

  ProgrammingDualList.SaveData(DataSource)
  DatabaseCheckList.SaveData(DataSource)
End Sub

Conclusion

Reimplementated as server controls, the CheckListDetailControl and the DualListDetailControl are easier to (re)use than their user control versions.

Download

Demo application

Highlight a table row with 1 line of code

2010-08-07T08:21:00.000-07:00

Introduction

It is a usual requirement to highlight a table row based on specific conditions. ISD has a CCW (Highlight a table row based on a condition) designed exactly for that purpose. However, using the CCW is a little tedious. First, you need to make the row "runat = server" in the designer. Then, run through the wizard, which inserts more than 20 lines of code into code-behind. (Even after comments removed, there are still about 10 lines of code.)

This article will show you a much simpler way to highlight a table row. After initial setup, only 1 line of code is needed. I don't think you can get it any simpler.

Initial Setup

Step 1: Add jQuery support

In the master page's prologue, add the following line (line 3):


    <asp:ScriptReference  Path="~/SetFocus.js"  />
    <asp:ScriptReference  Path="http://code.jquery.com/jquery-1.4.2.min.js"  />

Step 2: Add SetRowAppearance() method

In BaseApplicationRecordContorl class, insert the following method.
C#

public void SetRowAppearance(string cssName) {
  WebControl ctrl = Controls
    .OfType<WebControl>()
    .Where(c => !(c is Literal) && c.Visible)
    .First();
  string script = string.Format(
    "$('td', $('#{0}').closest('tr')).addClass('{1}');",
    ctrl.ClientID,
    cssName);
  ScriptManager.RegisterStartupScript(this, GetType(), ClientID, script, true);
}

Public Sub SetRowAppearance(cssName As String)
    Dim ctrl As WebControl = Controls.OfType(Of WebControl)().Where(Function(c) Not (TypeOf c Is Literal) AndAlso c.Visible).First()
    Dim script As String = String.Format("$('td', $('#{0}').closest('tr')).addClass('{1}');", ctrl.ClientID, cssName)
    ScriptManager.RegisterStartupScript(Me, [GetType](), ClientID, script, True)
End Sub

Step 3: Add highlighted css class(es)

In your project App_Theme's Style.css, add as many css classes as you like. For example,

td .highlighted { 
  background-color: #FF99FF;
}

Note:
These steps are required only once for a project. They can also be setup in ISD's project template. Then the functionality will be available automatically in new projects.

Highlight a row

Here is the one-liner to highlight a row. Please note that the example is called from within a TableControlRow class.
C#

if (SomeCondition)
  this.SetRowAppearance("highlighted");

If SomeCondition Then
  Me.SetRowAppearance("highlighted")
End If

Note:
Having a closer look at SetRowAppearance() method, you will notice that it needs a non-Literal WebControl as a "seed" to locate the row at client side. If your table row contains any ImageButtons, CheckBoxes, DropDownLists, etc, the method will work just fine. In case your row contains only Literals, switch one of them to Label.