I am using this code but cols=20 keeps getting HTMLed. I have seen other solutions but they do not seem to be using syntax like "new { htmlAttributes = new { etc". I am new to MVC and this syntax was generated by Scaffolding. I do not have the knowledge to change this syntax. I was hoping to just add ', cols = "34"' as per below.
<div class="form-group">
#Html.LabelFor(model => model.SpendDescription, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.SpendDescription, new { htmlAttributes = new { #class = "form-control", cols = "34" } })
#Html.ValidationMessageFor(model => model.SpendDescription, "", new { #class = "text-danger" })
</div>
</div>
The generated HTML is
<textarea id="SpendDescription" rows="2" name="SpendDescription" htmlattributes="{ class = form-control, cols = 34 }" data-val-maxlength-max="200" data-val-maxlength="Must be less than 200 characters." data-val="true" cols="20"></textarea>
Which is obviously wrong as "htmlattributes etc" became a string, 'form-control' did not become a class.
DARN! I just remembered that I changed the scaffolded code of EditorFor to TextAreaFor (a few days back) in order to have a text area. So I bet the code that passes htmlAttributes is wrong.
You have one too many levels of new {} :)
#Html.TextAreaFor(model => model.SpendDescription, new { #class = "form-control", cols = "34" })
should be sufficient.
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.
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 .
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.