give required field validator to radio buttons - c#

this is my html code in which i have used two radio buttons and i want a required field validator which will force a user to select atleast one radio button .
<div class="form-group">
<label for="enterType" class="col-sm-2 control-label">Select Type
</label>
<div class="col-sm-10">
<asp:RadioButton ID="rbEncryption" runat="server"
GroupName="grpEncryption" Text="Encryption (e.g. welcome!, Enter
plain text)" />
</div>
<label for="enterType" class="col-sm-2 control-label" >
</label>
<div class="col-sm-10">
<asp:RadioButton ID="rbDecryption" runat="server"
GroupName="grpEncryption" Text="Decryption (e.g. welcome!, Enter
Encrypted text)" />
</div>
</div>

Related

Update Panel removes the CssClass after postback?

Well, This seems weird because I have been using update panel since then, then guess what, it removes the all the CssClass of the objects inside it after the postback.
I used the update panel to add items on my ListBox and the listbox returns to its original form. I meant in the return to the original form that it is like a listbox without the CSS.
But when I check the element on the web browser, the class of the object still there but it does not really reflect on the UI.
so this is my code:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<!--RECEIVER INFORMATION-->
<div class="pd-20">
<h4 class="text-green h4">Receiver Details</h4>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Vendor Name</label>
<asp:DropDownList runat="server" ClientIDMode="Static"
CssClass="custom-select2 form-control" ID="cmbVendor">
</asp:DropDownList>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Currency</label>
<div class="input-group custom">
<asp:TextBox runat="server" ID="txtCurrency" Placeholder="Currency"
CssClass="form-control form-control-lg text-uppercase"></asp:TextBox>
<div class="input-group-append custom">
<span class="input-group-text"><i class="icon-copy fi-dollar"></i></span>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<label>Amount</label>
<div class="input-group custom">
<asp:TextBox runat="server" ID="txtAmount" Placeholder="Amount" TextMode="Number" AutoPostBack="true"
CssClass="form-control form-control-lg" OnTextChanged="txtAmount_TextChanged"></asp:TextBox>
<div class="input-group-append custom">
<span class="input-group-text"><i class="icon-copy fi-dollar-bill"></i></span>
</div>
</div>
</div>
</div>
</div>
<!--RECEIVER INFORMATION-->
<!--APPROVER DETAILS-->
<div class="pd-20">
<h4 class="text-green h4">Approver Details</h4>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Approvers</label>
<asp:ListBox runat="server" ID="lbApprovers" SelectionMode="Multiple" ClientIDMode="Static"
CssClass="custom-select2 form-control text-uppercase" multiple="multiple"></asp:ListBox>
</div>
</div>
</div>
</div>
<!--APPROVER DETAILS-->
</ContentTemplate>
</asp:UpdatePanel>
I can't really explain what was happening so I'm going to attach the photo of the problem after postback.
Here is the before postback
And here is the after postback
Can someone tell me what I am doing wrong and What should I do to make this right?
The ListBox using Custom-select2 components which initialize by js on page load. When postback using UpdatePanel, all contents inside UpdatePanel will be replaced but page load event will not trigger again as this is ajax call. Thus, the custom-select2 initialize script does not trigger.
For page with UpdatePanel, you can call initialize script in pageLoad method, which will be triggered on each postback by UpdatePanel.
<script>
function pageLoad(sender, args) {
console.log("page load event occur");
}
</script>

How to insert HTML radio button value to SQL through ASP.NET

Please, I'm stuck trying to send my radio button user choice to the aspx.cs file and sent it to SQL, so here's the code:
<div class="form-group">
<label class="control-label col-sm-3">Status</label>
<div class="col-sm-6">
<div class="row" id="row" runat="server">
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" id="nsent" value="nsent" name="status" runat="server" checked="true">Not Sent
</label>
</div>
<div class="col-sm-4">
<label class="radio-inline">
<input type="radio" id="sent" value="sent" name="status" runat="server">Sent
</label>
</div>
</div>
</div>
So after I click Submit, there's a code to send it to SQL, but I don't have any idea how I would send the value selected in the HTML.
Selected Item or Selected Value won't work, even InnerText.
for a radio button, and in WEBFORMS, you would look at both control's CHECK state
if (sent.Checked) == true {...}
if (nsent.Checked == true) {...}
Alternatively you could review the FORMS collection that was submitted with the Page.Request (if this is a POSTBACK).
if (page.request.forms["status"] == "sent") {
...
} elseif (page.request.forms["status"] =="nsent" {
...
}
A third option, which seems to be outside the scope of your question is to read the radio buttons on the client side, and submit the value to the server via some AJAX style submission.
You should use <asp:Checkbox> (ASP.NET WebForms) or #Html.CheckBoxFor() (ASP.NET MVC).

ASP.Net Tag Helpers - Show Label with Actual Attribute Value?

How can I display the value of an attribute in a label using tag helpers? I want to display created timestamp, but when I use the below code it just displays "Created" twice instead of "Created" and the actual timestamp.
<div class="form-group">
<label asp-for="Created" class="col-md-2 control-label"></label>
<div class="col-md-10">
<label asp-for="Created" class="form-control"></label>
</div>
</div>
Result:
Created Created
Desired Result:
Created 04/13/2017 12:00:00
You could probably just dump it, assuming you are using razor:
<div class="form-group">
<label asp-for="Created" class="col-md-2 control-label"></label>
#Created
</div>
If this needs to be placed within a form with the value posted back, you'll need an input (or use #Charlie's answer and an extra hidden input for your Created property):
<div class="form-group">
<label asp-for="Created" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Created" class="form-control my-label-class" type="datetime" />
</div>
</div>
Refer to this stackoverflow to create the css.

Login Boostrap Modal on MasterPage

I have a Login & Register Boostrap Modal on my MasterPage.
The code is simple and works. The problem comes when user make an invalid use.
I have all validations on code behind, when user hit Login i need if its invalid, a Label show the error and popup keep alive. My Popup close everytime user hit Login, its ok or not. I tested some similar scenary in Content Pages, with registerstartupclient to call a function ShowModal, that reopen the modal. But i cant do that on MasterPage. So how can i validate input data and show a label without close the popup.
Im running Modal on Form Tag from Body because MasterPages dont allow more than one.
My Project is ASP.Net C# WebForms.
<div id="logmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal contenido-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-user-circle"> </i> Login</h4>
</div>
<div class="modal-body">
<%--<form id="Conectar">--%>
<div class="form-group">
<input type="text" id="txtUsuario" class="form-control" runat="server" placeholder="Usuario Web"/>
</div>
<div class="form-group">
<input type="password" id="txtPassword" class="form-control" runat="server" placeholder="Password"/>
</div>
<div class="form-group">
 <asp:Button ID="Button1" runat="server" Text="LOGIN" CssClass="btn btn-default" OnClick="Button1_Click" />
</div>
<%--</form>--%>
<asp:Label ID="LblErrors" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >Cerrar</button>
</div>
</div>
</div>
</div>

ListBox selections not getting updated on postback Asp.net

In my application I have a ListView that shows data with a few different columns. I want to give user flexibility to choose columns they want to see in the ListView. So in my page, I have added following
<div class="ibox-content">
<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-sm-12 b-r">
<h3 class="m-t-none m-b">Choose Columns</h3>
<p>Move columns from Available to Selected List box to show in the list below</p>
<div class="form-group col-md-4">
<label class="control-label-custom" for="lblAvailableColumns">Available Columns</label>
<asp:ListBox class="form-control" Style="height: 150px;" ClientIDMode="Static" ID="lbAvailableColumns" runat="server" placeholder="AvailableColumns" SelectionMode="Multiple"></asp:ListBox>
</div>
<div style="margin-left: 20px; margin-right: 10px; margin-top: 45px; margin-bottom: 5px" class="form-group col-md-1">
<input type="button" class="btn btn-default" id="left" value="<" />
<input type="button" class="btn btn-default" style="margin-top: 10px;" id="right" value=">" />
</div>
<div class="form-group col-md-4">
<label class="control-label-custom" for="lblSelectedColumns">Selected Columns</label>
<asp:ListBox class="form-control" Style="height: 150px;" ID="lbSelectedColumns" runat="server" placeholder="SelectedColumns" SelectionMode="Multiple"></asp:ListBox>
</div>
<div style="text-align: left;" class="form-group col-md-8">
<asp:LinkButton ID="lnkBtnApplyChooseColumns" TabIndex="4" runat="server" CausesValidation="false" class="btn btn-success" OnClick="lnkBtnApplyChooseColumns_Click">
<i class="glyphicon glyphicon-ok icon-white"></i> Apply </asp:LinkButton>
</div>
</div>
</div>
</div>
</div>
</div>
And this is launched like this
<a data-toggle="modal" class="btn btn-primary" href="../#modal-form"><i class="glyphicon glyphicon-th"></i>Choose Columns</a>
It looks like this while running
Though when Apply button is pressed, I dont see updated selections in lbSelectedColumns list box in the codebehind file. What im doing wrong here?
P.S: I think since I am showing this choose columns as a modal dialog using href, that is what is causing the issue. Any solution to this??

Categories