CSS Friendly Control Adapters

Nu har jag testat att använda CSS Friendly Control Adapters som jag nämde förra året. De fungerar verkligen magiskt bra och man får en mycket mer CSS-vänlig HTML-kod från kontrollerna i Asp.Net.

Hur man installerar adaptrarna

Det finns två olika sätt att lägga till adaptrarna som även CodeClimber förklarar.

Dels det lite omständiga sättet som Microsoft har utvecklat, här måste man lägga till speciella javascript och CSS bibliotek. Då får man dock större kontroll över koden om man vill modifiera den själv.

Vill man göra det enklare för sig så kan man använda Brian DeMarzo's variant som nu finns som ett eget projekt på CodePlex. Microsoft har lämnat sina över hela projektet till CodePlex så det är där som utvecklingen kommer att ske i framtiden.

Instruktionerna är enkla och görs genom tre steg:

  1. Ladda hem det senaste filerna.
  2. Lägg till en referens till CSSFriendly.dll i din webb-applikation.
  3. Lägg till CSSFriendlyAdapters.browser konfigurationen till App_Browsers mappen.

Kan ställa till problem med ViewState

När jag använde de vanliga adaptrarna (inte CSSFriendly.dll) Stötte dock inledningsvis på ett error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Är inte säker på vad det berodde på, men hittade en lösning i en tråd på .NET-forumet.

Problemet var i TreeView och efter jag la in följande kod så fungerade det.

private string _strviewState = string.Empty;

private string ViewStateID
{
get { return Control.ClientID + "__VIEWSTATE"; }
}

...

protected override Object SaveAdapterViewState()
{
string retStr = "";
TreeView treeView = Control as TreeView;
if ((treeView != null) && (_viewState != null))
{
if ((_viewState != null) && (Page != null) && (Page.Form != null))
{
Page.ClientScript.RegisterHiddenField(ViewStateID, _strviewState);
string script = "document.getElementById('" + ViewStateID + "').value = GetViewState__AspNetTreeView('" + Extender.MakeChildId("UL") + "');";
Page.ClientScript.RegisterOnSubmitStatement(typeof(TreeViewAdapter), ViewStateID, script);
}
retStr = ViewStateID + "|" + ComposeViewState(treeView.Nodes, "");
}
return retStr;

Observera att jag koden skiljer sig lite från den i forum-tråden. Så jag kan inte lova att viewstate verkligen fungerar med denna modifikation. I mitt fall behöver jag inget viewstate så jag nöjer mig där.