posts - 215,  comments - 194,  trackbacks - 20
公告
  2012年5月11日

      本文将介绍Linq中的Where与SkipWhile的用法,有时我们容易混淆它们。下面来看一个简单的UnitTest:

[TestMethod]
public void TestSkipWhileAndWhereLinq()
{
    //arrange
    string[] names = { "Jalpesh", "Jayesh", "Tushar", "Tejas", "Sanjay", "Nijesh", "Jemit", "Jay" }; 

    var skipWhileResult = names.SkipWhile(s => s.ToLower().StartsWith("j"));
    //assert
    var expectArray=new string[] {"Tushar", "Tejas", "Sanjay", "Nijesh", "Jemit", "Jay" };
    CollectionAssert.AreEqual( expectArray, skipWhileResult.ToArray());

    var whereReuslt = names.Where(s => !s.ToLower().StartsWith("j"));
    //assert
    var expectArray2 = new string[] { "Tushar", "Tejas", "Sanjay", "Nijesh" };
    CollectionAssert.AreEqual(expectArray2, whereReuslt.ToArray());
}


  SkipWhile只是匹配一开始满足条件的元素。上面的代码一看就明白。更加请参照MSDN

  SkipWhile是这样的实现的:

 

public static IEnumerable<TSource> SkipWhile<TSource>(this IEnumerable<TSource> source, Func<TSource, bool> predicate)
{
    if (source == null) throw Error.ArgumentNull("source");
    if (predicate == null) throw Error.ArgumentNull("predicate");
    return SkipWhileIterator<TSource>(source, predicate);
}

private static IEnumerable<TSource> SkipWhileIterator<TSource>(IEnumerable<TSource> source, Func<TSource, bool> predicate)
{
    bool iteratorVariable0 = false;
    foreach (TSource iteratorVariable1 in source)
    {
        if (!iteratorVariable0 && !predicate(iteratorVariable1)) iteratorVariable0 = true;
        if (iteratorVariable0)
        {
            yield return iteratorVariable1;
        }
    }
}

 

  希望对您开发有帮助。 


作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted @ 2012-05-11 17:14 PetterLiu 阅读(94) 评论(1) 编辑
  2012年4月28日

    前面的文章我们介绍了jquery.validate.unobtrusive 脚本实现Asp.net MVC3表单验证。这里我们介绍应用jquery.unobtrusive-ajax.js实现的ajax操作.首先确保的是在Web.config中配置节:

    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

我们有一个_register.cshtml的PartialView : 
 
<script type="text/javascript">
    function ReloadForm(xhr) {
        $('#formcontent').html(xhr.responseText);
    }

    function ClearValidationErrors() {
        $('.validation-summary-errors').html('');
        $('.input-validation-error').removeClass('input-validation-error');
        $('.field-validation-error').remove();
    }
</script>

@using (Ajax.BeginForm("IndexPost", "Home", Model, new AjaxOptions { UpdateTargetId = "formresults", HttpMethod = "Post", OnSuccess = "ClearValidationErrors", OnFailure = "ReloadForm(xhr)" }))
{
    @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")
    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                @Html.LabelFor(m => m.UserName)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.UserName)
                @Html.ValidationMessageFor(m => m.UserName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Email)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(m => m.Email)
                @Html.ValidationMessageFor(m => m.Email)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Password)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.Password)
                @Html.ValidationMessageFor(m => m.Password)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.ConfirmPassword)
            </div>
            <div class="editor-field">
                @Html.PasswordFor(m => m.ConfirmPassword)
                @Html.ValidationMessageFor(m => m.ConfirmPassword)
            </div>

            <p>
                <input type="submit" value="Register" />
            </p>
        </fieldset>
    </div>
}


上面的代码,我们使用了AjaxOptions,这样帮我们指定要更新UpdateTargetId,调用成功要执行的Js function,以及失败以后执行Js function. 这里当我们的ajax调用成功后我们返回一个叫”_result.cshtml”的partialView,内容是这样的:

<h2>Thanks for registering!</h2>
<p>You have successfully registered</p>


在_Layout.cshtml中定义一个header节:


@
if(IsSectionDefined("Header"))
{
    @RenderSection("Header")
}

下面是主要用示演的Index.cshtml的内容. 你可以看到一个id叫formresults,AJAX调用成功后将会更新它:

 

@model AjaxTest.Models.RegisterModel
@{
    ViewBag.Title = "Home Page";
}
@section Header
{
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
}
<h2>@ViewBag.Message</h2>
<div id="formcontent">
    @{ Html.RenderPartial("_register", Model); }
</div>
<div id="formresults"></div>


Controller的代码是这样的,IndexPost Action就是我们Ajax的Post 目标.
 
public ActionResult Index()
{
    ViewBag.Message = "Welcome to ASP.NET MVC!";

    return View(new AjaxTest.Models.RegisterModel());
}

[HttpPost]
public ActionResult IndexPost(AjaxTest.Models.RegisterModel model)
{
    if (ModelState.IsValid)
    {
        return PartialView("_results");
    }

    HttpContext.Response.StatusCode = 500;
    HttpContext.Response.Clear();
    return PartialView("_register", model);
}


Model是这样的:

public class RegisterModel
{
    [Required]
    [Display(Name = "User name")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email address")]
    public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}


当View执行时我们看到这样的HTML,你可以看到Form 标签加上了 data-ajax,data-ajax-method等特性, 而input上data-* 用来做验证:

<form action="/Home/IndexPost" data-ajax="true" data-ajax-failure="ReloadForm(xhr)" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-success="ClearValidationErrors" data-ajax-update="#formresults" id="form0" method="post">    <div>
        <fieldset>
            <legend>Account Information</legend>

            <div class="editor-label">
                <label for="UserName">User name</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
            </div>

            <div class="editor-label">
                <label for="Email">Email address</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-required="The Email address field is required." id="Email" name="Email" type="text" value="" />
                <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
            </div>

            <div class="editor-label">
                <label for="Password">Password</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
                <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
            </div>

            <div class="editor-label">
                <label for="ConfirmPassword">Confirm password</label>
            </div>
            <div class="editor-field">
                <input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password" />
                <span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
            </div>

            <p>
                <input type="submit" value="Register" />
            </p>
        </fieldset>
    </div>
</form>
 

你有兴趣可以查看Asp.net MVC 3 RTM的源代码,下面是来AjaxOptions类ToUnobtrusiveHtmlAttributes方法,你可以看到data-*与表单中生成的一致。

public IDictionary<string, object> ToUnobtrusiveHtmlAttributes() {
    var result = new Dictionary<string, object> {
        { "data-ajax", "true" },
    };

    AddToDictionaryIfSpecified(result, "data-ajax-url", Url);
    AddToDictionaryIfSpecified(result, "data-ajax-method", HttpMethod);
    AddToDictionaryIfSpecified(result, "data-ajax-confirm", Confirm);

    AddToDictionaryIfSpecified(result, "data-ajax-begin", OnBegin);
    AddToDictionaryIfSpecified(result, "data-ajax-complete", OnComplete);
    AddToDictionaryIfSpecified(result, "data-ajax-failure", OnFailure);
    AddToDictionaryIfSpecified(result, "data-ajax-success", OnSuccess);

    if (!String.IsNullOrWhiteSpace(LoadingElementId)) {
        result.Add("data-ajax-loading", "#" + LoadingElementId);

        if (LoadingElementDuration > 0) {
            result.Add("data-ajax-loading-duration", LoadingElementDuration);
        }
    }

    if (!String.IsNullOrWhiteSpace(UpdateTargetId)) {
        result.Add("data-ajax-update", "#" + UpdateTargetId);
        result.Add("data-ajax-mode", InsertionModeUnobtrusive);
    }

    return result;
}


希望对您开发有帮助,您可能感兴趣的文章:

HTML5中custom data-*特性与asp.net mvc 3 表单验证 
Html 5中自定义data-*特性


作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted @ 2012-04-28 15:29 PetterLiu 阅读(217) 评论(1) 编辑
  2012年4月12日

      前面一篇文章我们介绍了HTML5中custom data-*特性,在Asp.net MVC Web App中原来我们对表单有验证,需要写这个js与Jquery Validation 插件配合, 回顾一下,看下面的代码:

   <!DOCTYPE html>
<html>
<head>
    <title>LoginWithModel</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.pack.js"
        type="text/javascript"></script>
 </head>
<body>
    <form action="/Security/LoginWithModel" method="post">  <table>
            <tr>
                <td>
                    <label for="UserName">User name</label>
                </td>
                <td>
                    <input id="UserName" name="UserName" type="text" value="" />
                    
                </td>
            </tr>
            <tr>
                <td>
                    <label for="Email">Email address</label>
                </td>
                <td>
                    <input id="Email" name="Email" type="text" value="" />
                    
                </td>
            </tr>
            <tr>
                <td>
                    <label for="Password">Password</label>
                </td>
                <td>
                    <input id="Password" name="Password" type="password" />
                    
                </td>
            </tr>
            <tr>
                <td>
                    <label for="ConfirmPassword">Confirm password</label>
                </td>
                <td>
                    <input id="ConfirmPassword" name="ConfirmPassword" type="password" />
                    
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit" />
</form>    <script src="../../Scripts/MyformValidatation.js" type="text/javascript"></script>
</body>
</html>


JS 通常像这样:

$(document).ready(function () {

    $.validator.addMethod('Email', function (value) {
        return /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value);
    }, 'Please enter correct email.');


    $("form").validate({
        rules: {
            UserName: { required: true },
            Email: { required: true, Email: true },
            Password: { required: true, range: [6, 12] },
            ConfirmPassword: { required: true, equalTo: "#Password" }
        }
            , messages: {
                UserName: { required: "Please enter UserName" },
                Email: { required: "Please enter Email", Email: "Please enter corret email" },
                Password: { required: "Please enter Password", range: "must be at least 6 characters long." },
                ConfirmPassword: { required: "Please enter confirm password." }
            }
                , wrapper: "p",
        errorPlacement: function (error, element) {
            if (error != null) {
                error.insertAfter(element);

            }
        }
    })
});

接下来我们在Asp.net MVC 3 web 中,启用Unobtrusive JavaScript来帮做验证,我们只需在Web.config设置

    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>


View, 先引用jquery.validate.unobtrusive.min.js,接着是这样的:

 

@model Mvc3App.Models.RegisterModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>LoginWithModel</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.pack.js"
        type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"
        type="text/javascript"></script>
</head>
<body>
    @Html.ValidationSummary("Errors have occurred:")
    @using (Html.BeginForm())
    {
        <table>
            <tr>
                <td>
                    @Html.LabelFor(m => m.UserName)
                </td>
                <td>
                    @Html.TextBoxFor(i => i.UserName)
                    @Html.ValidationMessageFor(i => i.UserName)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(m => m.Email)
                </td>
                <td>
                    @Html.TextBoxFor(i => i.Email)
                    @Html.ValidationMessageFor(i => i.Email)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(m => m.Password)
                </td>
                <td>
                    @Html.PasswordFor(i => i.Password)
                    @Html.ValidationMessageFor(i => i.Password)
                </td>
            </tr>
            <tr>
                <td>
                    @Html.LabelFor(m => m.ConfirmPassword)
                </td>
                <td>
                    @Html.PasswordFor(i => i.ConfirmPassword)
                    @Html.ValidationMessageFor(i => i.ConfirmPassword)
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit" />
    }

</body>
</html>

Model类, 注意上面使用是System.ComponentModel.DataAnnotations特性。

public class RegisterModel
{
    [Required]
    [Display(Name = "User name")]
    [RegularExpression("^[A-Za-z0-9]+$",ErrorMessage="Please correct format user name.")]
    public string UserName { get; set; }

    [Required]
    [DataType(DataType.EmailAddress)]
    [Display(Name = "Email address")]
    [RegularExpression(@"^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$", ErrorMessage = "Please correct format Email.")]
    public string Email { get; set; }

    [Required]
    [StringLength(12, ErrorMessage = "The {0} must be at least {2} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }
}

 

这时最后render出来html,你有看到那些验证规则都出来了:

   <!DOCTYPE html>
<html>
<head>
    <title>LoginWithModel</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.pack.js"
        type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"
        type="text/javascript"></script>
</head>
<body>
    
<form action="/Security/LoginWithModel" method="post">        <table>
            <tr>
                <td>
                    <label for="UserName">User name</label>
                </td>
                <td>
                    <input data-val="true" data-val-regex="Please correct format user name." data-val-regex-pattern="^[A-Za-z0-9]+$" data-val-required="The User name field is required." id="UserName" name="UserName" type="text" value="" />
                    <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="Email">Email address</label>
                </td>
                <td>
                    <input data-val="true" data-val-regex="Please correct format Email." data-val-regex-pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" data-val-required="The Email address field is required." id="Email" name="Email" type="text" value="" />
                    <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="Password">Password</label>
                </td>
                <td>
                    <input data-val="true" data-val-length="The Password must be at least 6 characters long." data-val-length-max="12" data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password" />
                    <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="ConfirmPassword">Confirm password</label>
                </td>
                <td>
                    <input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password" />
                    <span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
                </td>
            </tr>
        </table>
        <input type="submit" value="Submit" />
</form>
</body>
</html>

有注意到上面的html中,有加入相应data-*特性。这就是ASP.NET MVC 3 特性之一,注意这里必须使用BeginForm才能生成它们。最后我们能实现相同的验证效果,而我们不需要单独写JS了。别需要注意是,如果引入jquery.validate.unobtrusive相关js, 再其它地方使用  $("form").validate() 时,则不会生效。原因是jquery.validate.unobtrusive提前注册validate方法,它会与你自已定义冲突.

如果你想看看有哪个内在验证规则,可以运行下面的html:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Validate Unobtrusive demo</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.js"
        type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"
        type="text/javascript"></script>
    <style type="text/css">
        body, input
        {
            font-size: 9pt;
        }
        .input-validation-error
        {
            border: 1px solid #ff0000;
        }
        .input-validation-valid
        {
            border: 1px solid #00ff00;
        }
        .field-validation-error
        {
            color: #ff0000;
        }
        .field-validation-valid
        {
            display: none;
        }
        .validation-summary-errors
        {
            font-weight: bold;
            color: #ff0000;
        }
        .validation-summary-valid
        {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" method="get">
    <div data-valmsg-summary="true">
        <ul>
        </ul>
    </div>
    <div>
        <input type="text" id="tReq" name="tReq" data-val="true" data-val-required="requried" />
        <span data-valmsg-for="tReq"></span>
    </div>
    <div>
        <input type="text" id="tAccept" name="tAccept" value="a.doc" data-val="true" data-val-accept="name must be .jpg、.gif or .png"
            data-val-accept-exts="jpg|gif|png" />
        <span data-valmsg-for="tAccept"></span>
    </div>
    <div>
        <input type="text" id="tRegex" name="tRegex" value="123-ABC@" data-val="true" data-val-regex="Format as 999-999"
            data-val-regex-pattern="[0-9A-Z]{3}-[0-9A-Z]{3}" />
        <span data-valmsg-for="tRegex"></span>
    </div>
    <div>
        <input type="text" id="tDigit" name="tDigit" value="-1234" data-val="true" data-val-digits="should be digital" />
        <span data-valmsg-for="tDigit"></span>
    </div>
    <div>
        <input type="text" id="tNum" name="tNum" value="-1,234.56A" data-val="true" data-val-number="should be number" />
        <span data-valmsg-for="tNum"></span>
    </div>
    <div>
        <input type="text" id="tDate" name="tDate" value="X/01/X2000" data-val="true" data-val-date="should be digital Date" />
        <span data-valmsg-for="tDate"></span>
    </div>
    <div>
        <input type="text" id="tEmail" name="tEmail" value="jeffrey @mail.com" data-val="true"
            data-val-email="should be Email" />
        <span data-valmsg-for="tEmail"></span>
    </div>
    <div>
        <input type="text" id="tUrl" name="tUrl" value="http:// blog.darkthread.net" data-val="true"
            data-val-url="should be url" />
        <span data-valmsg-for="tUrl"></span>
    </div>
    <div>
        <input type="text" id="tLen" name="tLen" value="TTT" data-val="true" data-val-length="Length  from 4 to 8"
            data-val-length-min="4" data-val-length-max="8" />
        <span data-valmsg-for="tLen"></span>
    </div>
    <div>
        <input type="text" id="tRange" name="tRange" value="5" data-val="true" data-val-range="range from 10 to100"
            data-val-range-min="10" data-val-range-max="100" />
        <span data-valmsg-for="tRange"></span>
    </div>
    <div>
        <input type="text" id="tEq" name="tEq" value="99" data-val="true" data-val-equalto="same as above value"
            data-val-equalto-other="tRange" />
        <span data-valmsg-for="tEq"></span>
    </div>
    <div>
        <input type="submit" id="send" value="Send" />
    </form>
</body>
</html>

Asp.net MVC 3 中 Unobtrusive JavaScript, 简化我们Web开发,提高了开发效率。
希望对您Web开发有帮助。
您可能感兴趣的文章:
 
Html 5中自定义data-*特性
Asp.net MVC中表单验证


作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted @ 2012-04-12 13:30 PetterLiu 阅读(225) 评论(0) 编辑
  2012年4月9日

   Html 5中支持用户自定义的data-*特性,它们在UI是不可见的。例如data-length,它可以附加在input的标签上。更加具体信息可参考W3C Html 5 data-说明书

有这么一段描述:

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

接下来我们就可以实现这样一个简单例子:

<!DOCTYPE html>
<html>
<head>
    <title>Html5 custom data attribute Test</title>
</head>
<body >
   <li class="user" data-name="Peter Liu" data-city="ShangHai"
      data-lang="CSharp" data-food="apple">
   <b>Peter says:</b> <span>Hello, how are you?</span>
 </li>
 <script type="text/javascript">
     var user = document.getElementsByTagName("li")[0];
     var pos = 0, span = user.getElementsByTagName("span")[0];

     var phrases = [
   { name: "city", prefix: "I am from " },
   { name: "food", prefix: "I like to eat " },
   { name: "lang", prefix: "I like to program in " }
 ];

     user.addEventListener("click", function () {
         var phrase = phrases[pos++];
         // Use the .dataset property
         span.innerHTML = phrase.prefix + user.dataset[phrase.name];
     }, false);

 </script>
</body>
</html>

上面的li标签中嵌入一些data-*特性,当你点击那个span,读取了每个data-*的value, 最后实现一个切换文字效果。你有注意到上面js中有用到一个dataset属性。W3C官方也是有关于dataset的介绍。上面的代码测试通过在 Firefox 11.0, Chrome 18.0.1025.151
注意这个在IE9是不支持的。 IE9 需要改写为getAttribute

<!DOCTYPE html>
<html>
<head>
    <title>Html5 custom data attribute Test</title>
</head>
<body >
   <li class="user" data-name="Peter Liu" data-city="ShangHai"
      data-lang="CSharp" data-food="apple">
   <b>Peter says:</b> <span>Hello, how are you?</span>
 </li>
 <script type="text/javascript">
     var user = document.getElementsByTagName("li")[0];
     var pos = 0, span = user.getElementsByTagName("span")[0];

     var phrases = [
   { name: "city", prefix: "I am from " },
   { name: "food", prefix: "I like to eat " },
   { name: "lang", prefix: "I like to program in " }
 ];

     user.addEventListener("click", function () {
         var phrase = phrases[pos++];
         // Use the .dataset property
         span.innerHTML = phrase.prefix + user.getAttribute('data-'+phrase.name);
     }, false);

 </script>
</body>
</html>


上面的代码在IE 9.0.8112测试通过。您也可以在IE, FF中单步调试js看其中结果

希望对您Web开发有帮助。

您可能感兴趣的文章:

HTML5的智能提示在VisualStudio2010

 


作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted @ 2012-04-09 11:26 PetterLiu 阅读(141) 评论(0) 编辑
  2012年4月3日

      Asp.net MVC 应用程序中经常使用ajax操作,一般都是一些action。我们来实现个特性标记当前某个action只支持处理ajax的http请求。 下面直接看代码 

/// <summary>
/// AjaxOnlyAttribute
/// </summary>
public class AjaxOnlyAttribute : ActionFilterAttribute
{
    /// <summary>
    /// Called by the ASP.NET MVC framework before the action method executes.
    /// </summary>
    /// <param name="filterContext">The filter context.</param>
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        if (!filterContext.HttpContext.Request.IsAjaxRequest())
        {
            filterContext.Result = new HttpNotFoundResult();
        }
        base.OnActionExecuting(filterContext);
    }
}

 

这里让它返回一个特别的HttpNotFoundResult, 以确保代码可读性:

/// <summary>
/// HttpNotFoundResult
/// </summary>
public class HttpNotFoundResult : ActionResult
{
    /// <summary>
    /// Enables processing of the result of an action method by a custom type that inherits from the <see cref="T:System.Web.Mvc.ActionResult"/> class.
    /// </summary>
    /// <param name="context">The context in which the result is executed. The context information includes the controller, HTTP content, request context, and route data.</param>
    public override void ExecuteResult(ControllerContext context)
    {
        if (context == null)
        {
            throw new ArgumentNullException("Context");
        }
        context.HttpContext.Response.StatusCode = 401;
    }
}

 

在Action标记像这样:

[AjaxOnly]
public ActionResult LogOff()
{
    FormsAuthentication.SignOut();

    return RedirectToAction("Index", "Home");
}

 


如何工作的看Unit Test,分别包括了Ajax请求与非Ajax请求的场景.

[TestMethod]
public void Test_AjaxOnlyAttributeWithAjaxRequest()
{
    //arrange
    var header = new System.Collections.Specialized.NameValueCollection();
    header.Add("X-Requested-With", "XMLHttpRequest");

    var mockRequest = new Mock<HttpRequestBase>();
    mockRequest.SetupGet(http => http.Headers).Returns(header);

    var mockFiltercontext = new Mock<ActionExecutingContext>();
    mockFiltercontext.SetupGet(fc => fc.HttpContext.Request).Returns(mockRequest.Object);

    //act
    var ajaxAttribute = new AjaxOnlyAttribute();
    var filterContext = mockFiltercontext.Object;
    ajaxAttribute.OnActionExecuting(filterContext);

    //verify
    mockRequest.VerifyAll();

    //assert
    Assert.IsTrue(filterContext.HttpContext.Request.IsAjaxRequest());
    var httpNotFoundResult = filterContext.Result as Mvc3App.Extention.Attribute.HttpNotFoundResult;
    Assert.IsNull(httpNotFoundResult);
}


[TestMethod]
public void Test_AjaxOnlyAttributeWithNonAjaxRequest()
{
    //arrange
    var header = new System.Collections.Specialized.NameValueCollection();

    var mockRequest = new Mock<HttpRequestBase>();
    mockRequest.SetupGet(http => http.Headers).Returns(header);

    var mockFiltercontext = new Mock<ActionExecutingContext>();
    mockFiltercontext.SetupGet(fc => fc.HttpContext.Request).Returns(mockRequest.Object);

    var controllerContext = new ControllerContext
    {
        RequestContext = new RequestContext(new MockHttpContext(), new RouteData()),
        HttpContext = new MockHttpContext()
    };

    //act
    var ajaxAttribute = new AjaxOnlyAttribute();
    var filterContext = mockFiltercontext.Object;
    ajaxAttribute.OnActionExecuting(filterContext);

    //verify
    mockRequest.VerifyAll();

    //assert
    Assert.IsFalse(filterContext.HttpContext.Request.IsAjaxRequest());
    var httpNotFoundResult = filterContext.Result as Mvc3App.Extention.Attribute.HttpNotFoundResult;
    Assert.IsNotNull(httpNotFoundResult);
    httpNotFoundResult.ExecuteResult(controllerContext);
    Assert.AreEqual(controllerContext.HttpContext.Response.StatusCode, 401);
} 

 

MockHttpContext是一个用于Unit Test的类型,由于篇幅有限,这里不讲了。

 

希望对您Web开发有帮助。

您可能感兴趣文章:

Asp.net MVC3扩展之Ajax异常处理特性


作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog

posted @ 2012-04-03 16:57 PetterLiu 阅读(219) 评论(1) 编辑
  2012年3月31日
摘要: 下面的T-SQL可以生成索引在当前数据库的外键上, 可以帮助我们找回外键上丢失的索引,查看索引命名是否规范。 -- declare memory tableDECLARE @INDEX_TABLE TABLE( primary_key INT IDENTITY(1,1) NOT NULL, schema_name NVARCHAR(100), table...阅读全文
posted @ 2012-03-31 10:57 PetterLiu 阅读(73) 评论(0) 编辑
  2012年3月24日
摘要: 前面的Post有提到解决Web中表单重复提交的方法,实际上表单重复提交的问题不单是Asp.net,其它动态Page都有。让我们看下面的图示: 然后在刷新页面时经常看到提示框在IE中: Google Chrome: Firefox: 最简单的解决方法就是使用Post-Redirect-Get模式,就是Http-Post完后,马上做...阅读全文
posted @ 2012-03-24 11:50 PetterLiu 阅读(272) 评论(0) 编辑
  2012年3月23日
摘要: 页面中需要实现某个按钮点击完后,禁用它,并显示倒计时。这个默认是3秒,代码很简单: <head> <title>test count down button</title> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></...阅读全文
posted @ 2012-03-23 16:35 PetterLiu 阅读(192) 评论(0) 编辑
  2012年3月10日
摘要: 重复提交的场景很常见,可能是当时服务器延迟的原因,如购物车物品叠加,重复提交多个订单。常见的解决方法是提交后把Button在客户端Js禁用,或是用Js禁止后退键等。在ASP.NET MVC 3 Web Application中 如何去防止这类HTTP-Post的重复提交呢? 我们可以借助Session,放置一个Token在View/Page上,然后在Server端去验证是不是同一个T...阅读全文
posted @ 2012-03-10 14:29 PetterLiu 阅读(396) 评论(1) 编辑
  2012年2月27日
摘要: 有时我们需要防止退格键的网页后退,一般情况下最好不要这么用,因为对UX体验不好。 下面是Js片段在IE9,Firebox 10.0.2 中测试过 : $(document).keydown(function (e) { var doPrevent; if (e.keyCode == 8) { var d = e.srcElement || e.tar...阅读全文
posted @ 2012-02-27 15:38 PetterLiu 阅读(278) 评论(0) 编辑
仅列出标题  下一页