Want to use same model twice on same view with different type?

Question

Currently I am working with asp mvc view I want to render data on one view...that have display data and create form on same view but it can not be done..because controller return IEnumerable type data and create form's editorfor does not contain definition for that.

I have one model "T4.Models.Order"

if i use this model as @model IEnumerable<T4.Models.Order>

create form razor syntax shows error

if i use this model as @model T4.Models.Order

display data show's error

Here is my code

@model IEnumerable<T4.Models.Order>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <p>
        @Html.ActionLink("Create New", "Create")
    </p>
    <table class="table table-striped table-bordered" cellspacing="0" width="100%">
     <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.CustomerID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CustomerID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.OrderDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RequiredDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShippedDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipVia)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Freight)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipAddress)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipCity)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipRegion)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipPostalCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.ShipCountry)
            </th>

        </tr>
    </thead>
        @*@{
            IEnumerable<T4.Models.Order> m = @model;
        }*@
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CustomerID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EmployeeID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.OrderDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RequiredDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShippedDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipVia)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Freight)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipCity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipRegion)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipPostalCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.ShipCountry)
            </td>
        </tr>
    }

    </table>
</body>
</html>



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

    <div class="form-horizontal">
        <h4>Order</h4>
        <hr />
        @Html.ValidationSummary(true)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Controller Code:

public ActionResult Index()
{
   return View(db.Order.ToList());
}

Note : I don't want to change anything on controller side.

Do you mix the code for display and create form in one Action method in the controller? I think you should use partial view, call it with `@Html.ActionLink`, and separate create and display Actions in the controller. — stenlytw, Apr 24 '16 at 16:27
i don not want to use any partialview or any change in controller side ..i have to use razor syntax on cshtml..so also i can not use html...please provide me solution if you have...thank you — Shah Niral, Apr 25 '16 at 03:51
Please provide your controller code. It depends on how your code looks right now. http://stackoverflow.com/a/13852500/3387187 — stenlytw, Apr 25 '16 at 04:05
@bounces link you provide that also have partial view solution..as i mention i don't want to use any partial view.. as you mentioned me i update my controller side code also..please see that code... — Shah Niral, Apr 25 '16 at 05:35
Is there only index action in the controller? There's no create action method? — stenlytw, Apr 25 '16 at 07:20

score 0 · Answer 1 · answered Apr 24 '16 at 16:07

If you want to list the existing orders and show the create form in the same view, you should create a new view model which has properties for this. You can inherit this from your existing T4.Models.Order.

public class CreateAndListVm : T4.Models.Order
{
  public List<Order> Orders { set;get;}
  public CreateAndListVm()
  {
    this.Orders = new List<Order>();
  }
}

Now your view will be strongly typed to this view model

@model CreateAndListVm
<h2>New item</h2>
@using(Html.BeginForm())
{
  @Html.TextBoxFor(s=>s.CustomerID)
  <input type="submit" />
}
<h3>Existing orders</h3>
@foreach(var item in Model.Orders)
{
  <p>@item.CustomerID</p>
}

Ofcourse that means, you should send an object of CreateAndListVm from your action method.

public ActionResult Index()
{
  var vm = new CreateAndListVm();
  // to do : Load the orders to vm.Orders;
  return View(vm)
}

If you do not want to change the controller and it is returning a collection of Order to the view, you have another alternative. Don't use the Html helper methods to generate the input form fields. Just write the html code for the input fields yourself.

Assuming your action method is returning a list of Order class

public ActionResult Index()
{
  var orders = new List<Order>();
  return View(orders);
}

Now in your view which is strongly typed to a collection of Order

@model IEnumerable<Order>
<h2>Create</h2>
<form action="Create" method="POST">
  <input type="text" name="CustomerID" />
  <input type="submit" />
</form>
<h3>Existing orders</h3>
@foreach(var item in Model)
{
  <p>@item.CustomerID</p>
}

i did not want to change anything on controller side as i mentioned in note. please provide me solution only on view side. i did not want to use any partial view. can i use "@model IEnumerable" and "@model T4.Models.Order" both or in different wa yon cshtml. — Shah Niral, Apr 24 '16 at 17:56
Thank for your answer @shyju ..you said that not used Htmlhelper but i have to use Htmlhelper...please provide another solution if you have. — Shah Niral, Apr 25 '16 at 03:48
why you have to use the html helper method ? It basically generate input form field markup ( like how you write html code for that) based on model properties. If you cannot use a new view model(like i mentioned in my first part of answer) you should simply create html markup for the form input fields. — Shyju, Apr 25 '16 at 03:52
because i want to perform model validation so for that i don't want use any html..i want use razor syntax..that's why i am confuse...answer you provide me that answers all ready in my mind...but situation is different. — Shah Niral, Apr 25 '16 at 05:30

score 0 · Accepted Answer · answered Apr 25 '16 at 12:33

Just create the object of model class and use to render your form..

Here is the code

@{
    T4.Models.Order o = new T4.Models.Order();
}

Your Form

@using (Html.BeginForm("Create","Orders"))
    {
        @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Order</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => o.CustomerID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => o.CustomerID, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => o.CustomerID, "", new { @class = "text-danger" })
            </div>
        </div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Want to use same model twice on same view with different type?

2 Answers2