ASP MVC - How use two models in one single view

Question

I have a web page that have two task 1) add new products 2) display existing products in a table (refer below image)

enter image description here

also i have two classes for each above task for display existing details and save new product

public class VMProduct
{
    public List<Product>ProductList { get; set; } 
}

public class Product
{
    public String ProductID { get; set; }
    public String ProductName { get; set; }
    public String Uom1 { get; set; }
    public String  Uom2 { get; set; }
    public String ProductCategoryID { get; set; }
}

my problem is i can display data by using VMProduct.ProductList model but how i can save new product items using "product" model ?

how can i use both Models in One view? if i use "product" model's properties in VMProduct model it is duplication codes right?

can anyone have a Solution for this? thanks in advance

Simple. Just create another class that has property of Product and VMProduct. Afterwards, you can supply that class to the view. — Hatjhie, Oct 08 '14 at 15:32
possible duplicate of [Two models in one view in ASP MVC 3](http://stackoverflow.com/questions/5550627/two-models-in-one-view-in-asp-mvc-3) — xDaevax, Oct 08 '14 at 15:35
Also see: http://stackoverflow.com/questions/4764011/multiple-models-in-a-view, http://stackoverflow.com/questions/5763631/multiple-models-in-a-single-view-c-mvc3, http://stackoverflow.com/questions/18002213/asp-mvc-3-two-models-in-one-view — xDaevax, Oct 08 '14 at 15:36
As far as your point about code duplication, you have to balance Single Responsibility (SRP) with DRY. An update unit of work request model (for example: `AddProductRequest`) and a response model (for example: `ProductResults`, which is a `List`) would both be good candidates to add to a single view model passed to the page. The controller action would take the `AddProductRequest` as an argument, send it to the db, then re-select it as a `ProductgResult` and return it to the view via the ViewModel. Properties will be duplicated, but their function is not. — xDaevax, Oct 08 '14 at 15:39

score 0 · Accepted Answer · answered Oct 08 '14 at 15:41

It looks like VMProduct is already a custom view model (I'm mostly guessing by its name), so just add a property to it of the type you need:

public class VMProduct
{
    public List<Product> ProductList { get; set; }
    public Product NewProduct { get; set; }
}

Though, unless I'm misunderstanding something about your UX, this might not even be necessary. The model used to render a view doesn't necessarily need to be the same model received from any given form on that view. So you might continue to render the view using the VMProduct object you have now, and the form for adding a product can still post an instance of Product to the controller action which invokes the add operation. Something like:

public ActionResult Add()
{
    // create your view model
    return View(someVMProduct);
}

[HttpPost]
public ActionResult Add(Product newProduct)
{
    // add the product to the backing data store
    return RedirectToAction("Add");
}

score 0 · Answer 2 · answered Oct 08 '14 at 16:47

Here explained how to implement 2 model in 1 view in MVC 4. Sometimes its required to implement a page where 2 forms exist in a single view (page) like Login & Registration in a same view.

You can get complete tutorial here : http://dotnetawesome.blogspot.com/2013/09/2-model-in-1-view-in-mvc-4.html

Here is the sample code :

A ViewModel Created :

public class UsersLoginRegister
{
    public User User { get; set; }
    public Login Login { get; set; }
}

User Entity

public partial class User
{
    public int UserID { get; set; }
    [Required]
    public string Username { get; set; }
    [Required]
    [DataType(System.ComponentModel.DataAnnotations.DataType.Password)]
    public string Password { get; set; }
    [Required]
    public string FullName { get; set; }
}

Login Entity

 public class Login
{
    [Required]
    public string UserName { get; set; }
    [Required]
    [DataType( System.ComponentModel.DataAnnotations.DataType.Password)]
    public string Password { get; set; }
}

In the view (Html) code :

<table>
<tr>
    <td><b>Login</b></td>
    <td><b>Register</b></td>
</tr>
<tr>
    <td>
        @using (Html.BeginForm("Login", "Home", FormMethod.Post))
        {
            <table>
                <tr>
                    <td>Username : </td>
                    <td>@Html.TextBoxFor(a => a.Login.Username)</td>
                </tr>
                <tr>
                    <td>Password : </td>
                    <td>@Html.EditorFor(a => a.Login.Password)</td>
                </tr>
                <tr>
                    <td></td>
                    <td> <input type="submit" value="Submit" /></td>
                </tr>
            </table>
        }
    </td>
    <td>
        @using (Html.BeginForm("Register", "Home", FormMethod.Post))
        {
            <table>
                <tr>
                    <td>Fullname : </td>
                    <td>@Html.TextBoxFor(a => a.User.FullName)</td>
                </tr>
                <tr>
                    <td>Username : </td>
                    <td>@Html.TextBoxFor(a => a.User.Username)</td>
                </tr>
                <tr>
                    <td>Password : </td>
                    <td>@Html.EditorFor(a => a.User.Password)</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="submit" value="Submit" />
                    </td>
                </tr>
            </table>
        }
    </td>
</tr>

ASP MVC - How use two models in one single view

2 Answers2