How to put a placeholder for a dropdown list - html

I cannot manage to put a placeholder titled "Please Select", so I simply put it as an item in my drop-down, but now "Please select" can be selected, which is a bit of a nuisance. Is there a way to have a place holder for the drop-down list below.
<div class="form-group">
#Html.LabelFor(model => model.Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.Type, new List<SelectListItem>
{ new SelectListItem{Text="Please select type"},
new SelectListItem{Text="Book"},
new SelectListItem{Text="Book chapter"},
new SelectListItem{Text="Journal article"},
new SelectListItem{Text="Conference"}}, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Type, "", new { #class = "text-danger" })
</div>
</div>

Overloads 4, 5 & 6 of the DropDownListFor helper all contain a parameter optionLabel, which can be used for your purposes.

Related

Add a class to TextBoxFor

How can I add the form-control class to this TextBoxFor? I'm new to coding.
<div>
<div class="form-group text-center">
<Label class="center-block">Hours</Label>
</div>
<div style="margin-top:-1%" class="form-group text-center">
#Html.TextBoxFor(model => model.hours, new { type = "number", min = "0", step = "1", htmlAttributes = new { #class = "form-control center-block" } })
#Html.ValidationMessageFor(model => model.hours, "", new { #class = "text-danger" })
</div>
</div>
Result:
Not sure where htmlAttributes is coming from here, but you're already within the context of setting HTML attributes in that object, such as type and min and step. You're also setting #class in your ValidationMessageFor, why not apply that same standard?
Just remove the htmlAttributes and set the #class property on the object that has the other attributes:
#Html.TextBoxFor(
model => model.hours,
new {
type = "number",
min = "0",
step = "1",
#class = "form-control center-block"
})

the virtual value in Text Box Asp.net MVC

I have a text box in the Crete view in the asp.net mvc , and i want to put the virtual value 0 in this text box so when i save it will save in the database as 0 how i can do that?
enter image description here
<div class="form-group">
#Html.LabelFor(model => model.Credit, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Credit, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Credit, "", new { #class = "text-danger" })
</div>
</div>
this is the controller:
// GET: DailyTransactions/Create
public ActionResult Create()
{
var Customers = _context.Customers.ToList();
List<SelectListItem> list = new List<SelectListItem>();
foreach (var item in Customers)
{
list.Add(new SelectListItem { Text = item.Customer_Name, Value = item.Customer_Id.ToString() });
ViewBag.Customers = list;
}
return View();
}
To illustrate the idea i have in my project value in database name is credit so i want put this value as 0 i mean the virtual value 0 , so when i add some number to this credit the 0 will be increase .
so i Crete the text box and i want to put the virtual value 0 in this text box.
i hope you understand what i want.
thank you
If you want to "suggest" a value without setting it, you use placeholder:
<input id="Text1" type="text" placeholder="0"/>
If you want to set a default value, then you set that value like this:
<input id="Text1" type="text" value="0" />
If you want to bind a value to your model, you use:
// your imports / declarations
#model myModel;
#using (Html.BeginForm())
{
// other html / razor code
#Html.EditorFor(myModel => myModel.myNumber);
}
This should help, just copy and paste over your EditorFor
#Html.TextBoxFor(model => model.Credit, htmlAttributes: new { #class = "form-control" , #Value = "0", #placeholder = "0",#min="0" })
As you can see I added the html attribute in the MVC html helper and added a min so the values below 0 will not be accepted.

How do I add other attributes to htmlAttributes?

The code below works, but when I try to add another attribute to htmlAttributes, it shows an error that I cannot do this.
#Html.EditorFor(model => model, new { htmlAttributes = new { #class = "form
control" } });
You are putting the next attribute outside of the htmlAttributes object by the looks of it. Instead, you want this:
#Html.EditorFor(model => model, new { htmlAttributes = new { #class = "form control", style = "background: blue" }})
You need to do something like following:
#Html.EditorFor(model => model, htmlAttributes: new { #class = "form control",
id="id"
}
})

MVC Razor Form Set Checkbox to Checked + Lock

I'm building a form and have used the default scaffolding option based on my model in visual studio. What I need is for the checkbox to be checked by default when the view is loaded and disabled. I.E I want to preventing the user from changing the checkbox state.
The view code looks like this:
#model Models.Checkertest
#{
ViewBag.Title = "Test";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Test</h2>
#using (Html.BeginForm("Test", "AccountManagement", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>User Creation</h4>
<div class="form-group">
#Html.Label("Enable Bypass", htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-4">
<div class="checkbox">
#Html.EditorFor(model => model.box1)
#Html.ValidationMessageFor(model => model.box1, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
}
In your action method in your controller, set the box1 property to true on your model. It would look something like this:
var model = new Checkertest {box1 = true};
return View(model);
To make the checkbox readonly, set the readonly attribute on it, like this:
#Html.EditorFor(model => model.box1, new {#readonly = "readonly"})

Setting the route in an application

I am making an MVC application and I am trying to make it go to a certain page after clicking a "Create" button. I am only learning this and I'm not sure how to phrase it :P But let me explain.:
I have 3 entities, Year, Week and Day. They are linked together and have their own create and delete pages etc. When you make a day you say what year and week it is in. What I want to know is after I click "Create" after putting in the data for a day, how do I make it go to the Year index page rather than the Day one? When I click "Create", it shows me the list of all the days created, I rather it take me to the list of Years.
The Create page CSHTML code for day is inside #using (Html.BeginForm()), and I tried using #using (Html.BeginForm("Index", "Year")), this does take me to the Year index page, but it does not create the day at all.
Does any one know how to go about this?
Day "Create" page code:
#model Utility3.Models.Day
#{
ViewBag.Title = "Create";
}
<h1>Add Day</h1>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
#*<h4>Day</h4>*#
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.Label("Year", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("YearID", String.Empty)
#Html.ValidationMessageFor(model => model.YearID)
</div>
</div>
<div class="form-group">
#Html.Label("Week Number", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("WeekID", String.Empty)
#Html.ValidationMessageFor(model => model.WeekID)
</div>
</div>
<div class="form-group">
#Html.Label("Day of the Week", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("DayofWeek", new List<SelectListItem>
{
new SelectListItem { Text = "Monday", Value = "Monday", Selected=true},
new SelectListItem { Text = "Tuesday", Value = "Tuesday"},
new SelectListItem { Text = "Wednesday", Value = "Wednesday"},
new SelectListItem { Text = "Thursday", Value = "Thursday"},
new SelectListItem { Text = "Friday", Value = "Friday"},
new SelectListItem { Text = "Saturday", Value = "Saturday"},
new SelectListItem { Text = "Sunday", Value = "Sunday"}
}, "Select Day")
#Html.ValidationMessageFor(model => model.DayofWeek)
</div>
</div>
<div class="form-group">
#Html.Label("Reading1", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Reading1)
#Html.ValidationMessageFor(model => model.Reading1)
</div>
</div>
<div class="form-group">
#Html.Label("Reading2", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Reading2)
#Html.ValidationMessageFor(model => model.Reading2)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Year ActionResult Index
// GET: /Year/
public ActionResult Index()
{
return View(db.Years.ToList());
}
When you post method, redirect to the Year Index view
[HttpPost]
public ActionResult Create(Utility3.Models.Day model)
{
if (!ModelState.IsValid)
{
return View();
}
....... // Save your model
return RedirectToAction("Index", "Year");
}