I have been working in ASP.NET web applications (not MVC) for a while at work. I really would like to use twitter bootstrap framework. I think it looks great, and I have a lot of work that has already taken care of you. I cannot get it to work with ASP controls. I know that css is probably trying to change the asp: Button tag to an HTML tag. I just don’t know how to make them work together. I get the following error.
Warning 2 // file location: ASP.NET runtime error: the base class includes the "btnTest" field, but its type (System.Web.UI.HtmlControls.HtmlButton) is incompatible with the type of control (System.Web.UI.WebControls. Button) .// File Location 21 1 FalconFutbolClub
When rendering a site for debugging, I get the following error:
Control 'mainContentHolder_btnTest' of type 'Button' should be placed inside the form tag using runat = server.
I think it would be very unpleasant to try to manage postbacks using javascript. I would just like to use regular ASP server-side controls, which is why the whole reason for using ASP.NET web applications. Please, help.
EDIT: Code. Here is the main page and my default value.
Asp master:
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="FalconFutbolClub.SiteMaster" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Falcon Futbol</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="What in your toybox?"> <meta name="author" content="Pure Parties"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css"> <link rel="shortcut icon" href="images/favicon.ico"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <style> body { padding-top: 85px; } </style> <asp:ContentPlaceHolder ID="headerContentHolder" runat="server" /> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Falcon Futbol</a> <div class="nav-collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </div> </div> </div> <div class="container"> <div class="row"> <div span="12"> <asp:ContentPlaceHolder ID="mainContentHolder" runat="server" /> </div> </div> </div> <script src="assets/js/jquery.js"></script> <script src="assets/js/bootstrap-transition.js"></script> <script src="assets/js/bootstrap-alert.js"></script> <script src="assets/js/bootstrap-modal.js"></script> <script src="assets/js/bootstrap-dropdown.js"></script> <script src="assets/js/bootstrap-scrollspy.js"></script> <script src="assets/js/bootstrap-tab.js"></script> <script src="assets/js/bootstrap-tooltip.js"></script> <script src="assets/js/bootstrap-popover.js"></script> <script src="assets/js/bootstrap-button.js"></script> <script src="assets/js/bootstrap-collapse.js"></script> <script src="assets/js/bootstrap-carousel.js"></script> <script src="assets/js/bootstrap-typeahead.js"></script> <script type="text/javascript"> $('.carousel').carousel({ interval: 2000 }) </script> </body> </html>
C # master
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace FalconFutbolClub { public partial class SiteMaster : System.Web.UI.MasterPage { protected void Page_Load(object sender, EventArgs e) { } } }
Default aspx:
<asp:Content ID="content1" ContentPlaceHolderID="headerContentHolder" runat="server"> <script type="text/javascript"> </script> </asp:Content> <asp:Content ID="content2" ContentPlaceHolderID="mainContentHolder" runat="server"> <div class="container"> <header class="jumbotron subhead" id="overview"> <h1>Falcon Futbol</h1> <p>Event registration forms can be filled out here.</p> <asp:Label ID="clickedTest" runat="server" /> </header> <div class="span12"> <blockquote> <p>Event registration form 1.</p> <small>March 17, 2012</small> </blockquote> <div class="span4"> <asp:Button id="btnTest" runat="server" onclick="btnForm1_Click" Text="test" /> </div> </div> </div> </asp:Content>
By default C #:
using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Xml.Linq; using System.IO; namespace FalconFutbolClub { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnForm1_Click(object sender, EventArgs e) { clickedTest.Text = "Clicked!"; } } }