Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Basic asp.net form with twitter bootstrap components

Do you guys have an example of bootstrap componentes working on a basic asp.net form (with code behind on buttons, getting dropdown selected values and etc)?

I really don't know how to make it work.

like image 869
Leandro Faria Avatar asked Apr 17 '12 18:04

Leandro Faria


1 Answers

As long as you have an understanding of how ASP.NET server controls render in HTML

example:

This server control:

<asp:Button ID="Button1" runat="server" CssClass="btn" Text="Button 1" />

Renders to this HTML:

<input type="submit" class="btn" id="Button1" value="Button 1" name="Button1">

then you're on your way to using bootstrap with ASP.NET webforms

The CssClass="btn" is all you need to style the button with bootstrap.

Paste the markup below in your .ASPX page to see an example

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="Button1" runat="server" CssClass="btn" Text="Button 1" />
    </div>
    </form>
</body>
</html>

edit:

You can turn any standard HTML control into a server control by adding runat="server" and then add click event handlers server side.

HTML:

<a id="actionLink" runat="server">Action</a>

Code-Behind:

protected void Page_Load(object sender, EventArgs e)
{
    actionLink.ServerClick += new EventHandler(actionLink_ServerClick);
    ...
}

void actionLink_ServerClick(object sender, EventArgs e)
{
    ...
}

Rendered Anchor Tag:

<a id="actionLink" href="javascript:__doPostBack('actionLink','')">Action</a>

This should get you what you need to implement server clicks on those button dropdown and radio bootstrap controls.

like image 156
MikeM Avatar answered Nov 04 '22 04:11

MikeM