Linking bootstrap Code with .aspx.cs file

Question

Can anyone tell me how to link my code written in bootstrap 3.1.1 with the code in my aspx.cs file. What I basically want to do is to to access the different elements(of bootstrap design) in .aspx.cs file using their ID's.

For example, I have this html code:

 <div class="panel panel-success" style="margin-top:100px;margin-left:50px">
        <div class="panel-heading" style="font-size:16px">   To-Do List </div>
        <ol class="list=group" id="list1">
                <li class="list-group-item"> Complete HCI Assignment </li>
                <li class="list-group-item"> Complete BE Assignment </li>
                <li class="list-group-item"> Complete Programming Task </li>
                <li class="list-group-item"> Send Code Correction </li>
        </ol>
        <div class="panel-body">
            <button class="btn btn-default btn-success btn-sm" style="margin-left:65px;
              margin-right:10px" id="b1">
                <span class="glyphicon glyphicon-plus"></span> Add Task
            </button>
            <button class="btn btn-default btn-success btn-sm" id="b2"> 
             <span class="glyphicon glyphicon-remove"></span> Remove Task
            </button>
       </div>
    </div> 

I want to display data from my database (SQL Server) in this panel. How do I do this?

Answer 1

In order for you access the HTML controls in the code behind file, you need to use ASP.NET server controls. To retrofit an existing web page you need to enclose all server controls with a form tag with a runat="server" attribute. You can then add server controls anywhere inside the form, such as the label with the ID "ServerControl" shown below. Be aware that only one form with runat="server" attribute can exist on a web page.

<form runat="server">
<div class="panel panel-success" style="margin-top:100px;margin-left:50px">
    <div class="panel-heading" style="font-size:16px">   To-Do List </div>
    <ol class="list=group" id="list1">
        <% foreach(var task in tasks) { %>
            <li class="list-group-item"> <%=task.name&> </li>
        <% } %>
    </ol>
    <asp:Label runat="server" ID="ServerControl" Text="results" />
    <div class="panel-body">
        <button class="btn btn-default btn-success btn-sm" style="margin-left:65px;
          margin-right:10px" id="b1">
            <span class="glyphicon glyphicon-plus"></span> Add Task
        </button>
        <button class="btn btn-default btn-success btn-sm" id="b2"> 
         <span class="glyphicon glyphicon-remove"></span> Remove Task
        </button>
   </div>
</div>
</form>

http://www.w3schools.com/aspnet/aspnet_controls.asp

You code can perform the SQL queries and update the server controls on the web page. I've added C# markup that will output a list from a collection of 'tasks'. The collection would be populated from SQL during the loading of the web form.