I've got a little Problem with my first ASP-Project.
Im offering the user and input-mask to enter data. At some points I want to control if the input is numeric. If not I want to change the border color of my Textbox.
This is my Textbox:
<asp:TextBox ID="tbOnlyNumeric" runat="server" Height="30px" CssClass="MyNumericBox" autocomplete="off"></asp:TextBox>
The style of the box looks like that:
.MyNumericBox
{
width:250px;
overflow: auto;
font-size: 20px;
position:relative;
right:111px;
border-color: #dcdcdc;
padding: 4px;
margin:15px;
border-width: 2px;
border-radius: 10px;
border-style: solid;
transition: box-shadow 0.3s, border 0.3s;
text-align: right;
padding-right: 18px;
outline: none;
}
My idea was to cast the the Text of the textbox in an try-catch-statment:
try
{
if (string.IsNullOrWhiteSpace(tbOnlyNumeric.Text))
{
throw new Exception();
}
else
{
salesExpected = Convert.ToInt32(tbOnlyNumeric.Text.ToString().Replace(".", string.Empty));
}
}
catch (Exception ex)
{
debugLabel.Text = "EX";
correct = false;
tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
}
So if there is something wrong with my textbox it should look like that:
but instead it looks like that:
I already noticed that if watch it in chrome the old css class is deleted but the new one isn't addet.
Any idea why?
Thanks in advance
could you try this code. put this in your catch statement
ScriptManager.RegisterClientStartUpScript(this,this.GetType(),"pop","changeCssStyle();",true);
//in the head section of your aspx file create a script that will change the
//css style of the textbox
<script type="text/javascript">
function changeCssStyle(){
//if you are using a master page refer the id of textbox to the id of
//head content in master page e.g. MainContent_tbOnlyNumeric
//lets assume you already have reference to jquery in your head section
$('#MainContent_tbOnlyNumeric').css("border-color","red");
}
</script>
Finally figured outthat using:
tbSalesExpected.CssClass = "MyExpectedBoxWrong";
instead of:
tbOnlyNumeric.CssClass = tbSalesExpected.CssClass.Replace("MyExpectedBox", "MyExpectedBoxWrong");
fixes the problem.
Thanks for your answers and comments!
Related
Here ddlSchool is the ajax Combo box
<code>
ddlSchool.DataSource = dt;
ddlSchool.DataTextField = "SchoolName";
ddlSchool.DataValueField = "Id";
ddlSchool.DataBind();
ddlSchool.Items.Insert(0, new System.Web.UI.WebControls.ListItem(" --Select-- ", "0"));
ddlSchool.SelectedValue = "0";
</code>
when I inspect it renders the value but not displaying due to the following ,
<code>
<ul id="ContentPlaceHolder1_ddlSchool_ddlSchool_OptionList" class="ajax__combobox_itemlist" style="visibility: hidden; z-index: 1000; overflow-x: hidden; overflow-y: auto; width: 416px; position: absolute; height: 425px; left: 293px; top: 1458px; display: none;"></ul>
</code>
Please help me to get the ListItems
Try removing:
style="visibility: hidden;display: none;
from the style settings
Also, as it is position absolute, it may be displaying somewhere else on the page eg not where you expect to see it
I found the reason why the listbox is not displaying at the exact place. This is because of bootstrap while splitting the columns into 3. The space is not enough to display line items.So it is displaying at some other place.Need to change the bootstrap column settings to overcome this problem.
I am dynamically creating the label and textbox in my C# code and am having issues with css formatting. Since the label and textbox are generated separately adding css to it to float left and add padding has been a challenge. I am new to c# and would appreciate any help.
I tried adding the cssClass to both the text box and label but the formatting is off.
Here is my css:
.form-control{
margin-bottom:10px;
width:300px;
float:left;
}
.form-control-label{
display:block;
float:left;
}
I added the css class in the script side using
label.CssClass = "form-control-label";
textbox.CssClass = "form-control"
Here is the output and expected result
Not sure about the text alignment that you expect for the Labels, but you can try the following style classes:
.form-control
{
float: left;
width: 300px;
}
.form-control-label
{
clear: left;
float: left;
width: 120px;
text-align: left;
}
If you prefer the Label texts to be right aligned, you can change the style for:
.form-control-label
{
clear: left;
float: left;
width: 120px;
text-align: right;
margin-right: 8px;
}
First I will explain my scenario.
I have asp.net menu (dynamically created menu) and now I want to place push notification just like Facebook on my each menu option. I have designed it using CSS and put a label using jQuery.
if (res == "MenuIcons") {
$(this.parentElement).addClass('Notification');
var $label = $("<label ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
$(this.parentElement.parentElement).append($label);
i++;
}
But I am totally confused that how to handle it using C# because I am unable to get the ID of the label created on run-time.
If you didn't understand please let me know and I will explain it more.
why don't you set a data attribute to each label, something like
var $label = $("<label data-element-type='notification' ID=\"notificationlbl" + i + "\" style=\"position: absolute; margin-top: 2%; margin-left: -3.1%; margin-right:-3.3%; z-index: 99; color: white; font-size: 9px; font-family: Verdana; letter-spacing: -1px;\">").text('99');
and then you can retrieve the whole collection with jQuery:
$("[data-element-type='notification']").each(function(){...});
Try adding runat="server" attribute in your label tag. You label tag id won't be available until runtime. So what you can do is search for the controllers by the id of your label. In code behind you can do as following
foreach(Contol c in this.Controls)
{
if(c.ID.contains("notificationlbl")
{
//your code
}
}
I have
<asp:RequiredFieldValidator ID="RequiredFieldValidatorFrom" runat="server" CssClass="ErrorLabel" ControlToValidate="FromDateTextBox" Display="Dynamic" ErrorMessage="<%$ Resources:GlobalResources, StartDateRequired %>">
</asp:RequiredFieldValidator>
and the css
.ErrorLabel
{
margin-left: 5px;
font-family: Segoe UI, Verdana;
font-size: 10px;
font-weight:lighter;
color: red;
vertical-align: top;
text-align: left;
display: block;
}
if my FromDateTextBox is empty I get the error message.
I want to check in my C# code whether my error is published on my page or not.
when I check the elementit from element inspection in chromewhen I don't have the error it's like this:
<span id="ctl00_PageMainContent_RequiredFieldValidatorFrom" class="ErrorLabel" style="color: red; display: none;">Start date required</span>
and when I have it it's like:
<span id="ctl00_PageMainContent_RequiredFieldValidatorFrom" class="ErrorLabel" style="color: red; display: inline;">Start date required</span>
just the display changes.
but how can I check this change in my c# code? I want to enable/disable a button based on this
Thanks in advance
You can achieve this by adding validation group
1) Add validationgroup property to the controls like below in your .aspx page
ValidationGroup="FormSubmit"
2) Use the below method to find whether that group is valid or not
protected bool IsGroupValid(String sValidationGroup)
{
foreach (BaseValidator validator in Page.Validators)
{
if (validator.ValidationGroup == sValidationGroup)
{
bool fValid = validator.IsValid;
if (fValid)
{
validator.Validate();
fValid = validator.IsValid;
validator.IsValid = true;
}
if (!fValid)
return false;
}
}
return true;
}
3) And finally call the above method in your code behind by passing the group name to check whether that group is valid or not.
I'm using this code to make a image in a link in a C# MVC4 app :
#Html.ActionLink(" ", "../Edit", new { id = item.Id }, new { #class = "edit" })
And the CSS :
a.edit
{
background: url("~/Content/Images/edit.png") no-repeat top left;
display: block;
}
But the image don't charge (404 on the img path),
So I expected the RouteConfig, but google says no.
The image is in MyAppName/Content/Images/edit.png
Thanks to help me
EDIT : I tried
url("~/Content/Images/edit.png")
url("/Content/Images/edit.png")
url("../Content/Images/edit.png")
url("../../Content/Images/edit.png")
I think you want background-image instead of just background:
a.edit {
background-image: url("~/Content/Images/edit.png");
backbround-repeat: no-repeat;
background-position: left top;
display: block;
}
Try without the "a" such as :
.edit
{
background: url("~/Content/Images/edit.png") no-repeat top left;
display: block;
}
It is empty on the link text of #HTML.ACTIONLINK you had given which will throw an error. Use
instead
From my little experience with MVC the only way to achieve what you need is to include the CSS in the view itself then:
<style type="text/css">
a.edit { background-image: url("#Url.Content("~/Content/Images/edit.png")"); }
</style>
The #Url.Content will map the given URL properly.
The image can't display if there is no place, so When I put "test" content instread of " ", the image was appearing.
The solution :
a.edit {
background: url("#Url.Content("Content/Images/edit.png")") no-repeat transparent;
width: 14px;
height: 14px;
display: inline-block;
float: left;
}
Thanks all