Why the "FirstOrDefault()" is not required in the <th> rasor code? - asp.net

Question

I'm trying to build a partial view which can add a record at the top and show the list of added items.
I have the following code. Why it's not necessary to add FirstOrDefault() in the <th> part of the html table while I had to do it in the "Add" html form? It seems FirstOrDefault() is always required since the model is IEnurable<>. However, check all the scaffold Index.cshtml files, you will find there is no FirstOrDefault() in the table head.
Is it a better way to implement one edit page for both adding and deleting actions?
#model IEnumerable<Models.MyModel>
#using (Html.BeginForm("AddItem", "MyAction", FormMethod.Post))
{
<div class="editor-label">
#Html.LabelFor(model => model.FirstOrDefault().Col1)
</div>
<div class="editor-field">
#Html.EditorFor(m => m.FirstOrDefault().Col1)
#Html.ValidationMessageFor(m => m.FirstOrDefault().Col1)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.FirstOrDefault().Col2)
</div>
<div class="editor-field">
#Html.EditorFor(m => m.FirstOrDefault().Col2)
#Html.ValidationMessageFor(m => m.FirstOrDefault().Col2)
</div>
<input type="submit" name="Submit" id="Submit" value="Add" />
}
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Col1)
</th>
<th>
#Html.DisplayNameFor(model => model.Col2)
</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Col1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Col2)
</td>
<td>
#Html.ActionLink("Delete", "Delete", new { item.Col1, item.Col2})
</td>
</tr>
}
</table>
Update:
I changed it to #Html.EditorFor(m => (new Model.MyModel()).Col1) and this will not carry the value of the first row in the inserting inputs. This should be one of the solution.

Answer 1

You have to add FirstOrDefault because your model is IEnumerable.
So in order to get an instance you have to get one element from the IEnumerable thus, FirstOrDefault
This presents a problem though, for if the model is null, the page will throw a runtime error when trying to access that property Col1.
In the table, you are iterating over the items in the model therefore you won't need to do FirstOrDefault
I would recommend creating a model that has a property that is the instance that you're looking to bind to.
Example:
public class MyViewModel {
public MyModel MyModel { get; set; }
public IEnumerable<MyModel> MyModels { get;set; }
}
Then:
#model MyNameSpace.MyViewModel
<div class="editor-field">
#Html.EditorFor(m => m.MyModel.Col1)
#Html.ValidationMessageFor(m => m.MyModel.Col1)
</div>

Answer 2

You can Avoid using IEnumerable model in your View.
Model would be something like below.
public class MyModel
{
public string Col1 { get; set; }
public string Col2 { get; set; }
public string Email { get; set; }
public bool IsAdministrator { get; set; }
}
public class MyLstModel:MyModel
{
public IEnumerable<MyModel> lstMyModel { get; set; }
}
View:
#model Models.MyLstModel
#using (Html.BeginForm("AddItem", "MyAction", FormMethod.Post))
{
<div class="editor-label">
#Html.LabelFor(model => model.Col1)
</div>
<div class="editor-field">
#Html.EditorFor(m => m.Col1)
#Html.ValidationMessageFor(m => m.Col1)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Col2)
</div>
<div class="editor-field">
#Html.EditorFor(m => m.Col2)
#Html.ValidationMessageFor(m => m.Col2)
</div>
<input type="submit" name="Submit" id="Submit" value="Add" />
}
<table>
<tr>
<th>
#Html.DisplayNameFor(model => model.Email)
</th>
<th>
#Html.DisplayNameFor(model => model.IsAdministrator)
</th>
<th></th>
</tr>
#foreach (var item in Model.lstMyModel) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.Col1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Col2)
</td>
<td>
#Html.ActionLink("Delete", "Delete", new { item.Col1, item.Col2})
</td>
</tr>
}
</table>