Question

我使用asp和bootstrap网格。

假设我的文本框采用col-x-11，所需的字段验证器采用col-x-1（仅包含*），并且显示属性设置为“动态”..

如果此验证器不可见，则其列保持占用状态。如果验证器不可见，我希望文本框也占据此列..但如果验证器可见，则会再次使用它的列。

有办法吗？

Answer 1

一种方法是使用CustomValidator并使用其指定客户端函数的功能来修改文本框的显示方式。

<强>标记

<div class="row">
    <div class="col-xs-12"><asp:TextBox ID="txtName" runat="server" CssClass="form-control" /></div>
    <asp:CustomValidator ID="valName" runat="server" Text="*" Display="Dynamic" CssClass="col-xs-1"
        ClientValidationFunction="valName_ClientValidate"
        OnServerValidate="valName_ServerValidate" />
</div>

<强>的JavaScript

function valName_ClientValidate(sender, args) {
    var $textbox = $('#<%= txtName.ClientID %>');
    if ($textbox.val() != '') {
        args.IsValid = true;
        $textbox.parent().removeClass('col-xs-11').addClass('col-xs-12');
    } else {
        args.IsValid = false;
        $textbox.parent().removeClass('col-xs-12').addClass('col-xs-11');
    }
}

注意：在使用Bootstrap时，可以使用jQuery库。

<强> C＃

protected void valName_ServerValidate(object source, ServerValidateEventArgs args)
{
    args.IsValid = !String.IsNullOrEmpty(txtName.Text);
}

如果内容不可见，请使用额外的bootstrap列？

1 个答案: