I have applied Materialize CSS but still not showing icons - css

I have applied Materialize CSS in my ASP.NET Project but still not showing icons..
Its just showing Icon name instead of Real Icon
And I Use 2 Asp Radio Buttons and bind with Materialized CSS ..
But now non of them are select-able
Can anyone help me
Thank you ....
Radio Button Code :
<div>
<asp:Label ID="lblMale" runat="server" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="MALE">
<asp:RadioButton ID="MALE" runat="server" CssClass="mdl-radio__button" Text="MALE" GroupName="G"/><span class = "mdl-radio__label">MALE</span></asp:Label>
<asp:Label ID="lblFemale" runat="server" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="FEMALE">
<asp:RadioButton ID="FEMALE" runat="server" CssClass="mdl-radio__button" GroupName="G" Text="FEMALE" /><span class = "mdl-radio__label">FEMALE</span></asp:Label></div>
Icon Code :
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">face</i>
</span>
<div class="form-group label-floating">
<label class="control-label">First Name <small>(required)</small></label>
<asp:TextBox ID="txtFirst_Name" runat="server" CssClass="form-control
</asp:TextBox>
</div>
</div>
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">record_voice_over</i>
</span>
<div class="form-group label-floating">
<label class="control-label">Last Name <small>(required)</small></label>
<asp:TextBox ID="txtLast_Name" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div>
<asp:Label ID="lblMale" runat="server" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="MALE">
<asp:RadioButton ID="MALE" runat="server" CssClass="mdl-radio__button" Text="MALE" GroupName="G"/>
<span class = "mdl-radio__label">MALE</span>
</asp:Label>
<asp:Label ID="lblFemale" runat="server" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="FEMALE">
<asp:RadioButton ID="FEMALE" runat="server" CssClass="mdl-radio__button" GroupName="G" Text="FEMALE" />
<span class = "mdl-radio__label">FEMALE</span>
</asp:Label>
</div>
</div>

Make sure you're loading the Material Icons font
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i>

Related

Repeat set of Codes again and again when a button is clicked

I'm learning to develop a webform. I want to run set of codes again when button is clicked. Can anyone please help me. asp IDs should also be changed for new items. As an example ID="itemCode1" should changed to itemCode2 in the second instance in 3rd itemcode 3 and so on. It is better if the button is moved to last row after clicking
<div class="form-group col-md-2">
<label>Item Code</label>
<div class="form-group">
<asp:TextBox Cssclass="form-control" ID="Itemcode1" runat="server" placeholder="Enter Item Code" ></asp:TextBox>
</div>
</div>
<div class="form-group col-md-2">
<label>Item Name</label>
<div class="form-group">
<asp:TextBox Cssclass="form-control" ID="ItemName" runat="server" placeholder="Enter Item Name" ></asp:TextBox>
</div>
</div>
<div class="form-group col-md-2">
<label>Select The Range</label>
<asp:CheckBoxList ID="CheckBoxList1" TabIndex="2" CssClass="rangecheckbox" RepeatDirection="Vertical" runat="server">
<asp:ListItem Text="Casabalanca (X05)" Value="Casabalanca (X05)"></asp:ListItem>
<asp:ListItem Text="Monaco (X07)" Value="Monaco (X07)"></asp:ListItem>
<asp:ListItem Text="Akoya" Value="Akoya"></asp:ListItem>
<asp:ListItem Text="Scintilla" Value="Scintilla"></asp:ListItem>
<asp:ListItem Text="Enigma" Value="Enigma"></asp:ListItem>
<asp:ListItem Text="BigRocker" Value="BigRocker"></asp:ListItem>
</asp:CheckBoxList>
</div>
<div class="form-group col-md-1">
<label>No Of Cavities</label>
<div class="form-group">
<asp:TextBox Cssclass="form-control" ID="NoOfCavities" runat="server" placeholder="Enter No of Cavities" ></asp:TextBox>
</div>
</div>
<div class="form-group col-md-2">
<label>Add the photo</label>
<div class="form-group">
<asp:FileUpload Cssclass="form-control" ID="ItemPhoto" type="submit" runat="server" text="Upload Photo" ></asp:FileUpload>
</div>
</div>
<div class="form-group col-md-1">
<label>Material</label>
<div class="form-group">
<asp:DropDownList ID="DropDownList1" Cssclass="form-control" runat="server">
<asp:ListItem text="Select" value="Select" />
<asp:ListItem text="PC" value="PC" />
<asp:ListItem text="Nylon6" value="Nylon6" />
<asp:ListItem text="HIPS" value="HIPS" />
<asp:ListItem text="PBT" value="PBT" />
<asp:ListItem text="ABS" value="ABS" />
<asp:ListItem text="Nylon Fiberfilled" value="Nylon Fiberfilled" />
</asp:DropDownList>
</div>
</div>
<div class="form-group col-md-1">
<asp:Button class="btn btn-primary btn-block" ID="AddAnotherItem" runat="server" Text="AddAnother" />
</div>
</div>
</div>

How to show textbox label name on Validation Summary

Here's an input example with some validators
Validation Summary
<asp:ValidationSummary runat="server"
ID="ValidationSummary1"
DisplayMode="BulletList"
ValidationGroup="vgInformacaoInicial"
CssClass="alert validation-summary"
ShowSummary="true" />
<div class="form-group col-8 mx-auto text-center">
<asp:Label ID="lblCliente" runat="server" AssociatedControlID="txtCliente" Text="Cliente" />
<small><i class="fas fa-asterisk text-danger mb-2" style="font-size: 7px;"></i></small>
<asp:TextBox ID="txtCliente" runat="server" CssClass="form-control form-control-sm rounded border border-dark" placeholder="Cliente" />
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
<asp:RequiredFieldValidator ID="rfvCliente" runat="server"
CssClass="server-validator"
ValidationGroup="vgInformacaoInicial"
SetFocusOnError="True"
ControlToValidate="txtCliente"
ErrorMessage="<b>Client:</b> Required Field."
Display="None">
</asp:RequiredFieldValidator>
</div>
Here is the problem, I want to show required field under every textbox and also on the Validation summary. This already does. Thing is, it's a mess and says Required field many times without any identification so I added the name in the required field error message but it becomes too long when it's under the textbox.
So short and simple... Is there a way i can show the label name referred by the validator on validation summary without having to write on error message and set display to none?
You will need to set ErrorMessage property of each validator to just the corresponding label name, and also set the HeaderText property of validation summary control to something like "Please input following fields:".
The same code snippet that you posted is modified with these changes as below.
<asp:ValidationSummary runat="server"
ID="ValidationSummary1"
DisplayMode="BulletList"
ValidationGroup="vgInformacaoInicial"
CssClass="alert validation-summary"
HeaderText="Please input following fields:"
ShowSummary="true" />
<div class="form-group col-8 mx-auto text-center">
<asp:Label ID="lblCliente" runat="server" AssociatedControlID="txtCliente" Text="Cliente" />
<small><i class="fas fa-asterisk text-danger mb-2" style="font-size: 7px;"></i></small>
<asp:TextBox ID="txtCliente" runat="server" CssClass="form-control form-control-sm rounded border border-dark" placeholder="Cliente" />
<div class="valid-feedback feedback-icon">
<i class="fa fa-check"></i>
</div>
<div class="invalid-feedback feedback-icon">
<i class="fa fa-times"></i>
</div>
<asp:RequiredFieldValidator ID="rfvCliente" runat="server"
CssClass="server-validator"
ValidationGroup="vgInformacaoInicial"
SetFocusOnError="True"
ControlToValidate="txtCliente"
ErrorMessage="Cliente"
Display="None">
</asp:RequiredFieldValidator>
</div>
You will end up with a validation summary that looks like what is shown below.

How to wrap ASP.net validation controls in Bootstrap classes?

I am using Bootstrap 3 with ASP.NET webforms and I am completely new to Bootstrap. The webform I am working on uses ASP.net validation controls. My web form has a standard layout with two columns and I am using "form-group" class to group my labels and input fields.
Now the problem is that as I am placing the label, input field as well as its validator in the Bootstrap "form-group" class, the message in the text property of the validator is being displayed in the next line after validation. I want that to be displayed right next to the input field. Is there any alternative way I can do this?
<div class="form-group">
<asp:Label runat="server" AssociatedControlID="txtBox">Address <span class="required">*</span></asp:Label>
<asp:TextBox id="txtBox" runat="server" CssClass="form-control"/>
<asp:RequiredFieldValidator ID="rfvLine1" ValidationGroup="<%# ValidationGroup %>" ControlToValidate="txtBox" runat="server" Display="Dynamic" ErrorMessage="Line 1 is required." Text="*"/>
</div>
Easiest way is to create validation in separate column.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
.required {
color: #e31937;
font-family: Verdana;
margin: 0 5px;
}
.field-validation-error {
color: #e31937;
font-weight: bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<br />
<div class="container form-horizontal">
<div class="form-group">
<asp:Label runat="server"
AssociatedControlID="txtBox"
CssClass="col-xs-12 col-sm-4 control-label">
Address
<span class="required">*</span>
</asp:Label>
<div class="col-xs-12 col-sm-4 ">
<asp:TextBox ID="txtBox" runat="server"
CssClass="form-control" />
</div>
<div class="col-xs-12 col-sm-4 form-control-static">
<asp:RequiredFieldValidator ID="rfvLine1"
ControlToValidate="txtBox" runat="server"
Display="Dynamic"
CssClass="field-validation-error"
Text="Line 1 is required." />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-sm-offset-4 col-sm-4 ">
<asp:Button runat="server" ID="SubmitButton"
Text="Submit" CssClass="btn btn-primary" />
</div>
</div>
</div>
</form>
</body>
</html>
Do the following: Updated
<div class="container">
<h4 class="form-signin-heading">Info</h4>
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<asp:TextBox runat="server" placeholder="Garage Name" CssClass="form-control username" ID="txtAddress"></asp:TextBox>
</div>
<div class="col-xs-7 col-sm-5">
<span class="help-inline pull-left">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="txtAddress"
ErrorMessage="Address is a required field."
ForeColor="Red" Display="Dynamic">
</asp:RequiredFieldValidator>
</span>
</div>
</div>
<br />
<br />
<div class="form-group">
<div class="col-xs-7 col-sm-7">
<asp:Button ID="Button1" runat="server" Text="Add" CssClass="btn btn-lg btn-primary btn-block" />
</div>
</div>
</div>
I hope, this is what you expected:
By the way, you didn't put the end tag in the RequiredFieldValidator.
#jQuery for check "require" validation for only submit button#
<script type="text/javascript">
(function () {'use strict';
window.addEventListener('load', function () {
var form = document.getElementById('needs-validation');
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false)
{
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
##Submit button HTML##
<asp:Button ID="Button1" runat="server" Text="Submit" class="btn btn-primary" OnClick="Button1_Click" />
##Non Submit button##
<asp:Button ID="btnSearch" runat="server" class="form-control btn-primary " Width="25%" Text="Find" UseSubmitBehavior="false" OnClick="btnSearch_Click" />

How to resolve this error in ASP.NET Web Forms 4.5.2: Invalid postback or callback argument?

I am a new ASP.NET Web Forms developer and I am currently using .NET Framework 4.5.2.I have a simple form that includes two textbox controls and two buttons. I am struggling right now with the button click event. When I click on the button, I got the following error and I don't know why.
I searched on the web and I couldn't find any solution to this. Could you please help me in this regard?
For your information, here's my ASP.NET Code:
<asp:UpdatePanel ID="upAdd" runat="server">
<ContentTemplate>
<div id="post-wrapper" class="row">
<div id="content" class="col-md-12 col-sm-12 col-xs-12">
<div id="login">
<div class="form-wrap">
<div role="form">
<div class="form-group">
<label for="email" class="control-label">Name</label>
<asp:TextBox ID="txtNameNew" runat="server" CssClass="form-control" placeholder="e.g. fire extinguisher"></asp:TextBox>
</div>
<div class="form-group">
<label for="key" class="control-label">Description</label>
<asp:TextBox ID="txtDescNew" runat="server" CssClass="form-control" placeholder="e.g. ........."></asp:TextBox>
</div>
<%--<div class="form-group">
<label for="key" class="control-label">ImagePath</label>
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
</div>--%>
<asp:LinkButton ID="lbtnAdd" runat="server" CssClass="btn btn-primary"
OnClick="lbtnAdd_Click">
<span class="fa fa-plus"></span> Add</asp:LinkButton>
<asp:LinkButton ID="lbtnCancel" runat="server" CssClass="btn btn-default"
OnClick="lbtnCancel_Click">
<span class="fa fa-remove"></span> Cancel</asp:LinkButton>
</div>
<hr>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lbtnAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="lbtnCancel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

how can I use updatepanel for more than 1 control

<div class="step-content">
<div class="step-pane active" id="step1">
<div class="control-group ">
<label class="control-label" for="inputWarning">Please select the Event Name</label>
<div class="controls">
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="EventName" DataValueField="EventId"></asp:DropDownList>
<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:WBENCConnectionString %>' SelectCommand="SELECT [EventId], [EventName] FROM [Event]"></asp:SqlDataSource>
</div>
</div>
</div>
<div class="step-pane" id="step2">
<div class="control-group " >
<asp:Label ID="DateLabel" runat="server"></asp:Label>
<div class="controls">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="Yes" Value="Yes"></asp:ListItem>
<asp:ListItem Text="No" Value="No"></asp:ListItem>
</asp:RadioButtonList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadioButtonList1" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
<div class="step-pane" id="step3">
<div class="control-group ">
<label class="control-label" for="inputWarning">
<span class="muted">You can learn more about the program here</span></label>
<div class="controls">
<label class="radio">
<asp:RadioButton ID="Radio1" runat="server" Text="Yes" value="option1" /></label>
<label class="radio">
<asp:RadioButton ID="Radio2" runat="server" Text="No" value="option2" /></label>
<label class="radio">
<asp:RadioButton ID="Radio3" runat="server" Text="Uncertain" value="option2" /></label>
</div>
</div>
</div>
<div class="step-pane" id="step4">
<div class="control-group">
<label class="control-label" for="selectError30">Which days will you be available to participate in the Matchmaker Sessions?</label>
<div class="controls">
<asp:DropDownList ID="selectError30" runat="server" OnDataBound="selectError30_DataBound">
</asp:DropDownList>
</div>
</div>
<div class="control-group">
<label class="control-label">Upload your capability statement. <a style="color: #67c2ef;" href="#">What's this?</a></label>
<div class="controls">
<asp:FileUpload ID="FileUpload1" runat="server" />
</div>
</div>
</div>
here the DropDownlist1_onselectedIndexChanged event got full page load..
and RadioButtonList1 event also get page load...
here how can I use the Update Panel to overcome the full page load....
In my code all events perform Page_Load....
I want to prevent that loading....
If there is a full page load then since panel is inside the page, it will also get refreshed. You can put the drop down inside another update panel. This will prevent the refreshing of radio button update panel.

Resources