from:http://www.mikepope.com/blog/AddComment.aspx?blogid=2353

March 01, 2012

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>

New for ASP.NET Web Pages: Conditional attributes的更多相关文章

  1. Announcing the Release of ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1 for VS2012

    The NuGet packages for ASP.NET MVC 5.1, ASP.NET Web API 2.1 and ASP.NET Web Pages 3.1 are now live o ...

  2. ASP.NET Web Pages (Razor) API Quick Reference

    ASP.NET Web Pages (Razor) API Quick Reference By Tom FitzMacken|February 10, 2014 Print This page co ...

  3. 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]

    如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites] 一.布局页面介绍[Abo ...

  4. Displaying Data in a Chart with ASP.NET Web Pages (Razor)

    This article explains how to use a chart to display data in an ASP.NET Web Pages (Razor) website by ...

  5. 五张图概括 什么是 ASP 、 ASP.NET (Web Pages，Web Forms ，MVC )

    当你看懂下面这五张图,我相信你对于学习.NET Web开发路线将不陌生!                                               来源: http://www.w3 ...

  6. ASP.NET Web Pages 的冲突版本问题

    随着VS版本和.NET MVC版本.EF的版本的不断更新,虽然很多功能随着版本的提升而更完善,但对于旧版本开发的软件就有点悲催了,或许很多开发者都遇到类似的问题! 最近有一个项目是用.NET MVC3 ...

  7. ASP.NET Web Pages：C# 和 VB 实例

    ylbtech-.Net-ASP.NET Web Pages:C# 和 VB 实例 1.返回顶部 1. ASP.NET Web Pages - C# 和 VB 实例 通过 C# 和 Visual Ba ...

  8. ASP.NET Web Pages：发布网站

    ylbtech-.Net-ASP.NET Web Pages:发布网站 1.返回顶部 1. ASP.NET Web Pages - 发布网站 学习如何在不使用 WebMatrix 的情况下发布 Web ...

  9. ASP.NET Web Pages：PHP

    ylbtech-.Net-ASP.NET Web Pages:PHP 1.返回顶部 1. ASP.NET Web Pages - PHP PHP 开发人员请注意,Web Pages 可以用 PHP 编 ...

随机推荐

  1. Javascript 原型链资料收集

    Javascript 原型链资料收集 先收集,后理解. 理解JavaScript的原型链和继承 https://blog.oyanglul.us/javascript/understand-proto ...

  2. Python学习系列（五）(文件操作及其字典)

    Python学习系列(五)(文件操作及其字典) Python学习系列(四)(列表及其函数) 一.文件操作 1,读文件      在以'r'读模式打开文件以后可以调用read函数一次性将文件内容全部读出 ...

  3. 记一次RESTful调试过程

    1. 为什么前台怎么调用后台,都是跳到页面不存在. 因为已经改为RESTful,保存按钮的type还是submit: 2. 改成buttong之后,设置onclick="update()“, ...

  4. Ambari的API调用

    GET api/v1/clusters/HDP/configurations可以获得所有的配置信息(例如,http://hdp0:8080/api/v1/clusters/HDP/configurat ...

  5. CAN总线概述

    基本概念 CAN 是Controller Area Network 的缩写(以下称为CAN),是ISO国际标准化的串行通信协议.在汽车产业中,出于对安全性.舒适性.方便性.低公害.低成本的要求,各种各 ...

  6. 在Linux 64位系统下使用hugepage

    首先,为什么要介绍/使用HugePage? 在步入正题之前,先讲一个非常普遍的数据库性能问题. 众所周知,Oracle数据库使用共享内存(SGA)来管理可以共享的一些资源;比如shared pool中 ...

  7. CIDR地址分类

    CIDR(Classless Inter Domain Routing)改进了传统的IPv4地址分类.传统的IP分类将IP地址直接对应为默认的分类,从而将Internet分割为网络.CIDR在路由表中 ...

  8. 校赛热身 Problem B. Matrix Fast Power

    找循环节,肯定在40项以内,不会证明. #include <iostream> #include <cstring> #include <string> #incl ...

  9. php创建token

    token是唯一的标识,随机字符串+时间戳结合,一般不会出现重复的字符串了. 这是一种方式 function create_token() { $randLength = 6; $chars = 'a ...

  10. JavaScript笔记——基础知识（二）

    Function类型 函数function不需要返回类型(不是没有返回值),参数也不需要指定类型,更为特殊的是函数竟然是个类,可以通过new出来 var box= new Function('num1 ...