About

I'm Mike Pope. I live in the Seattle area. I've been a technical writer and editor for over 30 years. I'm interested in software, language, music, movies, books, motorcycles, travel, and ... well, lots of stuff.

Read more ...

Blog Search


(Supports AND)

Google Ads

Feed

Subscribe to the RSS feed for this blog.

See this post for info on full versus truncated feeds.

Quote

What grammarians say should be has perhaps less influence on what shall be than even the more modest of them realize; usage evolves itself little disturbed by their likes and dislikes. And yet the temptation to show how better use might have been made of the material to hand is sometimes irresistible.

— H.W. Fowler



Navigation





<December 2016>
SMTWTFS
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567

Categories

  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  
  RSS  

Contact

Email me

Blog Statistics

Dates
First entry - 6/27/2003
Most recent entry - 12/2/2016

Totals
Posts - 2407
Comments - 2546
Hits - 1,903,197

Averages
Entries/day - 0.49
Comments/entry - 1.06
Hits/day - 388

Updated every 30 minutes. Last: 10:34 PM Pacific


  02:07 PM

The beta release of ASP.NET Web Pages has been released (for example, as part of the ASP.NET MVC 4 Beta release). There are only a few differences from the December 2011 Developer Preview release. (Details when we've got them posted.)

A very cool feature is what's being called conditional attributes. The idea is that in markup, you can set the value of an element's attribute to a variable or expression. If the variable or expression returns false or null, the entire attribute is not rendered. There are a variety of uses for this, but it does a great job of solving a problem we inherited from HTML 1.0 (I think it was).

The problem manifests in cases where the simple appearance of an attribute name — regardless of its value — is sufficient to trigger HTML behavior. One case is the checkbox, i.e., the <input type="checkbox"> element:

<input type="checkbox" name="check1" value="check1" checked />
<input type="checkbox" name="check1" value="check1" checked="true" />
<input type="checkbox" name="check1" value="check1" checked="anyThingAtAll" />

Notice that in the first one, the checked attribute doesn't even have a value. Nonetheless, all of these work the same, namely they produce checkbox that's selected.

There's a similar situation with items in a selection list:

<select>
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option>
</select>

Technically, to select item B, the tag should read <option value="B" selected="selected">, but just including the selected attribute works.

All of this presents a problem when you want to use code in ASP.NET Web Pages to check a checkbox or select a list item. To just set a normal attribute value, you can use inline Razor code like this:

<input type="text" name="text1" value="@Request.Form["text1"]" />

But that doesn't work for the checked or selected attributes, since it doesn't matter what you set those attributes to.

The solution up to now has been to use more elaborate code in the page to render (or not render) the entire attribute, not just its value. Here's one example:

<input type="checkbox" name="check1" value="check1"
@if(Request.QueryString["val1"] == "true"){
<text>checked="checked"</text>
}
/>

Or if you were inclined, you could use the C# ternary operator, like this:

<input type="checkbox" name="check1" value="check1" 
@(Request.QueryString["val1"] == "true" ? Html.Raw("checked=\"checked\"") : null)
/>

Anyway, both of these methods were a little clunky.

It's now way simpler. As I say, you can now set an attribute to a code value, and if the value is true or non-null, the attribute renders. If it's false or null, the attribute doesn't render. Here's an example:

@{
bool check1 = false;
if(Request.QueryString["val1"] == "true"){
check1=true;
}
}

Then in the markup:

<input type="checkbox" name="check1" value="check1" checked="@check1" />

Magic.

You have to be careful that you don't assume that this works for all "truthy" and "falsy" values. For example, an empty string is not a false, so you can't return "" in order to kill the attribute. You could do something like this:

<input type="checkbox" name="check1" value="check1" 
checked=@(!(Request.QueryString["val1"].IsEmpty())) />

but this will render the attribute no matter what actual value ("true", "false", "foo") happens to be in the query string for val1.

Here's a page where you can see in a little more detail how this works. Pass query-string values like ?val1=true or ?val2=true to see what happens.

@{
bool checked1=false;
bool checked2=false;
Object someObject = null;
string aString = String.Empty;

if(Request.QueryString["val1"] == "true"){
checked1=true;
}

if(Request.QueryString["val2"] == "true"){
checked2=true;
someObject = this;
aString="Hello, conditional attributes!";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Conditional Attributes</title>
</head>
<body>

<form method="post">

<div>
<input type="checkbox" name="check1" value="check1" checked="@checked1" />
Value 1
<br/>
<input type="checkbox" name="check2" value="check2" checked="@checked2" />
Value 2
<br/>
<input type="checkbox" name="check3" value="check3" checked="@someObject" />
Some object
<br/>
<input type="checkbox" name="check4" value="check4" checked="@Request.Form["name"]" />
Request.Form["name"]
<br/>
<input type="checkbox" name="check5" value="check5" checked="@aString" />
aString
</div>

<div>
<input type="submit" name="buttonSubmit" value="Submit" />
</div>
</form>
</body>
</html>

[categories]   ,

|