MVC4 Generating Create Form with different view model - forms

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

Answer 1

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"])

Answer 2

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?

Answer 3

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.