I have the following code:
#Html.TextBoxFor(x => x.Name, new { #onload = "if(this.value=='')this.value='NAME';", #class = "text", #onblur = "if(this.value=='')this.value='NAME';", #onfocus = "if(this.value=='NAME')this.value='';" })
#Html.TextBoxFor(x => x.Email, new { #onload = "if(this.value=='')this.value='EMAIL ADDRESS';", #class = "text", #onblur = "if(this.value=='')this.value='EMAIL ADDRESS';", #onfocus = "if(this.value=='EMAIL ADDRESS')this.value='';" })
But it only says 'NAME' when the box is clicked on, I want it to be there to begin with.
Why not just use the HTML5 placeholder attribute? That seems to be what you're trying to do.
#Html.TextBoxFor(x => x.Name, new { placeholder = "NAME" })
#Html.TextBoxFor(x => x.Email, new { placeholder = "EMAIL ADDRESS" })
You can use the attribute of HTML5 placeholder and the plugin jquery-placeholder for compatibility with other browsers
Html + Razor:
#Html.TextBoxFor(x => x.Name, new { placeholder = "NAME", #class="with-placeholder" })
#Html.TextBoxFor(x => x.Email, new { placeholder = "EMAIL ADDRESS", #class="with-placeholder"})
JS:
$('.with-placeholder').placeholder();
Data from: html5please.com
Related
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
Currently my code is selecting the first item in the list. I want it to select the item which matches the MakeModelTypeCode.
E.G.
The selected item in the dropdownlist should be where this code
vehicleViewModel.VehicleDTO.VehicleDetails.MakeModelTypeCode
= MakeModelTypeCode from x
Here is the relevant code from the Business Logic class:
vehicleViewModel.AvailableMakeModels = GetAllMakeModelTypesForClient(selectedClientId);
vehicleViewModel.AvailableMakeModels = vehicleViewModel.AvailableMakeModels.GroupBy(x => x.ModelDescription).Select(x => x.First()).Distinct().ToList();
var vehicleMakeList = vehicleViewModel.AvailableMakeModels
.Select(s =>
new SelectListItem
{
Selected = true,
Text = s.MakeDescription,
Value = s.MakeModelTypeCode
});
Here is the relevant code from the .cshtml:
<div class="col-sm-6">
#Html.LabelFor(m => m.VehicleDTO.VehicleDetails.MakeDescription)
#Html.DropDownListFor(x => x.SelectedvendorText, new SelectList(Model.AvailableMakesSelectList, "Value", "Text", "Make"), new { #class = "form-control uppercase", #id = "ddlAvailableMakes", name = "ddlAvailableMakes", #onchange = "FillModels()" })
#Html.ValidationMessageFor(m => m.SelectedMake, "", new { #class = "text-danger" })
</div>
Here is the code from the Controller:
[Route("Edit-{id}")]
[Authorize]
public ActionResult Edit(string id)
{
VehicleViewModel vehicleViewModel = new VehicleViewModel();
selectedClientId = HelperMethods.GetClientId();
vehicleViewModel.VehicleDTO = this.vehicleBusinessLogic.GetClientVehicleDTO(id, this.selectedClientId);
vehicleViewModel = this.vehicleBusinessLogic.SetUpUpdateVehicle(vehicleViewModel, selectedClientId);
vehicleViewModel.VehicleDTO.VehicleDetails.ClientID = this.selectedClientId;
return View(vehicleViewModel);
}
I have tried a few different ways but can't get any to work. I can get just the item I want returned but not all the items + the selected item.
I was thinking I could do a nested Where clause inside the Select but that doesn't seem to work, but maybe my syntax was in-correct.
How about
MakeModelTypeCode toBeSelected;
var vehicleMakeList = vehicleViewModel.AvailableMakeModels
.Select(s =>
new SelectListItem
{
Selected = s.MakeModelTypeCode == toBeSelected,
Text = s.MakeDescription,
Value = s.MakeModelTypeCode
});
Changing the .cshtml to the below resolved the issue.
The only change was to replace x => x.SelectedvendorText with m => m.VehicleDTO.VehicleDetails.MakeModelTypeCode
<div class="col-sm-6">
#Html.LabelFor(m => m.VehicleDTO.VehicleDetails.MakeDescription)
#Html.DropDownListFor(m => m.VehicleDTO.VehicleDetails.MakeModelTypeCode, new SelectList(Model.AvailableMakesSelectList, "Value", "Text", "Make"), new { #class = "form-control uppercase", #id = "ddlAvailableMakes", name = "ddlAvailableMakes", #onchange = "FillModels()" })
#Html.ValidationMessageFor(m => m.SelectedMake, "", new { #class = "text-danger" })
</div>
I am trying to show multiple columns from my database in a dropdownlist using a SelectList
public ActionResult Create()
{
var times = db.Show_Courses
.Select(x =>
new {
id = x.show_course_id,
times = x.show_course_before + "," + x.show_course_after
});
ViewBag.course_id = new SelectList(times, "id", "times");
return View();
}
It shows up properly in the view but in the database the value of the id is 0
This was my code before i wanted to show two columns in the textfield of the selectlist
public ActionResult Create()
{
ViewBag.course_id = new SelectList(db.Show_Courses, "show_course_id", "show_course_time_before");
return View();
}
And here is my code in the view
<div class="form-group">
#Html.LabelFor(model => model.course_show_id, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("course show id", (SelectList)ViewBag.course_id, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.course_show_id, "", new { #class = "text-danger" })
</div>
</div>
So my question is how can I display 2 values in the Textfield of the Selectlist without the id becoming 0?
You could generate SelectList manually.
For example,
ViewBag.course_id = db.Show_Courses
.Select(x => new SelectListItem {
Text = x.show_course_before + "," + x.show_course_after,
Value = x.show_course_id.ToString() })
.ToList();
I personally like to use strongly type model. You can read more here
Your code seems to be fine, you need to map the dropdown to according value from model: show_course_id - from what I see, so please update your dropdown to:
#Html.DropDownList("show_course_id", (SelectList)ViewBag.course_id, new { htmlAttributes = new { #class = "form-control" } })
Using MVC5 I've added view logic to disable data entry based on a value in the model. After the logic runs it is overridden by existing EditorTemplate logic - the field remains enabled. How can I make my disable logic work? This view logic runs first:
<div>
#{
object attributes = new { #class = "form-control", #disabled = "disabled", #readonly = "readonly" };
if (Model.OnHold.Number == 0) {
attributes = new { #class = "form-control datePicker" };
}
#Html.EditorFor(model => model.OnHold.DateIssued, attributes);
}
</div>
Then the conflicting EditorTemplate code:
#model DateTime
#Html.TextBox(string.Empty, #Model.ToString("MM/dd/yyyy"), new { #class = "form-control datepicker" })
When you call #Html.EditorFor(model => model.Property, attributesObj) and you have a custom editor view defined, you can see that the intellisense for the function says that the htmlAttributes object is also included in the ViewData of the view. In other words, if you access the ViewData property within your editor view, you should have access to the properties you're passing from your #Html.EditorFor(model => model.OnHold.DateIssued, attributes); statement. Here's a simple example:
// Index.cshtml - assuming model.Message is of type string
#Html.EditorFor(model => model.Message, new { #class = "text-danger" })
// EditorTemplates/String.cshtml
#model string
#{
object textboxAttributes = new { #class = "text-success" };
// Override the default #class if ViewData property contains that key
if (ViewData.ContainsKey("class") && string.IsNotNullOrWhitespace(ViewData["class"].ToString())
{
textboxAttributes = new { #class = ViewData["class"] };
}
}
#Html.TextboxFor(model => model, textboxAttributes)
In your case your EditorTemplate will now look like this:
#model DateTime
#{
object dateAttributes = new { #class = "form-control datepicker" };
if (ViewData.ContainsKey("disabled") && !String.IsNullOrWhiteSpace(ViewData["class"].ToString()))
{
dateAttributes = new { #class = ViewData["class"], #readonly = "readonly", #disabled = "disabled" };
}
}
#Html.TextBox(string.Empty, #Model.ToString("MM/dd/yyyy"), dateAttributes)
Using first method I'm setting default subjects in listbox and using second I'm retrieving only these who was selected.
public void SubjectsList()
{
ViewBag.Subjects =
new SelectList(new[] { "Math", "Physic", "English" }
.Select(x => new { value = x, text = x }),
"Value", "Text");
}
public void SubjectsFromDb(int id)
{
var students = _db.Subjects.AsEnumerable().Where(x => x.StudentId == id).Select(q => new SelectListItem
{
Value = q.Name,
Text = q.Name,
}).ToList();
ViewBag.Subjects = students;
}
How can I do that in Listbox was all Subject but selected were only these which is in db?
Here's my listbox
<div class="form-group">
#Html.LabelFor(model => model.Subject, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.ListBoxFor(model => model.Subject,
new MultiSelectList((IEnumerable<SelectListItem>)ViewBag.Subjects, "Value", "Text"),
new { style = "display:block;" })
#Html.ValidationMessageFor(model => model.Subject)
</div>
</div>
Your model property Subject needs to be public IEnumerable<string> Subject { get; set; } although I would suggest it be renamed to Subjects - plural) and you rename the ViewBag property
The in the GET method, assign the existing subjects to the model
var model = yourModel()
{
Subjects = _db.Subjects.Where(x => x.StudentId == id).Select(q => q.Name);
};
ViewBag.SubjectList = new SelectList(new[] { "Math", "Physic", "English" });
return View(model);
Then in the view its
#Html.ListBoxFor(m => m.Subjects, (SelectList)ViewBag.SubjectList)
Side notes:
There is no need for the extra overhead of creating anonymous
objects to generate the SelectList - you can delete .Select(x => new { value = x, text = x }), "Value", "Text")
Since its already a SelectList, there is no need for the extra
overhead of creating another duplicate SelectList in the
ListBoxFor() method