简体   繁体   English

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

[英]ASP.Net 4.5 Twitter Bootstrap and Client Side Validation

I have a rather simple setup here using the new ASP.Net 4.5 in a Web Forms solution. 我在Web Forms解决方案中使用新的ASP.Net 4.5进行了相当简单的设置。 I have been using Twitter Bootstrap for nearly a year and really enjoy the time it saves me and the consistency it brings to the table. 我已经使用Twitter Bootstrap将近一年了,真正享受它节省我的时间和它带来的一致性。 Some of their javascript methods are quite useful as well. 他们的一些JavaScript方法也非常有用。 However, I am having a problem incorporating some of the "new way" things seem to need to be done in 4.5. 但是,我遇到了一个问题,其中包含了一些似乎需要在4.5中完成的“新方法”。 Here is my Master Page: 这是我的母版页:

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

And here is the content of a test page: 以下是测试页面的内容:

<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>

Here is my Global.asax.cs file to show the ScriptReferences noted above: 这是我的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

The client side checking on the first text box is not firing. 检查第一个文本框的客户端未触发。 If I click the 'Check' button it does a round-trip and the code-behind's Page.IsValid == false. 如果我单击“检查”按钮,它会进行往返,而代码隐藏的Page.IsValid == false。 That is good, but I do not want to post back when the page is not valid. 这很好,但我不想在页面无效时回发。

I created another test page that did not use my Master page but had the same code in it as follows: 我创建了另一个测试页面,该页面没有使用我的母版页,但其中的代码相同,如下所示:

<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>

This page throws the client side and thus stops the post back as I want it to. 此页面抛出客户端,从而按照我的意愿停止回发。

It seems to me that the bootstrap.js may be haulting or interrupting the standard js validation. 在我看来,bootstrap.js可能会招致或中断标准的js验证。 Any suggestions where I can still use bootstrap? 我仍然可以使用bootstrap的任何建议? I need the bootstrap.js file since it handles the dropdown menus. 我需要bootstrap.js文件,因为它处理下拉菜单。 I could at least use jQuery's UI for the modals but that doesn't help the dropdowns. 我至少可以使用jQuery的UI作为模态,但这对下拉有帮助。

I want to use the new technology but we always have these learning curves. 我想使用新技术,但我们总是有这些学习曲线。

You can select plugins that you really need here: http://twitter.github.com/bootstrap/customize.html#plugins I think bootstrap.js contains all-in-one combined solution. 你可以在这里选择你真正需要的插件: http//twitter.github.com/bootstrap/customize.html#plugins我认为bootstrap.js包含一体化的组合解决方案。 So you might try using only what you need and see if it helps 因此,您可以尝试仅使用您需要的内容,看看它是否有帮助

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM