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