MVC Razor Form Set Checkbox to Checked + Lock - html

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"})

Related

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.

Styling Html.ValidationMessageFor with Bootstrap3

I'm trying to style my #HTML.ValidationMessageFor element with Bootstrap 3 but no CSS is applied. When consulting Bootstrap's documentation, it states:
To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.
Even after nesting the desired #Html.ValidationMessageFor as stated above, no styling is applied:
Please see my code snippets below:
Model Property:
[Range(0, int.MaxValue, ErrorMessage = "Client ID cannot be larger than 2147483647.")]
[RegularExpression(#"^[0-9]+$", ErrorMessage = "Client ID must be a positive number.")]
public int searchClientID { get; set; }
View:
<div class="form-group col-sm-4">
<div class="input-group">
<span class="input-group-addon" id="client-ID">Client ID</span>
#Html.TextBoxFor(m => m.searchClientID, new { #class = "form-control" })
</div>
<div class="has-error">
#Html.ValidationMessageFor(m => m.searchClientID, null, new { #class = "has-error" })
</div>
</div>
EDIT WITH ANSWER:
<div class="has-error">
#Html.ValidationMessageFor(m => m.searchClientName, String.Empty, new { #class = "help-block" })
</div>
dont replace form-group with has-error.I have used something similar to this recently and try the following markup.
<div class="form-group has-error">
<div >
#Html.PasswordFor(m => m.ConfirmPassword, new { #class = "form-control" })
</div>
#Html.LabelFor(m => m.ConfirmPassword, new { #class = "control-label" })
#Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { #class = "help-block" })
</div>

How to put a placeholder for a dropdown list

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.

Autofocus on EditorFor

I would like to autofocus on an editorfor in my application, but I can't seem to do that. I have successfully used autofocus on a textbox, but I would like to use an editorfor to keep my application's look universal.
Any solutions to this would be much appreciated, thank you.
My attempt:
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" }, autofocus = "" })
This s because you are using EditorFor instead of something specific like TextBoxFor.
#Html.TextBoxFor(model => model.Name, new { htmlAttributes = new {
#class = "form-control" }, autofocus="autofocus"})
Or you can do that using jQuery:
<div class="editor-field focus">
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
</div>
$(function() {
$('.focus :input').focus();
});
Update:
As you know TextBoxFor always creates a textbox with type input, But EditorFor is a little bit smart, it renders markup based on the datatype of the property.
Using .Net Framework 4.5 and MVC 5, this works for me:
#Html.EditorFor(model => model.Description, new {
htmlAttributes = new {
#class = "form-control",
autofocus = true
}
})
You put the autofocus attribute in the wrong spot.
#Html.EditorFor(model => model.Description,
new { htmlAttributes = new { #class = "form-control" }, autofocus = "" })
Try this instead:
#Html.EditorFor(model => model.Description,
new { htmlAttributes = new { #class = "form-control", autofocus = "" } })
I've been following this thread and I may have stumbled on an answer to your question about autofocus on EditorFor - this is all Asp.Net 4.5 and MVC 5, not that it matters.
In the Scripts folder I have a jQuery script file:
$(function(){
$('.someclassname').focus();
});
I add the script name to the BundleConfig and render it in the view.
In the view I add the classname to the EditorFor <div class="col-md-10" someclassname">
I then add the type="text" autofocus="autofocus" to the EditorFor's #class. So, new{#class="form-control", type="text", autofocus="autofocus"
That's pretty much it, when the DOM loads the .someclassname field gets the cursor focus...
PS. In fact if you just do (3) it works also...

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");
}