EditorTemplate not showing as expected?
I have a requirement to dynamically add / remove rows to a Tabel in an MVC 5 app I'm working on. I have also included the knockout in my project as I use it to send back to the calculation of the preliminary form on my view model.
What I've done so far is creating a list in my user model to hold the details of additional users:
public List<AdditionalUser> AdditionalUsers { get; set; }
Additional custom class defined as:
public class AdditionalUser
{
public string FirstName { get; set; }
public string Surname { get; set; }
public double Cost { get; set; }
}
Then I created the EditorTemplates folder and created the _AdditionalUser.cshtml partial view as shown below:
@model MyProject.Models.AdditionalUser
<td>
@Html.TextBoxFor(model => model.FirstName)
</td>
<td>
@Html.TextBoxFor(model => model.Surname)
</td>
<td>
@Html.TextBoxFor(model => model.Cost)
</td>
Where do I need to do this in my user view I did the following:
<tr>
@Html.EditorFor(model => model.AdditionalUsers)
</tr>
The other has view 3. Having done this, then in my controller where I created a new User model, I did:
model.AdditionalUsers = new List<AdditionalUser>(2);
I would think I would create two blank lines in tr where I called EditorFor but nothing is displayed? It was only for my first test to get the EditorTemplate working. I want to then hook this up to a knockout to add and remove rows dynamically, but first I'm wondering why the EditorTemplate doesn't render as expected?
source to share
Your editor template is incorrect. MVC can choose two ways:
By the name
Name the template with the same name as the data type:
DateTime.cshtml
String.cshtml
AdditionalUser.cshtml
Explicit
In your model property, use the attribute UIHint
:
public class MyModel
{
public SomeObject TheObject { get; set; }
[UIHint("SomeObject")]
public SomeObject AnotherObject { get; set; }
}
Also, your code is not entirely correct to get the displayed lines. You must first add the tag tr
to the view:
@model MyProject.Models.AdditionalUser
<tr>
<td>
@Html.TextBoxFor(model => model.FirstName)
</td>
<td>
@Html.TextBoxFor(model => model.Surname)
</td>
<td>
@Html.TextBoxFor(model => model.Cost)
</td>
</tr>
Then change the parent view to something like this (note that I added a table header row for clarity):
<table>
<tr>
<th>@Html.DisplayNameFor(m => m.FirstName)</th>
<th>@Html.DisplayNameFor(m => m.Surname)</th>
<th>@Html.DisplayNameFor(m => m.Cost)</th>
</tr>
@Html.EditorFor(model => model.AdditionalUsers)
</table>
source to share
In your GET action method, you need to return some item to the collection AdditionalUsers
. Try it.
var yourViewModel=new YourViewModel();
var userList = new List<AdditionalUser>();
userList.Add(new AdditionalUser { FirstName ="A"} );
userList.Add(new AdditionalUser{ FirstName ="B"});
yourViewModel.AdditionalUsers =userList();
return view(yourViewModel);
Also your editor template name should be the same as class name which is strongly typed as editor razor template whichAdditionalUser.cshtml
source to share
Here are the rules
1- template name must be the same. in your case it should be ExtraUser.cshtml 2- MVC first looks to see if the EditorTemplates folder exists in the parent folder of the view (which has the name of the controller) then looks in the shared folder.
But in your case @Html.EditorFor(model => model.AdditionalUsers)
will not work as a List type and as far as I know there is no way to do this, so use a foreach loop;
@foreach (var u in model.AdditionalUsers) {
@Html.EditorFor(model => u)
}
must do the trick.
source to share