I am using MVC4, just wondering, is it possible to update the name attribute of a html helper. I am updating this as the action method is expecting a particular name. I know I can just write raw html, but just want to know if there is an overide in the html helper
I tried this
#Html.TextAreaFor(m => m.noteDetail.NotesDetails, new { #class = "k-textbox", #cols = 100, #rows = 5, id="NotesDetails", name= "NotesDetails" })
but when I look at the generated html
<textarea class="k-textbox" cols="100" data-val="true" data-val-required="The details are required" id="NotesDetails" name="noteDetail.NotesDetails" rows="5"></textarea>
Thanks
You just need a # symbol in front of your name property.
One technique I've found when a submodel is the model that your POST action accepts is to put the HTML that renders the submodel in a partial view that's included in the main view. Have this partial by strongly typed by the submodel and pass the value of the submodel into it. This way, the prefixes won't be generated on the submodel.
#Html.Partial("_NoteDetails", Model.noteDetail)
Then in _NoteDetails.cshtml
#model NoteDetail
#Html.TextAreaFor(m => m.NoteDetails,
new { #class = "k-textbox", cols = 100, rows = 5 });
Hi I think as you pass a viewModel as it contains maybe 2 models that is why you have this name. It does like this for the Binder to construct objects from your Post or Get.
If you change the name then you will maybe perform some custom codes for your binder if you want to pass it again to the controller.
Related
I'm busy with an mvc 5 application. I have a list of names from a database which are displayed in html. I filter the names alphabetically using html.actionlink for A, B, C, D ...Z. Through each html.actionlink I pass through each letter as an Id parameter and then in my controller I filter which names are returned using .ToList() by finding .Where() the first letter of my names match the Id parameter.
That is all working well. What I need to do now is that if there are no names which begin with a certain letter then that letter must be grayed out in the view.
How can I add a class to an html element through my controller? I need to make sure that if there are no names with a certain letter then my html link must have css class with color: grey. I don't know which names there will be because the database is populated by an administrator.
You can define your CSS class and apply your class in html helpers. Like this:
.yourClassName
{
color:grey;
}
Applying your class:
#Html.ActionLink("Name", "{Controller}", null,new { #class ="yourClassName" })
Not too sure I follow the design flow in your question but I think this code may help you.
#if(model.Names.Where(x => x.StartsWith("L").Count() != 0)
{
#Html.ActionLink("L", "{Controller}", "{Action}", null, new {} { #class = "{NOT GRAY}"})
}
#else
{
#Html.ActionLink("L", "{Controller}", "{Action}", null, new {} { #class = "grayed"})
}
Basically, you can write an IF statement in Razor syntax and then check and see if the incoming data is empty by doing a Count and then styling the element differently for each case.
Because I don't know what name you are using for your model, what classes your applying to your not grayed elements, controller names, action names, then you will need to edit to this code to get it to work.
Using ActionLink function you can pass an anonymous object with entries corresponding to Html attributes.
Look at the parameter of type object, called htmlAttributes in the ActionLink function.
Here is an example (note that class is prefixed with # because it is a keyword) :
#Html.ActionLink(
"Portfolio",
"Index",
"Portfolio",
routeValues: null,
htmlAttributes: new { #class = "grayed" }
)
In our MVC 5 project we use Angular. The following Razor works nicely:
#Html.EditorFor(x => x.FirstName,
new { required = "required", ng_model = "FirstName" })
However, if the MVC Model.FirstName is set to "Bob" when the page is rendered, the Input field is still blank.
If I set this in the Angular controller:
$scope.FirstName = "#(Model.FirstName)";
Then "Bob" appears.
My question is: Do I have to set the $scope.VARIABLE=MODEL.VARIABLE for every field in the UI, or can I tell Angular to respect what came over from ASP.NET MVC.
Angular is appearing to over write the [input value="Bob"] that MVC writes.
There is no need to separate the model into individual fields when you bind to scope. Instead you should bind the entire model:
$scope.model = #Html.Raw(Json.Encode(Model));
This would render to the client as:
$scope.model = { FirstName: 'John', LastName:'Doe', etc };
Then you can bind your input fields as:
#Html.EditorFor(x => x.FirstName,
new { required = "required", ng_model = "model.FirstName" })
Personally, I think its cleaner not to use #Html, in favor of simple HTML:
<input ng-model="model.FirstName" required />
In Angular, you don't really need an id anymore.
In my ViewBag there is object that contains Id,First name and Last name. I want to display DropDownList that has Id as value and "First name"+" "+"Last Name" as text.
#Html.DropDownListFor(model => model.Id, new SelectList(ViewBag.person, "Id","Last Name"), new { #class = "form-control" })
This is the line of code that I use currently, how can I modify it to display the right info?
You have to modify your controller and model to send the concatenated text to the View, or create a new SelectList in the View itself that concatenates the values before passing it to the DropdownListFor.
What you are trying to achieve would be possible if SelectList had an overload with a callback for formatting, but this isn't possible.
I got a ViewModel graph with some sub-objects.
This code:
#Html.DropDownListFor(model => model.JobTypeParams.ContactCatalogId, new SelectList(paramz.ContactCatalogues, "Id", "Description"), new { #class = "select2 input-default " })
Generates a Request.Form key/value item with the key of: JobTypeParams.ContactCatalogId.
That's great because that means the MVC Model Binder can correctly map the key/value item to the corresponding field in the view model.
However! This code (using casts)
#Html.DropDownListFor(model => ((AdSyncJobSpecificParameters)model.JobTypeParams).ContactCatalogId, new SelectList(paramz.ContactCatalogues, "Id", "Description"), new { #class = "select2 input-default " })
Generates a Request.Form key/value item with key ContactCatalogId. It loses the JobTypeParams prefix somewhere.
This leads to the modelbinder being unable to bind correct key to correct viewmodel field, and hence the problem.
I do not want to hard-code the ID because of many reasons. So how do you get the HTML Helper to correctly generate they name of the Name/Id attribute ?
It doesn't get them wrong, it's not supposed to do that. You have an incorrect expectation of how lambda's work. You are effectively replacing the old expression, model.JobTypeParams with a single expression of type AdSyncJobSpecificParameters.
What you should be doing is using an editor template.
#Html.EditorFor(model => model.JobTypeParams)
Then, create a AdSyncJobSpecificParameters.cshtml in your EditorTemplates folder and do this:
#model AdSyncJobSpecificParameters
#Html.DropDownListFor(model => model.ContactCatalogId,
new SelectList(paramz.ContactCatalogues, "Id", "Description"),
new { #class = "select2 input-default " })
You'll need to figure out a solution for the SelectList, since it doesn't seem to be part of your model. Maybe as a ViewBag item.
You can also create one for your superclass as well in YourSuperclass.cshtml
#model YourSuperclass
// etc...
I am trying to pass extra attribute 'data_id 'in #HTML.TextBoxFor... but I am getting no result
what I am missing in following code...
#Html.TextBoxFor(model => model._MarkScheme.MarkSchemeId, new { id = "_MarkSchemeId_Input", #class = "ElementMarkingSchemeTitle k1-grid-input k-textbox_3", data_id = #item.ElementID + "EMST"})
Many Thanks
Underscores aren't valid in HTML attribute names so Razor converts it to a hyphen. This will render with a data-id attribute.
HTML 5 data-* attributes are expected to be data_* in ASP.Net MVC view engine to render it.
HTML syntax
<input type="text" data-my-id="5" value="something" />
MVC syntax
#Html.TextBoxFor(model => model.Name, new {data_my_id=#item.ID})
Your case it is data-id