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. as3随机数

    for(var i:int = 0;i<100;i++){    trace(Math.floor(Math.random()*3)); } Math.floor(Math.random()*3 ...

  2. 讲解JSP自定义标签

    一.基本概念 1.标签(Tag) 标签是一种XML元素,通过标签可以使JSP网页变得简洁并且易于维护,还可以方便地实现同一个JSP文件支持多种语言版本.由于标签是XML元素,所以它的名称和属性都是大小 ...

  3. [转]javascript中基本类型和引用类型的区别分析

    基本类型和引用类型 ECMAScript包含两个不同类型的值:基本类型值和引用类型值.基本类型值指的是简单的数据段:引用类型值指由多个值构成的对象.当我们把变量赋值给一个变量时,解析器首先要做的就是确 ...

  4. The type javax.xml.rpc.ServiceException cannot be resolved.It is indirectly

    The type javax.xml.rpc.ServiceException cannot be resolved.It is indirectly 博客分类: 解决方案_Java   问题描述:T ...

  5. 当 PHP 遇上 MongoDB

    FROM:http://www.cstor.cn/textdetail_7995.html 之前笔者出了一篇文章是教大家在 Linux 下安装 MongoDB,并且透过 Mongo Client 操作 ...

  6. JMeter使用经历

    JMeter是Apache大树下的又一个果实,是一个压力测试工具,因为使用方便又开源免费,也被用来做功能测试.项目里也是拿JMeter来做功能性的接口自动化测试.这里大概说明下怎么用. 首先还是先下载 ...

  7. 在rebar发布的项目中添加监视工具

    默认使用rebar创建的项目没法使用observer,可以如下操作 修改app.src {application, tcp_server, [ {description, ""}, ...

  8. BROCADE交换机配置

    BROCADE交换机配置一 与交换机交互,可以使用三种方式: 串口 以太网口 光纤口 缺省的串口参数是:9600,N,8,1 缺省IP访问方式是: IP地址: 10.77.77.77 用户名: adm ...

  9. 【转】Jmeter和LR上传文件和下载

    背景: 在某个申请业务中,需要上传附件文件,然后才能提交该申请 遇到的问题: 1,  在使用Jmeter或者LR进行录制时,无法录制到上传文件的请求,只能通过Fiddler能查看到该请求 2,  因为 ...

  10. 使用YCSB测试mongodb

    项目里面需要对mongodb的性能进行测试,看了下网上很多做法都是使用YCSB进行测试,因此开始学习使用YCSB. 参考资料: YCSB github地址:https://github.com/bri ...