This the html page that not work the problem with NewspostedDate
<div class="form-group">
#Html.LabelFor(model => model.NewsPostedDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewsPostedDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NewsPostedDate, "", new { #class = "text-danger" })
</div>
</div>
instead of Editorfor you can use TextBoxfor.
try this
#Html.TextBoxFor(m => m.NewsPostedDate, new { #class = "form-control date-picker" })
$('.date-picker').datepicker({ format: "yyyy/mm/dd", autoclose: true })
Note:
Good approach first load you css file , then load javascript/jquery . because user first see you UI , then interact with your UI
Looks like your Editorfor is missing the class "NewsPostedDate" or perhaps you mean to refer directly to the element so it should be:
jQuery('#NewsPostedDate').datetimepicker({ format: 'DD/MM/YYYY' });
Note the # instead of the .
Related
My goal is to create many similar views that will differ only in the list of fields that they present. For example, many Create views for different models and different sets of fields. The following is a snippet from a scaffolded Create.cshtml page:
<div class="form-group">
#Html.LabelFor(model => model.NameText, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NameText, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NameText, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.NameDefinition, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NameDefinition, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NameDefinition, "", new { #class = "text-danger" })
</div>
</div>
<div class ="form-group">
#Html.LabelFor(model => model.NameComment, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NameComment, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.NameComment, "", new { #class = "text-danger" })
</div>
</div>
My understanding is that Partial Views can add above, below and among the <div class="form-group"> . . . </div> code blocks. But I am not aware of its capability to consume a reference to a model attribute (e.g., NameText) and then to wrap it with the code block.
Also my understanding is that the #Helper directive was removed from Razor (MVC 6) and it was not given any simple replacement.
I have already placed both the part of code that precede the above snippet and the part of code that follows it into a single partial view. With a little trick the two parts of code are merged around the above snippet, then everything is sent to the browser. But I need more than that. How can I avoid also the repetition of code in the above snippet?
What I would like to have:
Many similar views that would differ only regarding to the list of fields
Strong typing
Single point of maintenance for the code that is common for many views
And as a side note: how should I had to search in order to find the answer myself?
A blog by Peter Vogel, Building a Useful HTML Helper for ASP.NET MVC Views provides just what I was looking for.
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 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() })
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)