MVC4 Generating Create Form with different view model

Question

First of all if this is a double post, my bad. I feel I tried my best to look for this, and I cannot find it.

What I'm trying to do is create a quick CMS editor. I have an editor page (PageViewModel class) and then, in this case, using that editor as way to create a new page (Page class).

I've been trying to go "by the book" on how to submit data via forms created in MVC 4, which is basically, through the WYSIWYG editor when adding a view and selecting Create. For it to bind the fieldset data, it needs the view model. My problem is that I don't want the form model to be based on the view model. In my scenario, I have a PageViewModel class, and I also have a Page class. Just know that the PageViewModel is composition pattern, which combines a Page with other items.

In the case here, I see everywhere using the @model to generate that content like:

<fieldset>
    <legend>Page</legend>

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

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

How do I have fieldset generate or reference another class type other than the @model, so I can use a different model?

Thanks everyone, Kelly

Fernando Vezzali · Accepted Answer · 2013-11-21 10:24:07Z

2

Kelly,

in your PageViewModel you can have a property that points to another ViewModel, for example:

public class PageViewModel
{
    public Page Content { get; set; }
}

public class Page
{
    public int Id { get; set; }
    public string Foo { get; set; }
}

And then you can create a strongly typed view for "PageViewModel", that will renders a partial view named "Page":

@model MvcApplication2.Models.PageViewModel

@{
    ViewBag.Title = "PageViewModel";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Partial("Page",@Model.Content)

That is the partial view's code, it is strongly typed as well:

@model MvcApplication2.Models.Page

<fieldset>
    <legend>Page</legend>

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

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

You can alternatively also use the ViewData property. In your controller, your code would look like this:

public ActionResult Index()
{
    Page page = new Page();
    ViewData.Add("Page", page);
    return View();
}

And in your view, it is almost the same:

@Html.Partial("Page", ViewData["Page"])

edited Nov 21, 2013 at 10:24

answered Nov 21, 2013 at 9:14

Fernando Vezzali

2,3291 gold badge30 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KellyTheDev Over a year ago

I feel so stupid. It's really a no brainer. I don't know why I didn't think of just referencing the class property. Thanks everyone and thanks Fernando for writing the code. I really appreciate looking at this.

Fernando Vezzali Over a year ago

That is no problem Kelly, we are here to help each other. Sometimes I feel stupid as well, check out the silly question that I made: stackoverflow.com/questions/19316769/…

ps2goat · Accepted Answer · 2013-11-21 04:58:12Z

0

Create a different view that uses your new model, or make the current view take a base version of a model, e.g., an Interface or abstract (virtual) class that the other two models inherit from.

It seems like it may be a lot of work to update two forms, but if you think the two models will vary greatly, it's easier to separate them now then to try to maintain a lot of if-then code in the view later on. If they are relatively similar, why not use the method mentioned above, OR just use the same model?

answered Nov 21, 2013 at 4:58

ps2goat

8,5351 gold badge39 silver badges74 bronze badges

Comments

Anton · Accepted Answer · 2013-11-21 05:00:06Z

0

Look idea is that in your view you can pass model which can be any class containing other classes or so called ViewBag. For example, in your action method you can populate a model and pass it to the view

var model = new MyModel();
model.Text = "";

return View(model);

But if you need to pass something else and more important you don't want to include this in your model then use ViewBag. For example, we pass Title.

ViewBag.Title = "My Page";

Idea is that viewBag is a dynamic generated object so you can add any properties to it and use them in the view later.

@ViewBag.Title

So after submitting a form you will have only model containing a user's text, but not title.

answered Nov 21, 2013 at 5:00

Anton

7314 silver badges5 bronze badges

Collectives™ on Stack Overflow

MVC4 Generating Create Form with different view model

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related