<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="form-row">
<div class="form-group col-md-2">
<label for="inputName">Name</label>
<asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" />
</div>
<div class="form-group col-md-2">
<label for="InputRole">Role</label>
<asp:DropDownList CssClass="form-control" ID="ddlRole" runat="server">
<asp:ListItem Value="0" Text="Select" />
<asp:ListItem Value="1" Text="Admin" />
<asp:ListItem Value="2" Text="Vice-Admin" />
<asp:ListItem Value="3" Text="Member" />
</asp:DropDownList>
</div>
</div>
<br />
<asp:Button Text="Submit" CssClass="btn btn-success" runat="server" OnClick="OnSubmit" />
<br />
<asp:Repeater ID="rptUserinfo" runat="server">
<HeaderTemplate>
<table id="dataTablesExample" class="table">
<tr>
<th scope="col" style="width: 80px">Id
</th>
<th scope="col" style="width: 120px">Name
</th>
<th scope="col" style="width: 100px">Role
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><span><%# Eval("userid")%></span> </td>
<td><span><%# Eval("name")%></span></span> </td>
<td><span><%# Eval("role")%></span></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>