CODEWITHSUNDEEP
jqueryasp.nettwitter-bootstrapclient-side-validation
Grandizer
Grandizer

Reputation: 3025

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. 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. Some of their javascript methods are quite useful as well. However, I am having a problem incorporating some of the "new way" things seem to need to be done in 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:

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. 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. Any suggestions where I can still use bootstrap? I need the bootstrap.js file since it handles the dropdown menus. I could at least use jQuery's UI for the modals but that doesn't help the dropdowns.

I want to use the new technology but we always have these learning curves.

Upvotes: 5

Views: 3958

Answers (1)

Vytautas Butkus
Vytautas Butkus

Reputation: 5535

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. So you might try using only what you need and see if it helps

Upvotes: 1

Related Questions