Menu
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.
580
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
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
