LegHumped.com» ASP.NET » Leghumped

Umbraco: Breadcrumb Trail

Harry Jennerway — Sun, 30 May 2010 14:00:18 +0000

I’ve been using Umbraco recently, and always find it hard to find XSL templates or spend hours tweaking one when countless other people must have done the same thing, but not published the finished stylesheet.

Below is a navigation breadcrumb template which prints a trail to the current page, starting with level 1.

 version="1.0" encoding="UTF-8"?>
 

	
    " ">
    "»">
]>
 

	version="1.0"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:msxml="urn:schemas-microsoft-com:xslt"
	xmlns:msxsl="urn:schemas-microsoft-com:xslt"
	xmlns:umbraco.library="urn:umbraco.library"
	exclude-result-prefixes="msxml umbraco.library">
	 method="xml" omit-xml-declaration="yes" />
	 name="currentPage" />
 
	 match="/">
         class="breadcrumb">
             select="$currentPage/ancestor::node [string(data [@alias='umbracoNaviHide']) != '1']">
                 href="{umbraco.library:NiceUrl(@id)}">
                     name="title">
                         select="@nodeName" />
                    >
                     select="@nodeName" />
                >
                 test="@level != 0">
                    »
                >
            >
             select="$currentPage/@nodeName" />
        >
    >
>

Entity Framework in Mednium Trust

Harry Jennerway — Mon, 08 Mar 2010 18:47:56 +0000

ASP.NET and medium trust typically don’t get along well once you start using third party libraries. It really should, however, be easier to get the Entity Framework working on medium trust, and this had me baffled for a few hours trying to split the EDMX file and other fruitless solutions.

To get this working I needed to:

Move the EDMX to a separate assembly.
Set the EDMX metadata artifact processing to ‘Embed in output assembly’.
Add a reference in the site.

Change the connection string to

 name="ShopEntities" connectionString="metadata=res://*/;provider=System.Data.SqlClient;provider connection string="Data Source=servername;Initial Catalog=dbname;User Id=username;Password=P@55word;MultipleActiveResultSets=True"" providerName="System.Data.EntityClient" />

Which every guide claimed would work. There’s one more step if you have custom partial entity classes (in App_Code). If so, these also need to be moved to your output assembly, as you can’t split partial classes across assemblies. Lastly, change the namespace in your partial classes to the same as your output assembly, and everything should work.

ASP.NET: Remove from the cache using

Harry Jennerway — Sat, 25 Jul 2009 10:09:50 +0000

The Cache object in ASP.NET isn’t like other collections, probably because it needs to be specialized so it doesn’t make use of generics. Unfortunately, that makes it more difficult to work with. This small utility method removes an object from the cache by key using a predictate. You could easily modify it to compare either of the IDictionaryEnumerator’s Key or Value properties.

/// 
/// Removes an item from the cache using a Predictate to match the key.
/// 
/// The Predictate to use for each key to determine whether the entry should be removed.
/// 
/// Removes an item from the cache using a Predictate to match the key.
/// 
/// The Predictate to use for each key to determine whether the entry should be removed.
public static void RemoveFromCache(Predicate<string> keyCriteria) {
	IDictionaryEnumerator enuma = HttpContext.Current.Cache.GetEnumerator();
	while(enuma.MoveNext()) {
		if(keyCriteria(enuma.Key.ToString())) {
			HttpContext.Current.Cache.Remove(enuma.Key.ToString());
		}
	}
}

ASP.NET: Data Binding with ObjectDataSource

Harry Jennerway — Thu, 09 Jul 2009 19:38:57 +0000

In the past when writing forms with ASP.NET I’ve usually used an SqlDataSource when binding to controls, but I’ve been doing a lot of WPF lately. Being a desktop platform, WPF has excellent support for DataBinding, but obviously since HTTP is a stateless protocol (apart from the ViewState in ASP.NET which isn’t ideal), it’s not so well suited to data binding.

One thing I’ve never really tried is binding an object to a form to display a single item (eg: a report). This leads to writing lots of tedious code like:

	Order theOrder = GetOrder(orderId);
	litName.Text = theOrder.Name;
	litID.Text = theOrder.ID;
	litCustomer.Text = theOrder.BillingCustomer.Name;
	...

It never occured to me to use an ObjectDataSource with a Repeater, just returning one row. Not only does it keep all the code in one place instead of superflous bits in the code-behind, it makes it easier to see which properties on the object are being used.

So instead of the above, you end up with:


	
		
	


	
		Order ID: 
		Checkout Complete: 
		Customer Name:

...

Just to put those properties into context, the object might have a structure like this:

public class Order
{
    public int ID { get; set; }
    public bool Paid { get; set; }
    public Customer BillingCustomer { get; set; }
    public List<OrderItem> Items { get; set; }
	...

Faster Image Loading With jQuery

Harry Jennerway — Sun, 05 Jul 2009 06:35:13 +0000

Normally, if there are images on a webpage they’re there to support the content and not excessive, so you don’t have to worry about loading times. What if you need to have an undefined number though, and they happen to be high resolution like a gallery?

For the last site I worked on, the client wanted a gallery of 400×400 pixel images to cycle in a gallery on the front page of the site. They’re about 70KB each so if you’re loading 10 or more of them in the middle of the page, they’ll slow the page load down until they’ve all totally loaded.

The solution I used was to add the images to the DOM after the rest of the content loads.

The site was written in ASP.NET, but I used jQuery so it applies to any project.

First, you need to render a list of the images to load into a variable which JavaScript can access. Ie:

...
cmd.CommandText = "SELECT Filename, Description FROM tblGallery WHERE Visible = '1'";
StringBuilder jqueryBuffer = new StringBuilder("$().ready(function() {\n"); 
jqueryBuffer.Append("var galleryImages = [\n");
List<string> galleryPics = new List<string>();
SqlDataReader reader = cmd.ExecuteReader();
JavaScriptSerializer js = new JavaScriptSerializer();
while(reader.Read()) {
    galleryPics.Add(js.Serialize(new { 
        filename = Server.HtmlDecode(reader[0].ToString()), 
        alt = Server.HtmlDecode(reader[1].ToString()) 
    }));
}
reader.Close();
jqueryBuffer.Append(Utils.Implode(galleryPics, ",\n", false)).Append("];\n cycleGalleryPics(galleryImages);\n");
ScriptManager.RegisterStartupScript(this, typeof(Page), "jqueryListeners", jqueryBuffer.ToString(), true);
...

Which results in the following JavaScript on the page:

$().ready(function() {
  var galleryImages = [
  {"filename":"1","alt":"Picture 1"},
  {"filename":"2","alt":"Caption 2"},
  {"filename":"3","alt":"Something 3"},
  {"filename":"4","alt":"etc"},
  {"filename":"5","alt":""},
  {"filename":"6","alt":""}];
  cycleGalleryPics(galleryImages);
});

The cycleGalleryPics method just iterates over the array and creates an image for each element, then adds it to a named container on the document.

function cycleGalleryPics(galleryImages) {
    var galleryDiv = $('#Gallery');
    galleryDiv.html('');
    var path = "";
    if (typeof (imagePath) == 'undefined') {
        path = 'UserImages/Gallery/';
    } else {
        path = imagePath + '/Gallery/';
    }
    jQuery.each(galleryImages, function() {
        $('').attr({
            width: 368, height: 370,
            alt: unescape(this.alt),
            src: path + unescape(this.filename) + '.jpg'
        }).appendTo('#Gallery');
    });
    galleryDiv.cycle({ fx: 'fade', timeout: 3000, random: 1, fit: 1, containerResize: 0 });
}

The reason the contents of the container are cleared before adding the images is to provide support for users with JavaScript disabled. One image is added by an ASP.NET Image control so there won’t be a block of empty space.

GridView with Dynamic Columns

Harry Jennerway — Sat, 22 Nov 2008 21:20:47 +0000

The ASP.NET GridView control can be a really useful control for displaying and editing tabular data, but if you try to make it work with MySQL or a cross-tab query you’re likely to run into problems.

I wanted to create a grid showing the data from a cross-tab but also allow users to edit the data. If you’ve never used one before, a cross tabulation is a query which maps repeating rows to columns instead. This means that a column in a displayed result might not actually exist as a column in a database table. If you just need to display the data and aren’t bothered about editing it, the GridView works out of the box and will automatically generate the columns for you – but what if you need to display some columns but not others?

In my example, there are three static columns and a user specified number of dynamic ones. The static columns are coded in the .aspx page but the dynamic ones are generated by an AutoFieldGenerator which takes selections from a ListBox into account. The columns in the crosstab are populated from the selected ListBox items so I can pass the selected items to the AutoFieldGenerator and have it create template columns which I know are present as columns in the crosstab.

<%
<asp:GridView ID="grdTranslations" runat="server" AllowPaging="True" 
	AllowSorting="True" AutoGenerateColumns="false"
	OnRowDatabound="row_DataBound" 
	OnRowCommand="grd_RowCommand" 
	OnPageIndexChanging="grd_PageIndexChanging"
	OnDataBound="grd_DataBound" PageSize="15">
	<Columns>
	    <asp:TemplateField HeaderText="Bundle Name">
	        <ItemTemplate>
	            <asp:Label ID="lblBundleName" runat="server" Text='<%# Eval("bundlename") %>' EnableViewState="False">
	            
	            
	        
	    
	    
	        
	            
	            
	        
	    
	    
	        
	            
	            
	                
	            
	            
	        
	    
	
	
%>

The dynamic columns are added on every postback by setting the AutoColumnGenerator property of the GridView. The source for the column generator and template are available here and here. The item template is just a label and a textbox which databind themselves to the column in the DataSource with the column name given in the GridViewTemplate constructor.

Seem simple so far? Good, because getting the data out of the textboxes isn’t so easy. The problem exists because once you start adding columns dynamically, the GridView doesn’t seem to recognize that extra columns were added to it when the page posts back, so there’s no way to access the textbox controls in those columns. In my example, there’s an edit button and a save button in cell 3. When the edit button is clicked the page posts back and there’s a method which resets the column generator, re-databinds the GridView then finds the index of row where the edit button was clicked and changes the visibility of the edit controls.

protected void grd_RowCommand(object sender, GridViewCommandEventArgs e) {
        GridViewRow row;  // The row which has clicked was the undatabound one, so use it's index to lookup the new, databound row
        grdTranslations.DataBind();
	row = (e.CommandSource as WebControl).NamingContainer as GridViewRow; // this is the row before dynamic columns were added, only controls coded in the .aspx page are accessible as only the static columns are present.
        string selectedTranslationID = (row.Cells[editButtonColumNo].FindControl("cboTranslationID") as DropDownList).SelectedValue;
	switch(e.CommandName) {
		case "edittranslation":
			GridViewRow newRow = grdTranslations.Rows[((e.CommandSource as WebControl).NamingContainer as GridViewRow).RowIndex];
			// use the row's index to lookup the instance of the row in the new, databound GridView with dynamic columns
			ShowEditControls(row);
			break;
		case "savetranslation": // 'Save' button clicked
			row = (e.CommandSource as WebControl).NamingContainer as GridViewRow;
			SaveTranslation(row); // the new, databound row isn't much use as it just contains the values as the exist when the server sent them
			break;
	}
}
private void ShowEditControls(GridViewRow row) {
	(row.Cells[1].FindControl("cboBundleName") as DropDownList).Visible = true;
	(row.Cells[2].FindControl("txtElementName") as TextBox).Visible = true;
	(row.Cells[editButtonColumNo].FindControl("cboTranslationID") as DropDownList).Visible = true;
	if(row.RowType == DataControlRowType.DataRow) {
	    (row.Cells[1].FindControl("lblBundleName") as Label).Visible = false;
	    (row.Cells[2].FindControl("lblElementName") as Label).Visible = false;
	    (row.Cells[editButtonColumNo].FindControl("btnEdit") as Button).Visible = false;
	    (row.Cells[editButtonColumNo].FindControl("btnSave") as Button).Visible = true;
	    for(int i = editButtonColumNo + 1; i < row.Cells.Count; i++) {
	        row.Cells[i].Controls[0].Visible = false;
	        row.Cells[i].Controls[1].Visible = true;
	    }
	}
}

So all of the labels are hidden and instead, textboxes and combo boxes are shown to allow the user to edit the record. To record the user’s input when the save button is clicked, the GridView isn’t much help. The only way I could find of getting the values back out from the textboxes was to loop through Request.Form and compare the keys against the UniqueIDs of the textboxes I needed.

...
string bundleName = (oldRow.Cells[1].FindControl("cboBundleName") as DropDownList).SelectedValue,
                   elementName = (oldRow.Cells[2].FindControl("txtElementName") as TextBox).Text,
                   elementComment = (oldRow.Cells[2].FindControl("txtElementComment") as TextBox).Text,
                   translationID = (oldRow.Cells[3].FindControl("cboTranslationID") as DropDownList).SelectedValue,
                   translationComment = (oldRow.Cells[3].FindControl("txtTranslationComment") as TextBox).Text;
for(int i = editButtonColumNo + 1; i < newRow.Cells.Count; i++) {
	string textBoxID = newRow.Cells[i].Controls[1].UniqueID;
	foreach(string key in Request.Form.AllKeys) {
		if(key == textBoxID) {
			cmd.Parameters["@trans"].Value = Request.Form[key];
			cmd.Parameters["@lang"].Value = textBoxID.Substring(textBoxID.LastIndexOf("$") + 1); // the ID of the textbox has $country-CODE appended to it
			cmd.ExecuteNonQuery();
			break;
		}
	}
}

In my particular scenario, I needed the names of the columns as parameters for a query, which is why I stored the column names in the textbox IDs during databinding on the texbox controls in GridViewTemplate. This might not be the nicest or most efficient method of extracting the values again, but it does the job. Even with 12 dynamic textboxes and a few hidden fields the total size of the Request.Form collection was 31 keys, which won’t hamper performance too much.

Cross page request variables in ASP.NET

Harry Jennerway — Sun, 09 Nov 2008 14:48:07 +0000

If you have a page which uses a master page, then put controls inside a ContentPlaceHolder on the sub page, accessing the values of the controls can be difficult if you’re posting the form to another page. The problem is, the ContentPlaceHolder mangles the control names so instead of radApplication, you get ctl00$cntMain$radApplication, meaning you can’t read them from Request.Form.

Hardcoding the name of the placeholder would be a bad idea incase you ever change the name of it or change the master page. There are actually two ways you can get at the controls.

The first way, which works if you just need access to the value posted involves looping through Request.Form.AllKeys to find the name of the control.

string appName = string.Empty;
foreach(string key in Request.Form.AllKeys) {
  if(key.endsWith("radApplication")) {
    appName = Request.Form[key];
  }
}

While this works, it could break if there were several controls with similar names on the page. The second method uses the PreviousPage property to provide a reference to the actual control.

ContentPlaceHolder previous = (ContentPlaceHolder)PreviousPage.Master.FindControl("cntMain");
string projectID = (previous.FindControl("radApplication") as RadioButtonList).SelectedValue;

The benefit of getting a reference to the actual control is that you can see more than just the value submitted on the form.