I would like to fill the textbox field with the current date automatically when the page loads and still be able to edit it but when I place 'datetime.now' it does not seem to work
this is my view:
<div class="form-group">
#Html.LabelFor(model => model.ReturnedDate, "Returned date", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ReturnedDate,DateTime.Now.ToShortDateString()),new { htmlAttributes = new { #class = "box" } })
#Html.ValidationMessageFor(model => model.ReturnedDate)
</div>
</div>
You need to assign your date something like below.
#Html.TextBoxFor(model => model.ReturnedDate, new { #Value = #DateTime.Now.ToShortDateString() })
Related
I am using MVC and on my Index view I have placed a 'EditorFor' and a 'DropDownFor' fields on it for data entry. I would like a user to enter values and then 'Save' the record from the view. However I am having problems retrieving the data entered. I have tried creating an ActionResult and binding the data however nothing comes across. I have tried giving the fields id names and passing them in as parameters and again nothing is passed.
This is what I have in my View -
<h3>Sensitive Areas</h3>
#Html.HiddenFor(model => model.BurnSitesID, new { #id = "burnSitesID"})
<div class="form-group">
#Html.LabelFor(model => model.SensitiveTypesID, "Sensitive Area", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("SensitiveTypesID", string.Empty)
#Html.ValidationMessageFor(model => model.SensitiveTypesID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DistSensitiveArea, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DistSensitiveArea, new { #id = "distSensitiveArea" })
#Html.ValidationMessageFor(model => model.DistSensitiveArea, "", new { #class = "text-danger" })
</div>
<input type="submit" id="CreateArea" value="Save"/>
How would you take the values entered and pass them to the controller? I have tried a button however if my button is not named the exact same thing as the view it does not do anything.
Please use Html.BeginForm("ActionName","ControllerName", FormMethod.Post) .
Button should be Submit type .
If you are use textbox .
#Html.TextBoxFor("txtName", "", new { #class = "form-control", #maxlength = "50" })
<input type="submit" id="CreateArea" value="Save"/>
[HttpPost]
public ActionResult ActionName(FormCollection form)
{
string Name=form["txtName"].ToString();
}
Where Name is a name/ID of field name .
Thanks .
Using scaffolded items in an MVC5 application, I see things like text fields given the CSS class "form-control". The fields all have consistent rounded corners, same font color/size etc.
Now I've added a dropdown list using "#Html.DropdownListFor" and it's square, with a different font colour.
I know I can specify which CSS class to use in the Razor e.g.
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "###########" } })
But I don't know what to replace ########### with. If I specify "form-control" just gives me the square box I described above. "form-control select" doesn't seem to do much either.
Here's a bigger snippet showing a well-styled text field directly above it
<div class="form-group">
#Html.LabelFor(model => model.Title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.OrderItemType, "", new { #class = "text-danger" })
</div>
</div>
Is there a value I can use that will give my dropdown the same appearance as all the other text fields I already have?
Thanks
The third parameter already is the htmlAttributes field, so your syntax is wrong. This is what you're after:
#Html.DropDownListFor(model => model.OrderItemTypeId,
(SelectList)ViewBag.OrderItemTypes,
new { #class = "form-control etc" })
See Microsoft Docs.
You need to make sure it sits within proper hierarchy of outer tags with their corresponding classes.
See the code below that I took from this article - How to use Bootstrap 3 validation states with ASP.NET MVC Forms
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="panel panel-default">
<div class="panel-body">
#using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) {
#* State selection dropdown *#
<div class="form-group">
#Html.LabelFor(m => m.State)
#Html.DropDownListFor(m => m.State, // Store selected value in Model.State
// This argument needs some explanation - here we take a Distionary<string, string>
// and turn it into an instance of SelectList, see blog post for more details
new SelectList(Model.States, "Key", "Value"),
// Text for the first 'default' option
"- Please select your state -",
// A class name to put on the "<select>"
new { #class = "form-control" }
)
#Html.ValidationMessageFor(m => m.State)
</div>
<button type="submit" class="btn btn-primary">Update</button>
}
</div>
</div>
</div>
</div>
I've been having problems getting formatting to work in my MVC 5 View. The View was scaffold as a TextAreaFor. I added DataFormatting for my property in my ViewModel but it doesn't actually format for me. From everything I have researched I'm formatting the ViewModel correctly but I haven't been able to figure out why the formatting isn't actually working.
So, I tried using #Html.EditFor. That seemed to make the date formatting work but it didn't to apply the Bootstrap "form-control" class. I then tried #Html.TextBoxFor and it responded like the #Html.TextAreaFor, no formatting but did apply the Bootstrap class.
I don't know which one to use and what else I need to do to get my View to not only format the date but to also apply the Bootstrap CSS.
Here is my ViewModel property.
[DisplayName("Call Date")]
[DisplayFormat(DataFormatString = "{0:d}", ApplyFormatInEditMode = true)]
public DateTime? CallDate { get; set; }
This is the original TextAreaFor that the scaffolding created. No formatting but Bootstap CSS works.
<div class="form-group">
#Html.LabelFor(model => model.CallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.CallDate, new { #class = "form-control datepicker" })
#Html.ValidationMessageFor(model => model.CallDate, "", new { #class = "text-danger" })
</div>
</div>
This is the EditFor that formats the date but doesn't apply Bootstrap CSS.
<div class="form-group">
#Html.LabelFor(model => model.CallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CallDate, new { #class = "form-control datepicker" })
#Html.ValidationMessageFor(model => model.CallDate, "", new { #class = "text-danger" })
</div>
</div>
This is the TextBoxFor that responded like the TextAreaFor.
<div class="form-group">
#Html.LabelFor(model => model.CallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CallDate, new { #class = "form-control datepicker" })
#Html.ValidationMessageFor(model => model.CallDate, "", new { #class = "text-danger" })
</div>
</div>
To add html attributes using #Html.EditorFor() you must be using MVC-5.1+, and if you are, then the usage is
#Html.EditorFor(m => m.CallDate, new { htmlAttributes = new { #class="form-control datepicker" }})
If you not using MVC-5.1+, and you want to generate a textbox and also format the date value, then the usage is (where the 2nd parameter is the format string)
#Html.TextBoxFor(m => m.CallDate, "{0:d}", new { #class = "form-control datepicker" })
Note that #Html.TextAreaFor() generate a <textarea> element for multi-line text and would not be appropriate for a DateTime property.
I have used weareoutman ClockPicker in my MVC project and it is perfectly working when I have only one clockPicker field in my View. When for example for Meeting table I need a start and an end time, the second clockPicker does not function(when I click there is no clockPicker).
Here's how I use it in my Create View:
<div class="form-group">
#Html.LabelFor(model => model.StringStartTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StringStartTime, new { htmlAttributes = new { #class = "form-control clockPicker", id = "single-input", value = "", placeholder = "اکنون" } })
#Html.ValidationMessageFor(model => model.StringStartTime, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.StringEndTime, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.StringEndTime, new { htmlAttributes = new { #class = "form-control clockPicker", id = "single-input", value = "", placeholder = "اکنون" } })
#Html.ValidationMessageFor(model => model.StringEndTime, "", new { #class = "text-danger" })
</div>
</div>
So again the problem: the second clockPicker does not function(After clicking on the text box, the clockpicker does not pop up). What have I done wrong?
I solved it by giving the EndTime a different id.
I have a standard edit form generated when creating a controller index/Edit/Create/Delete views. One of the fields is a date so I have added a demo of Telerik (mainly to have a play) and would like to use the date picker for that field.
The original code is:
<div class="form-group">
#Html.LabelFor(model => model.InstallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.InstallDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.InstallDate, "", new { #class = "text-danger" })
</div>
</div>
Which I have changed to:
<div class="form-group">
#Html.LabelFor(model => model.InstallDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#(Html.Kendo().DatePicker()
.Name("datepicker")
.Value(Model.InstallDate)
.HtmlAttributes(new { style = "width:150px" })
)
#Html.ValidationMessageFor(model => model.InstallDate, "", new { #class = "text-danger" })
</div>
</div>
The date picker renders file however I can't figure out how to pass the value picked back to the controller so it saves it.
How save the date picker value?
Carried on researching and found that I am using the wrong function call. Instead of using #(Html.Kendo().DatePicker() all I actually needed to do was change:
#Html.EditorFor(model => model.InstallDate, new { htmlAttributes = new { #class = "form-control" } })
for
#Html.Kendo().DatePickerFor( model => model.InstallDate)