asp.net-mvc-3 – 在MVC3中扩展不引人注目的javascript以在div客户端添加样式的最佳方法

我使用html5 / Razor / MVC3利用Bootstrap模板从Twitter。我想有表面验证，看起来像光滑，他们已经记录( http://twitter.github.com/bootstrap/#forms)。所以，如果我们看看如何标准的锅炉板MVC3帐户注册，标记将看起来像：

@using (Html.BeginForm("Register","Account",FormMethod.Post,new { @class="form-stacked" })) {
    @Html.ValidationSummary(true,"Snap! Something went wrong")
    <div>
        <fieldset>
            <legend>Account Information</legend>
            <div class="clearfix error">
                @Html.LabelFor(m => m.UserName)
                <div class="input">
                    @Html.TextBoxFor(m => m.UserName)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.Email)
                <div class="input">
                    @Html.TextBoxFor(m => m.Email)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.Email)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.Password)
                <div class="input">
                    @Html.PasswordFor(m => m.Password)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.Password)</span>
                </div>
            </div>

            <div class="clearfix">
                @Html.LabelFor(m => m.ConfirmPassword)
                <div class="input">
                    @Html.PasswordFor(m => m.ConfirmPassword)
                    <span class="help-inline">@Html.ValidationMessageFor(m => m.ConfirmPassword)</span>
                </div>
            </div>
        </fieldset>
        <div class="actions">
            <button class="btn large primary" type="submit">Register</button>
        </div>
    </div>

我想做的是让容器div注入“错误”类，就像我在第一个输入硬编码。 (因此在进入页面时，div将有一个“clearfix”类，但如果该输入块验证失败，则会将其标记为“clearfix错误”)。我想我将不得不更新div块以包括某种类型的ID，并可能添加一个新的数据属性到ValidationMessage。我没有扩展ValidationMessageFor帮助器的问题。我只是不是100％肯定的方法应该是扩展的库在那里。任何建议如何解决这个问题？

TIA。

更新：

我认为这种方法是合理的：

<div id="UserNameContainer" class="clearfix error">
    @Html.LabelFor(m => m.UserName)
    <div class="input">
        @Html.TextBoxFor(m => m.UserName)
        <span class="help-inline">@Html.ValidationMessageFor(m => m.UserName,null,new { @data_container = "UserNameContainer" })</span>
    </div>
</div>

通过使用数据容器名称装饰我的验证消息，我可以定位容器div。现在我只需要弄清楚如何拦截验证消息。

解决方法

由于对DOM准备进行不显眼的验证扫描您的文档并为其遇到的每个表单缓存不显眼的验证选项，因此需要在文档扫描发生之前调用$ .validator.setDefaults方法。

// setup defaults for $.validator outside domReady handler
$.validator.setDefaults({
    highlight: function (element) {
        $(element).closest(".clearfix").addClass("error");
    },unhighlight: function (element) {
        $(element).closest(".clearfix").removeClass("error");
    }
});

$(document).ready(function() {
       // do other stuff
});

（编辑：安卓应用网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!