Skip to main content
 首页 » 编程设计

jquery之ASP.Net 4.5 Twitter Bootstrap 和客户端验证

2026年07月28日10telwanggs

我在这里使用 Web 表单解决方案中的新 ASP.Net 4.5 进行了相当简单的设置。我已经使用 Twitter Bootstrap 近一年了,非常享受它为我节省的时间以及它带来的一致性。他们的一些 javascript 方法也非常有用。然而,我在合并一些似乎需要在 4.5 中完成的“新方式”的事情时遇到了问题。这是我的母版页:

<body> 
    <form id="frmMain" runat="server"> 
        <asp:ScriptManager ID="smManager" runat="server"> 
            <Scripts> 
                <asp:ScriptReference Name="jquery" /> 
                <asp:ScriptReference Name="bootstrap" /> 
            </Scripts> 
        </asp:ScriptManager> 
... 

这是测试页面的内容:

<asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="server"> 
    <asp:TextBox ID="txtTest" runat="server"></asp:TextBox> 
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Problem" ControlToValidate="txtTest" CssClass="error" SetFocusOnError="True" ToolTip="Problem">*</asp:RequiredFieldValidator> 
    <asp:Button ID="btnTest" runat="server" Text="Check" CausesValidation="true" OnClick="btnTest_Click" /><br /> 
    <asp:TextBox ID="txtAnother" runat="server"></asp:TextBox> 
    <asp:Button ID="btnOk" runat="server" CausesValidation="false" Text="No Check" /> 
</asp:Content> 

这是我的 Global.asax.cs 文件,用于显示上面提到的 ScriptReferences:

protected void Application_Start(object sender, EventArgs e) { 
    GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore; 
 
    ScriptManager.ScriptResourceMapping.AddDefinition( 
        "jquery", 
        new ScriptResourceDefinition { 
            Path = "~/Scripts/jquery-1.8.2.min.js", 
            DebugPath = "~/Scripts/jquery-1.8.2.js", 
            CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js", 
            CdnDebugPath = "http://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.js", 
            LoadSuccessExpression = "window.jQuery" 
        } 
    ); // Load jQuery 
 
    ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.WebForms; 
 
    ScriptManager.ScriptResourceMapping.AddDefinition( 
        "bootstrap", 
        new ScriptResourceDefinition { 
            Path = "~/Scripts/bootstrap.min.js", 
            DebugPath = "~/Scripts/bootstrap.js" 
        } 
    ); // Load Bootstrap 

客户端检查第一个文本框不会触发。如果我单击“检查”按钮,它会进行往返并且代码隐藏的 Page.IsValid == false。这很好,但我不想在页面无效时发回。

我创建了另一个测试页,它没有使用我的母版页,但其中包含相同的代码,如下所示:

<form id="form1" runat="server"> 
    <div> 
        <asp:TextBox ID="txtTest" runat="server"></asp:TextBox> 
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Problem" ControlToValidate="txtTest" CssClass="error" SetFocusOnError="True" ToolTip="Problem">*</asp:RequiredFieldValidator> 
        <asp:Button ID="btnTest" runat="server" Text="Check" OnClick="btnTest_Click" /><br /> 
        <asp:TextBox ID="txtAnother" runat="server"></asp:TextBox> 
        <asp:Button ID="btnOk" runat="server" CausesValidation="false" OnClick="btnOk_Click" Text="No Check" /> 
    </div> 
</form> 

此页面抛出客户端,从而按照我的意愿停止回发。

在我看来,bootstrap.js 可能会拖拽或中断标准 js 验证。有什么建议我仍然可以使用 Bootstrap 吗?我需要 bootstrap.js 文件,因为它处理下拉菜单。我至少可以使用 jQuery 的 UI 作为模式,但这对下拉菜单没有帮助。

我想使用新技术,但我们总是有这些学习曲线。

请您参考如下方法:

您可以在这里选择您真正需要的插件:http://twitter.github.com/bootstrap/customize.html#plugins 我认为 bootstrap.js 包含一体化的组合解决方案。因此,您可以尝试仅使用您需要的内容,看看是否有帮助