In my application the user must select Product Categories from a DropDownList. So what I want to do is, if he doesen't select a category and tries to send his order, the DropDownList should be highlighted so he sees, that he has to select a category. My problem now is, not one the attempts I tried to style this DropDownList, did work yet. So I hope you can help me out or tell me where the problem is:
CSS-File:
.field-validation-error {color: #ffb3b3;}
.field-validation-valid {display: none;}
.input-validation-error {border: 1px solid #f00; background-color: #ffb3b3;}
.select.input-validation-valid { display: none;}
.select.input-validation-error { color: #ffb3b3; }
.validation-summary-error {font-weight: bold; color: #ffb3b3;}
.validation-summary-valid {display: none}
DropdownListFor in the view:
#if (Request.Form["SendOrder"] != null && String.IsNullOrEmpty(ProductCategory))
{
#Html.DropDownListFor(m => m.PC,
new SelectList(Model.ProductCategory.OrderBy(m => m.PCNumber),
"", "CategoryName",
new {#class = "field-validation-error, input-validation-error,
select.input-validation-error" }), "Select a Category")
}
else
{
#Html.DropDownListFor(m => m.PC,
new SelectList(Model.ProductCategory.OrderBy(m => m.PCNumber),
"", "CategoryName"), "Select a category")
}
For anyone interested in this, the problem is solved and the solution can be found here
Related
I am using "#Html.ActionLink()" and used "text-decoration:none" in it. But still the link is showing underline for it.
Can anybody suggest solution for it to remove the underline.
Thanks,
Yuoraj
You can do it inline like this:
#Html.ActionLink(<your params>, new { style="text-decoration:none"})
but really you should be using a css file and a class:
#Html.ActionLink(<your params>, new { #class="myclass"})
where myclass looks like
a.myclass {
text-decoration: none;
}
UPDATE:
a.hprLnkmastercls {
text-decoration: none;
}
And if you don't want it underlined on hover
a.hprLnkmastercls:hover {
text-decoration: none;
}
In your .cshtml
#Html.ActionLink("Process", "Home" "WebsiteHome", new {}, new { #class = "hprLnkmastercls" })
will render as:
<a class="hprLnkmastercls" href="/WebsiteHome/Home">Process</a>
is there a way to change the CSS style of only the First argument "Add To Cart" ?
example changing font or color of the Text?
#Ajax.ActionLink( "Add To Cart", "addToCart", "Product", new { idProduct = #item.idProduct, quantity = 1 }, new AjaxOptions { HttpMethod = "POST", }, new { #class = "item-add-btn" } )
Perhaps using pseudo-class in css, first-of-type or first-child. see example
li:first-of-type {
background-color: yellow;
}
li:first-child {
background-color: yellow;
}
CSS3 :first-of-type Selector
I have a datepicker that has a special highlight using beforeShowDay. However, the highlight style prevents the selected ("ui-btn-active") style, which is automatically applied when a cell is clicked. What is the best approach to get the selected style on top?
<div id="datepicker"></div>
.Highlighted a{
background: none !important;
background-color: #990066 !important;
}
$('#datepicker').datepicker({
beforeShowDay: function (date) {
return [true, SelectedDates[date] ? 'Highlighted' : ''];
}
});
Adding this has no effect:
.Highlighted ui-btn-active a{
background: none !important;
background-color: white !important;
}
On your beforeShowDay code add the ui-btn-active class to the selected elements after adding them Highlighted class.
Remember elements can have multiple classes.
beforeShowDay: function (date) {
var selected = $("#datepicker").datepicker('getDate');
if (date.getDate() != selected.getDate()) return [true, SelectedDates[date] ? 'Highlighted' : ''];
else return [true, '']
}
i'm making a workbook creator in C#.net ( using visual studio )
the book is build from the text part and the question part.
all the answers for the question are in side the text and the user need to click on the right answer.
if he's right then the word become green and if he's wrong it become red.
i'm using linkbutton for this and i need it to be without and "link" style.
i use this code for the question part:
public class question
{
public void createQusetion(Panel leftside, string text, string question,string answer)
{
string[] Qbuttonstext = text.Split(' ');
for (int i = 0; i < Qbuttonstext.Length; i++)
{
LinkButton answerButton = new LinkButton();
if (Qbuttonstext[i] == answer)
{
answerButton.ID = "answer";
}
else
{
answerButton.ID = "word" + i.ToString();
}
answerButton.Text = Qbuttonstext[i].ToString()+" ";
answerButton.CssClass = "textbuttonB4";
answerButton.Click += new EventHandler(checkAnswer);
leftside.Controls.Add(answerButton);
}
}
}
i used css stylesheet and used this code:
.textbuttonB4 a:link
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:hover
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
.textbuttonB4 a:visited
{
style:none;
color:Black;
font-size:18px;
border-bottom-style:none;
background-color:transparent;
text-decoration: none;
}
when the code running the text is still appears as a link.
after looking the web for solution, dont konw why its not working.
sorry for the previous version of this question.
asaf
Check the output source. Does the button have the appropriate class? Did you remember to include the stylesheet?
Also, what does style:none; do? It's not valid CSS.
Is there a way in ASP.NET MVC3 to customize the result of the Html.ValidationMessageFor(...) method? For example add an image next to the error text or similar...
But I want to be able to change the image whether the validation is successful or not...
You can see that the error is wrapped with a Css Class, all you need to do is use that Css Class at your own will.
The default MVC3 contains in the styles.css
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}
just add your images there.
Yup
U can write ur own extension to do so
public static MvcHtmlString ValidationMessageFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression)
{
TagBuilder div = new TagBuilder("div");
div.AddCssClass("aside");
string modelName = ExpressionHelper.GetExpressionText(expression);
ModelState state = htmlHelper.ViewData.ModelState[modelName];
if (state != null)
if ((state.Errors != null) && (state.Errors.Count > 0))
div.AddCssClass("invalid");
else
div.AddCssClass("valid");
div.InnerHtml = htmlHelper.ValidationMessageFor(expression).ToString();
return MvcHtmlString.Create(div.ToString());
}
Then use something like this
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
And lastly u need to define ur css for invalid and aside class to customize how the error looks.