Develop Reference

Assistance with styling a dynamic asp:CheckBoxList using Bootstrap

I have an asp:CheckBoxList that is being populated with values from a DB. I'm using Bootstrap 4.3.1 as my framework. I'm trying to style my CheckBoxList using the default example:
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
This is my code for my CheckBoxList:
<asp:CheckBoxList ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>
This is what I've tried, however the CheckBoxList disappears:
<div class=" custom-control custom-checkbox my-1 mr-sm-2">
<asp:CheckBoxList type="checkbox" CssClass="custom-control-input" ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>
</div>
If someone could kindly offer some input or advice on how I can achieve this, that would be excellent.

The bootstrap classes won't work directly on the CheckBoxList control.
When I've needed to do this I created my own classes and applied them to a div element surrounding the CheckBoxList.
I also wrap in a fieldset for accessibility compliance.
CSS additions:
.checkbox.checkboxlist input[type="checkbox"]
{
position: absolute;
margin-top: 0.3rem;
margin-left: -1.25rem;
}
.checkbox.checkboxlist label
{
margin-bottom: 0;
display: inline-block;
}
fieldset legend
{
font-size: inherit;
}
fieldset .checkbox
{
position: relative;
display: block;
padding-left: 1.25rem;
}
Markup:
<fieldset>
<legend>Label for CheckBoxList</legend>
<div class="checkbox checkboxlist">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
<asp:ListItem Text="Option one"></asp:ListItem>
<asp:ListItem Text="Option two"></asp:ListItem>
<asp:ListItem Text="Option three"></asp:ListItem>
</asp:CheckBoxList>
</div>
</fieldset>
I've also got some classes for RadioButtonLists and horizontal forms on my blog which is where I copied much of this answer from.

Login and register button both validate user input

I am working on login and register form, both of the forms are doing their work perfectly. But I have a problem, whenever I click on register form it's check user input. It should not do that just simply redirect to registration form but it's not.
<form class="login-form" runat="server">
<div class="form-group">
<label class="sr-only" for="form-username">Username</label>
<asp:TextBox ID="UserName" placeholder="Username..." class="form-control" runat="server" required=""></asp:TextBox>
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<asp:TextBox ID="Password" placeholder="Password..." type="password" class="form-control" runat="server" required=""></asp:TextBox>
</div>
<asp:Button ID="BtnLogin" type="submit" class="btn" runat="server" Text="Login" OnClick="BtnLogin_Click" />
<asp:Button ID="BtnRegister" class="btn" CausesValidation="false" runat="server" Text="Register" OnClick="BtnRegister_Click" />
</form>
What's causing the problem here any idea???

Your register button is submitting the form, as all ASP buttons do, and the required attribute of your inputs is going to validate on a form submit. CausesValidation won't do anything because it's an ASP.Net property (and to be used with ASP.Net validators), whereas the required attribute validation is an HTML5 client-side event.
Try putting the formnovalidate attribute on your Register button:
<asp:Button ID="BtnRegister" class="btn" CausesValidation="false" runat="server" Text="Register" OnClick="BtnRegister_Click" formnovalidate />
W3 Reference:
The novalidate and formnovalidate content attributes are boolean attributes. If present, they indicate that the form is not to be validated during submission.
OR...
If your register button is a simple redirect, it does not need to be a server-side control. Just make it a link and style it like a button:
a.register-btn {
display: inline-block;
background-color: red;
color: white;
text-decoration: none;
border-radius: 3px;
padding: 6px;
font-family: 'Arial';
font-weight: bold;
}
Register

Read text from textarea/textbox in HTML into C# codebehind. (ASP.NET)

I'm trying to use code behind to read text from HTML provided to me. After researching this topic I found that almost all instances of this involve Web Forms controls(asp:) for the textboxes but the HTML I was given does not, but instead is:
<p>
<label>Address</label>
<textarea class="w3-input w3-border" name="addr" cols="30" rows="4"></textarea>
</p>
<div class="w3-half w3-container">
<p>
<label>Phone:</label>
<input type="text" class="w3-input"/>
</div>
<div class="w3-half w3-container">
<label style="padding-left:10px;">Email:</label>
<input type="text" class="w3-input"/>
</div>
</p>
Will I still be able to read the user-provided text from these boxes or will I need to alter the HTML?
A couple of my unsuccessful code-behind attempts to extract the address supplied:
string address = ((textarea)Address.FindControl("addr")).Text;
string address = ((TextBox)Address.FindControl("addr")).Text;
Update:
Using the server control described in a solution offered, I get an error message stating that "A page can have only one server-side Form tag."
This results from the following markup:
<form runat="server">
<asp:textbox id="addr" runat="server" textmode="multiline" />
</form>
followed later by:
<form runat="server">
<asp:Button ID="Ship" runat="server" Text="Ship" OnClick="Ship_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
<asp:Button ID="Rate" runat="server" Text="Rate" OnClick="Rate_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
</form>
The textarea is located in a different section than the buttons and I'm unclear on how to make both functional either without a form tag or without having them share the same one. Thanks

You need to use a server control if you're looking to access the value in code behind. Use an ASP TextBox and set the TextMode to MultiLine:
<asp:TextBox ID="textarea1" runat="server" TextMode="MultiLine" />
Then in code behind:
string addr = textarea1.Text;
UPDATE to demonstrate multiple forms on the same page:
<form ID="form1" runat="server">
<asp:Button ID="Ship" runat="server" Text="Ship" OnClick="Ship_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
<asp:Button ID="Rate" runat="server" Text="Rate" OnClick="Rate_Click" style="padding: 10px; margin-bottom: 10px;" class="w3-round w3-blue" />
</form>
<form id="form2" action="WebForm1.aspx" method="post">
<asp:TextBox ID="textarea1" runat="server" TextMode="MultiLine" />
</form>
From here, you can use either method of retrieving the textarea1 value in code behind for posts from form1 or form2...
form1:
string addr = textarea1.Text;
form2:
string addr = Request["textarea1"].ToString();

Add runat="server" to your TEXTAREA and INPUT tags. Then you can access them from code-behind. You also need to assign the ID attribute of each one.
<p>
<label>Address</label>
<textarea class="w3-input w3-border" name="addr" id="textarea1" runat="server" cols="30" rows="4"></textarea>
</p>
<div class="w3-half w3-container">
<p>
<label>Phone:</label>
<input type="text" class="w3-input" runat="server" id="input1" />
</div>
<div class="w3-half w3-container">
<label style="padding-left:10px;">Email:</label>
<input type="text" class="w3-input" runat="server" id="input2" />
</div>
</p>

popup control linkbutton prevent postback

I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>

You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"

I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.

DropShadowExtender and RoundedCornersExtender not playing nicely with ModalPopupExtender

I have the following panel
<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
<div style="position:absolute; top:0; right: 0;">
<asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
</div>
<div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
<asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
<asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
<span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="padding-left: 20px; padding-top: 15px;">
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
</div>
<div style="float: left;">
<asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png" OnClick="btnMessage_click"/>
</div>
</div>
</asp:Panel>
Because this information is going to be bound server side depending on which control in a datalist is selected I have:
<cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController"
CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>
I then call mpeActiveSession.Show() in the code-behind after I bind the data.
OK, I had a drop shadow specified in the control but that is where the story begins. I finish this guy up and it is working beautifully, and the damn customer complains that the pop-ups don't look suave enough. What they really meant was that the pop-ups don't look enough like Mac Windows. Anyways, they requested rounded corners and for the drop shadow to be less opaque and rounded. So, I say ok, hopefully I can just add the following.
<cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
<cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>
Now it doesn't render correctly. One of the divs gets the rounded corner, the position on the page is wrong, and all of the controls and text are missing. Any ideas? I am also open to a better approach to styling the popup.

Ok the RoundedCornersExtender and the DropShadowExtender are obsolesced by CSS3. All you need is border-radius and box-shadow.
Anyhow, the problem with the extenders was that my parent div used relative positioning. It doesn't matter now however, because the CSS3 stuff looks much better and is easier to implement anyways.