Asp.net-mvc – ASP.NET MVC Strongly-Type ViewModel – Combine Create/List Views

asp.net-mvcrazorviewmodel

I am learning ASP.NET MVC and Entity Framework Code First, LINQ by creating a simple Bug/Feature tracking system. I would like to mimic the Twitter interface by having the user submit a form above and having the submitted content appear below. I am not sure how to structure the strongly-typed view and the said model. I would like to merge my Create and Index views into a single view, the problem is the Create takes a single type Entry (Pylon.Models.Entry), while the Index takes IEnumerable of Entry (IEnumerable<Pylon.Models.Entry>). Below is my viewmodel class and Display view. I simply copied the code generated by scaffolding from the "Create" and "Index" views obviously mixing the different models causes run-time errors so the view is broken. My question is how do I restructure the view.

// Entry ViewModel
public class EntryViewModel
{
    public Entry Entry { get; set; }
    public IEnumerable<Entry> Entries { get; set; }
}

@* Display View *@

@model ?

@{
    ViewBag.Title = "Display";
}

<hr />

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Entry</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Description)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Description)
            @Html.ValidationMessageFor(model => model.Description)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.OpenDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OpenDate)
            @Html.ValidationMessageFor(model => model.OpenDate)
        </div>

        <div class="editor-label">
            Paradigm
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.ParadigmId, ((IEnumerable<Pylon.Models.Paradigm>)ViewBag.PossibleParadigms).Select(option => new SelectListItem
        {
            Text = (option == null ? "None" : option.Name),
            Value = option.ParadigmId.ToString(),
            Selected = (Model != null) && (option.ParadigmId == Model.ParadigmId)
        }), "Choose...")
            @Html.ValidationMessageFor(model => model.ParadigmId)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

<hr />

<table>
    <tr>
        <th></th>
        <th>
            Description
        </th>
        <th>
            OpenDate
        </th>
        <th>
            Type
        </th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @item.Description
        </td>
        <td>
            @String.Format("{0:d}", item.OpenDate)
        </td>
        <td>
            @(item.Paradigm == null ? "None" : item.Paradigm.Name)
        </td>
    </tr>
}

</table>

Any pointers or better yet tutorials/working code would be great.

Best Answer

Do the following changes.

  1. set @model EntryViewModel at top of the view.
  2. For create form, change model => model.Description to model => model.Entry.Description, so model is replaced with model.Entry
  3. For listing template, do the following change. @foreach (var item in Model.Entries )
Related Topic