I am trying to add a placeholder to my text field.
I am fairly new with MVC and only been working on it for the pass month.
My code looks like this:
Branch Hours Description: #Html.NopEditorFor(model => model.Description)
BRHOURID: #Html.NopEditorFor(model => model.BrHourCode)
is it possible to add a place holder for these 2 fields?
You need to add a HTML attribute
Branch Hours Description: #Html.NopEditorFor(model => model.Description, new { #placeholder = "Add Your Placeholder Text Here" } })
and that should do it for you
Related
I don't know how to sum up what I'm trying to do in the title properly! Basically I have created a controller with EF6 and one foreign key of the Client table is MJTopicsID which links to the MJTopics table, a table of 26 topics. In the add and edit view I want the MJTopicsID to be a drop down menu displaying all the topics available however when you select it and click to add or edit an entry it adds it to the Client table as the MJTopicsID foreign key number? How do I go about this so I can apply it to all of my views.
This is the dropdown menu I created in the edit view however it just shows numbers 1-26 and if I change it to the topics variable it doesn't know it as obviously its not in the open model, thanks!
<div class="form-group">
#Html.LabelFor(model => model.MJTopicsID, "MJTopicsID", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("MJTopicsID", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.MJTopicsID, "", new { #class = "text-danger" })
</div>
</div>
If I understood correctly then you want to display some readable value and save some db specific value like foreign key Id in this case.
In the view for helper method "DropDownList" you can give second parameter of type IEnumerable type as a list of your options like this:
View:
#Html.DropDownList("MJTopicsID",
(List<SelectListItem>)#ViewBag.MJTopics,
htmlAttributes: new { #class = "form-control" })
Action:
public ActionResult Index()
{
ViewBag.MJTopics = new List<SelectListItem>() {
new SelectListItem(){Text = "Topic1", Value ="1" },
new SelectListItem(){Text = "Topic2", Value ="2" }
};
return View();
}
SelectListItem has two properties which you can map with your models.
Also you can use your model with "Text" as value to display and "value" as value to use.
Let "topics" is your list model for topics
then you can write it as
topics.Select(
x=> new SelectListItem()
{
Text = x.Id,
value =x.Desc
})
This is the one way of doing it.
I hope it will solve your problem.
I wanted to add an answer if anyone is new to EF6 and is trying to do the same thing.
In the controller for the actionresult you are trying to do this for, so in my case create it will create a viewbag variable this was mine:
ViewBag.MJTopicsID = new SelectList(db.MJTopicss, "ID", "ID");
I changed it to:
ViewBag.MJTopicsID = new SelectList(db.MJTopicss, "ID", "topicalTF");
The topicalTF is the variable for the topics available and this showed all the topics but would save it as the ID, hope this helps!
I am trying to modify a behavior for DataAttributes (Maxlength[int] or StringLength[int]), where it would add a "maxlength" attribute inside (textarea) tag along with its "int" value. I have already performed some research, and the closest answers I obtained were this post and that question.
However, I hope to go one step further.
I already know that StringLength adds "data-val-length-max" and "data-val-length" attributes to the tag.
I spent a lot of time trying to implement solution in JavaScript unobtrusive validation file by using logic
if tag has data-val-length-max attribute
add maxlength attribute to this tag
assign its value equal to data-val-length-max value
However, in my project, Javascript files are constantly loaded/unloaded and it is extremely time-consuming to keep track of the logic flow, so I decided to change the approach, and try to implement it within C#.
Inside my .cshtml file, there are lines like following:
#Html.myLabelFor(model => model.Project.ProjectDescription, new { #title = "Enter a description for this project" })
#Html.TextAreaFor(model => model.Project.ProjectDescription, new { #class = "textfield_Paragraph", #id = "ProjectDescription" })
#Html.ValidationMessageFor(model => model.Project.ProjectDescription)
I learned that it successfully adds maxvalue if it adds #maxlength at the end:
#Html.TextAreaFor(model => model.Project.ProjectDescription, new { #class = "textfield_Paragraph", #id = "ProjectDescription", #maxlength = 50 })
However, I do not want to manually add #maxlenght this line to every TextAreaFor line in solution; I want to turn it into reusable code, that would dynamically perform such action to every variable within TextAreaFor inside the .cs file, which are marked like following:
[MaxLength(50)]
[Display(Name = "Project Description")]
public string ProjectDescription { get; set; }
So I am thinking of implementing it by using the logic
if metadata has a MaxLength flag
htmlAttributes += " ', #maxlength = ' + maxLengthValue"
So, physically it will still be
#Html.TextAreaFor(model => model.Project.ProjectDescription, new { #class = "textfield_Paragraph", #id = "ProjectDescription" })
while the final value that will be loaded will be
#Html.TextAreaFor(model => model.Project.ProjectDescription, new { #class = "textfield_Paragraph", #id = "ProjectDescription", #maxlength = 50 })
I want to know if something like this is even possible to implement, so I know beforehand if I should continue thinking in that direction.
Again, links I have posted above were the closest answers I could get, so I am curious if it is as far as I can get, or there is even more room to improve. My huge preference would be NOT touching .js files unless I absolutely HAVE to.
It seems impossible and I have tried a few different ways to create a select list and bind a value to it.
Firstly, and more desirably, I want to do it with Razor:
#Html.DropDownList("SelectedTemplate", Model.Templates, new { #data_bind = "value: Template()" })
The options are just an array of strings. When I bind with Razor then it's a List of SelectListItem objects with Text and Value equal to the same string.
So it renders like this:
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
When I bind via Knockout then the Templates is an array of strings:
var Templates ='["A", "B", "C"]';
which I generate in the cshtml file:
var Templates ='#Html.Raw(Json.Encode(Model.Templates.Select(x=> x.Value)))';
Both create the same markup in HTML. This renders the select list correctly. Template() prints out the correct value, for example "B". However, the drop down doesn't pick the option that is equal to Template(). I also tried:
<select name="SelectedTemplate" data-bind="value: Template(), options: JSON.parse(Templates)"></select>
Same problem here. And I tried all kinds of variations:
#Html.DropDownListFor(m => m.SelectedTemplate, Model.Templates, new { #class = "form-control layoutTemplateSelector", #data_bind = "value: Template(), options: JSON.parse(Templates)" })
#Html.DropDownListFor(m => m.SelectedTemplate, Model.Templates, new { #class = "form-control layoutTemplateSelector", #data_bind = "value: Template()" })
#Html.DropDownList("SelectedTemplate", Model.Templates, new { #data_bind = "value: Template(), options: JSON.parse(Templates)" })
Ideally, I want to use DropDownListFor because on post back I want m.SelectedTemplate to be processed.
The postback works well so far for DropDownListFor, but on load it doesn't show the data-bind: value:Template(), which definitely contains the correct value.
I also tried your idea to use observable array with no success:
self.SelectedContent({
Template: ko.observable(content.Template()),
TemplateList: ko.observableArray(JSON.parse(Templates))
});
#Html.DropDownListFor(m => m.Form.Template, Model.Templates, new {#data_bind = "value: Template(), options: TemplateList()" })
Any ideas what could be wrong here? I'm using Knockout 2.3 and MC.
UPDATE
I found the error.
The value returned from the database contained a space: "A "
whereas the values binding the to the drop down didn't have that space.
This caused all the errors.
As far as I can see the simplest of implementations works well now:
#Html.DropDownList("SelectedTemplate", Model.Templates, new { #data_bind = "value: Template()" })
Even though it was entirely my mistake, I hope it helps someone in the future. The error wasn't immediately apparent
Could some please convert the following code to a standard html tag? Something like <select id="selectDomain" name="selectDomain">, IF it converts to a select tag.
#Html.DropDownListFor(x => x.domain, Enumerable.Empty<SelectListItem>(), "", new { id = "selectDomain", name = "selectDomain"})
If I understand correctly, doesn't x => x.domain mean id="domain" name="domain"? Is this code overwriting the name and id to selectDomain?
Finally, if it isn't convertible to an html tag, I want to add a class to the given code. I tried adding it inside the new{} like new{id="selectDomain", name="selectDomain", class="form-control"} section but it gave me error saying expected }
You understand correctly if you write:
#Html.DropDownListFor(x => x.domain, Enumerable.Empty<SelectListItem>())
Razor will produce:
<select id="domain" name="domain"> </select>
It's better to use ViewModel and create property selectDomain in it and then:
#Html.DropDownListFor(x => x.selectDomain, Enumerable.Empty<SelectListItem>(), new { #class="form-control" })
Will make html that you want.
But if you don't want to do it you can use Html.DropDownList helper like this:
#Html.DropDownList("selectDomain",Enumerable.Empty<SelectListItem>(), new { #class="form-control" })
note escaped class with # symbol.
You can specify "name" with uppercase first letter (works in MVC5)
#Html.DropDownListFor(x => x.domain, Enumerable.Empty<SelectListItem>(), "", new { id = "selectDomain", Name = "selectDomain"})
result:
<select name="selectDomain" id="selectDomain">
I have a case where I have a page displaying an order and tabs that display the order details. The order details are quite complex and since they are the same layout, I want to use a partial view or editor template that will generate the form.
The problem is the result is multiple duplicate form input id's are generated (one for each order detail. For example, I have:
foreach (var orderDetail in Model.OrderDetils)
{
#Html.EditorFor(model => orderDetail, "WorkOrder", orderDetail)
}
I've read much about this and see solutions where it is recommended to use an editortemplate, but that solution only works when you have the same form to render, but passing it different model properties so the control id's prefixes will differ...ie. like this solution.
In my case, this won't work as the model property I am passing is always the same.
So how else can I create unique Id's in the partial or editor template that will also bind.
I know instead of:
#Html.EditorFor(model => model.WOHdr.Attribute1)
I could do:
#Html.TextBoxFor(model => model.WOHdr.Attribute1, new { id = Model.Id + "_Attribute1" })
But then it won't bind when it passes to the controller.
Thoughts?
Try this
#Html.TextBoxFor(model => model.WOHdr.Attribute1, new { #id = #Model.Id + "_Attribute1" })
Use "#"+dynamic value. Now You will get unique Id's
In EditorFor you can use like this
#Html.EditorFor(model => model.WOHdr.Attribute1, null, "id=" + #Model.Id + "" )
the id will generate like this
id="id_1", id="id_2" and so on..
<input id="Checkbox1_#(test.TestId)" type="checkbox" />
i hope upper code will help you