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)
Related
I am trying to use a #Html.DropDownList with a custom list. The Problem is when I go to Edit an Entry, It's default is the first item in the list but I would like it to be the value it originally is. When I don't use the Viewbag, It pre selects the item it originally is.
Here is the ViewBag I am using.
ViewBag.AreaEmployeeEdit= db.Areas
.OrderBy(s => s.Site.SiteName)
.Select(s => new SelectListItem
{
Value = s.AreaID.ToString(),
Text = s.Site.SiteName + " " + "||" + " " + s.Area1
});
And here it is in the Edit Form.
<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.AreaEmployeeEdit, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AreaID, "", new { #class = "text-danger" })
</div>
</div>
You were not setting the model for the DropDownList
your edit should be like this
<div class="form-group">
#Html.LabelFor(model => model.AreaID, "Area", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(model => model.AreaID, (IEnumerable<SelectListItem>)ViewBag.AreaEmployeeEdit, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.AreaID, "", new { #class = "text-danger" })
</div>
</div>
I replaced "AreaID" with model => model.AreaID.
Can somebody help me out on how to change width of Edit box in following code? I tried everything but stubborn edit box wont change its width.
<div class="form-group">
#Html.LabelFor(model => model.Category, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Category, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Category, "", new { #class = "text-danger" })
</div>
</div>
Try this- Include style inside html attributes.
#Html.EditorFor(model => model.Category, new { htmlAttributes = new { #class = "form-control", style="width: 10px" } })
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 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() })