I need to disable an input dynamically when its value is equal to "*". How can I achieve this using the MVC Razor?
#Html.TextBoxFor(m => m.Digits[0], new { #class = "form-control input-lg label_16", #placeholder =
"1st", (Model.Digits[0] == "*" ? "disabled" : "") })
The above code doesn't compile
Is this possible?
Try using ternary operator
#Html.TextBoxFor(m => m.Digits[0], Model.Digits[0] == "*" ? (object)new { #class = "form-control input-lg label_16", #placeholder =
"1st", #disabled = "disabled" } : new { #class = "form-control input-lg label_16", #placeholder =
"1st" })
in the code above, the second parameter of #Html.TextBoxFor helper method will be based on the value of Model.Digits[0]. If it's * then the parameter would include the disabled attribute
new { #class = "form-control input-lg label_16", #placeholder =
"1st", #disabled = "disabled" }
otherwise
new { #class = "form-control input-lg label_16", #placeholder =
"1st" }
Related
I am using three different Selectlist to populate three different drop downs. Area, Discipline, and Shift.
The problem I am facing is that it works for the first one but not for the other two. On the form, the selectedvalue works for the area, however for discipline and shift it selects the first one on the list
List<SelectListItem> ShiftEdit = db.Shifts
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.ShiftID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Shift1
}).ToList();
ViewBag.ShiftEdit = new SelectList(ShiftEdit, "Value", "Text", employee.ShiftID);
List<SelectListItem> AreaEdit = db.Areas
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.AreaID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Area1
}).ToList();
ViewBag.AreaEdit = new SelectList(AreaEdit, "Value", "Text", employee.AreaID);
List<SelectListItem> DisciplineEdit = db.Disciplines
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.DisciplineID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Discipline1
}).ToList();
ViewBag.DisciplineEdit = new SelectList(DisciplineEdit, "Value", "Text", employee.DisciplineID);
The View:
<div class="form-group">
#Html.LabelFor(model => model.ShiftID, "Shift", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("ShiftID", (IEnumerable<SelectListItem>)ViewBag.ShiftEdit, htmlAttributes: new { #class = "form-control", #style = "width:400px" })
#Html.ValidationMessageFor(model => model.ShiftID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AreaID, "Area", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("AreaID", (IEnumerable<SelectListItem>)ViewBag.AreaEdit, htmlAttributes: new { #class = "form-control", #style = "width:400px" })
#Html.ValidationMessageFor(model => model.AreaID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DisciplineID, "Discipline", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DisciplineID", (IEnumerable<SelectListItem>)ViewBag.DisciplineEdit, htmlAttributes: new { #class = "form-control", #style = "width:400px" })
#Html.ValidationMessageFor(model => model.DisciplineID, "", new { #class = "text-danger" })
</div>
</div>
So I had mistakenly not deleted the original scaffoldded Viewbags which seemed to cause the problem.
I deleted them and it all works fine now
I need to retrieve the value of the startdate so that I can combine the startdate with the start time and get the datetime. How do I retrieve the data or the value of the #html.EditorFor?
I have already tried using jQuery to get the data but I can't find the way to link the jQuery and the values inside the #{} up.
#Html.EditorFor(model => model.StartDate, new { htmlAttributes = new {
#class = "form-control border-input", #type = "date", id = "modelId" }
})
#Html.ValidationMessageFor(model => model.StartDate, "", new { #class =
"text-danger" })
#Html.EditorFor(model => model.StartTime, new { htmlAttributes = new {
#class = "form-control border-input", #type = "time", id = "modelId2" } })
#Html.ValidationMessageFor(model => model.StartTime, "", new { #class =
"text-danger" })
I expect that I can combine the date and time together
I have a text area to show the description and my model for the same looks like
[Display(Name = "CopyrightHolder_AdditionalInfo_Label", ResourceType = typeof(Resource))]
public string AdditionalInfo { get; set; }
And in Razor i am using the form like this
<div class="form-group">
#Html.LabelFor(model => model.AdditionalInfo)
#Html.TextAreaFor(model => model.AdditionalInfo, new { #class = "form-control", #rows = "5", #placeholder = "i wnat to load from resource file this text", #maxlength = "545" })
#Html.ValidationMessageFor(model => model.AdditionalInfo)
</div>
I am also planning to show a placeholder on this text area which should load from resource file
Is there any way to do the same ?
you can add it like below:
#Html.TextAreaFor(
model => model.AdditionalInfo,
new {
#class = "form-control",
#rows = "5",
#placeholder = #Resources.Strings.YourKeyString,
#maxlength = "545"
}
)
I try to show/hide a tinymce with radobutton. Like yes/no. So there are two radio buttons. yes - will show the tiny mce and no will hide the tinymce.
I have this:
showing tiny mce:
<div class="form-group">
#Html.Label(Resources.Entity.Product.PdfMessage, new { #class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name, id = "tinyMCE" } })
#Html.ValidationMessageFor(model => mailModel.PdfMessage)
#*#Html.TextArea("MailProductHandlers_message", mailModel.Message, new { #class = "form-control", #rows = 15 })*#
</div>
</div>
these are my radio buttons:
<div class="form-group">
#Html.Label(Resources.Entity.Product.GeneratePDF, new {#class = "text-bold control-label col-md-2" })
<div class="col-lg-6 col-md-8 col-sm-10 ">
#Html.Label(Resources.Entity.Product.GeneratePDFYes) #Html.RadioButtonFor(model => model.IsChecked, "Yes", new { #checked = true, id = "radioButton" })
#Html.Label(Resources.Entity.Product.GeneratePDFNo) #Html.RadioButtonFor(model => model.IsChecked, "No", new { #checked = true, id = "radioButton2" })
</div>
</div>
and this is my javascript:
<script>
$(document).ready(function () {
$("input[Id='radioButton']").click(function () {
if ($(this).is(':checked')) {
$('#tiny-mce').show();
}
else {
$('#tiny-mce').hide();
}
});
});
</script>
if I do this: $('#mceu_61').hide(); it hides the editor. but after I press on yes, it shows the editor. but if I then press No it doesnt hide anymore. And I have this:
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "mceu_61", data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
Your missing an #symbol for the id attribute:
Modify your script as well like this:
***EDIT some thing seems off about the radio buttons only one should be checked and they should have the same name **
you can use the # to denote and ID in Jquery by the way instead off looking it up by attribute
EDIT I changed a few things around, I don't think you need two individual ids I grouped them with a class, you should be able to check the on change event from that class instead of checking on both ids
#Html.EditorFor(model => mailModel.PdfMessage, new { htmlAttributes = new { #class = "form-control tiny-mce", #id = "tinyMCE", #data_lang = System.Globalization.CultureInfo.CurrentUICulture.Name } })
#Html.RadioButtonFor(model => model.IsChecked, "Yes", new { #checked = true, #class = "pdfchecker" })
// only one should be checked
#Html.RadioButtonFor(model => model.IsChecked, "No", new { #checked = false, #class = "pdfchecker" })
<script>
// this is short hand for document ready
$(function () {
//# is to denote an ID, . is to denote a class in jQuery the change function is hit when a radio button is change check the name to make sure they are apart of the same grouping
$(".pdfchecker").change(function () {
if ($(this).is(':checked')) {
$('#tiny-mce').show();
}
else {
$('#tiny-mce').hide();
}
});
</script>
I am making a registration form for my website, and currently i have it like this
and the code for that is :
#Html.Label("Firstname")
#Html.TextBoxFor(model => model.Firstname, new {#required = "require", #style = "width:75%;", #class = "form-control" })
#Html.ValidationMessageFor(model => model.Firstname, null, new { #style = "color:red;" })
<br />
#Html.Label("Surname")
#Html.TextBoxFor(model => model.Lastname, new { #required = "require", #style = "width:75%;", #class = "form-control" })
#Html.ValidationMessageFor(model => model.Lastname, null, new { #style = "color:red;" })
<br /> . . .
What i am trying to do is to add the title for example "First Name" inside the textbox, when data is entered it would disappear, To look like this
I have tried adding:
#name ="FirstName"
#label ="FirstName"
#title ="FirstName"
but all of those did nothing.
You are talking about placeholder. It's a HTML attribute, just add it to the custom htmlAttributes parameters, for exemple:
#Html.TextBoxFor(model => model.Firstname, new {#required = "require", #style = "width:75%;", #class = "form-control", placeholder = "First Name" })
It seems you are looking for the Html5 placeholder attribute
#Html.TextBoxFor(model => model.Firstname, new {#required = "require", #style = "width:75%;", #class = "form-control", placeholder = "First Name" })
This will add default value to your TextBox
#Html.TextBoxFor(model => model.Firstname, new {#required = "require",
#style = "width:75%;",
#class = "form-control",
#value = "FirstName"})
Or if you want it to dissapear on entering the textbox
#Html.TextBoxFor(model => model.Firstname, new {#required = "require",
#style = "width:75%;",
#class = "form-control",
placeholder = "FirstName"})