CODEWITHSUNDEEP
asp.net-mvcviewmodel
David
David

Reputation: 1570

How do I pass a ViewModel to an Edit Action in ASP.NET MVC 5

I'm learning about using ViewModels to pass information from the view to the controller and vice versa. I have my create action, view, and viewmodel working perfectly but I'm having trouble with the edit one. I get the error:

The model item passed into the dictionary is of type 'CatVM.Models.Cat', but this dictionary requires a model item of type 'CatVM.Models.EditCatViewModel'.

Here is my code:

Controller Method

    // GET: /Cats/Edit/5
    public ActionResult Edit(int? id)
    {
        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Cat cat = unitOfWork.CatRepository.GetByID(id);
        if (cat == null)
        {
            return HttpNotFound();
        }
        return View(cat);
    }

View

@model CatVM.Models.EditCatViewModel

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>


@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<div class="form-horizontal">
    <h4>Cat</h4>
    <hr />
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.ID)

    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Color, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Color)
            @Html.ValidationMessageFor(model => model.Color)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.FurLength, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.FurLength)
            @Html.ValidationMessageFor(model => model.FurLength)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.Size, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.Size)
            @Html.ValidationMessageFor(model => model.Size)
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</div>
}

<div>
@Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}

EditCatViewModel

public class EditCatViewModel
{
    public int ID { get; set; }

    [Required]
    [StringLength(50)]
    public string Name { get; set; }

    [Required]
    [StringLength(50)]
    public string Color { get; set; }

    [Required]
    [StringLength(50)]
    [Display(Name = "Fur Type")]
    public string FurLength { get; set; }

    [StringLength(50)]
    public string Size { get; set; }
}
}

Upvotes: 0

Views: 2156

Answers (2)

Jeroen Vannevel
Jeroen Vannevel

Reputation: 44439

That's because the item you receive from CatRepository.GetByID(id); is of type Cat, not EditCatViewModel.

You can bypass this by constructing a new viewmodel from this object:

Cat cat = unitOfWork.CatRepository.GetByID(id);
var viewModel = new EditCatViewModel {
 Name = cat.Name,
 Color = cat.Color,
 FurLength = cat.FurLength,
 Size = cat.Size
};

return View(viewModel);

Alternatively you could construct implicit or explicit casting methods or use a mapping tool like AutoMapper.

Upvotes: 3

jonas vermeulen
jonas vermeulen

Reputation: 1245

Your return view should be of type CatVM.Models.EditCatViewModel now your returning a Cat

return View(cat);

transform your model in a view model and pass this object back to the view

Upvotes: 1

Related Questions