how to create a view with multiple models mvc 4?

Question

so i works in asp.net mvc 4 project and i have a problem in my view, what i want is create a view with 2 differnt type of model,first view (Index) take IEnumerable (Models.myModel) the second (subscriber Details) take Models.myModel, this is my Model code :

public class SubscribersModel
{

    [Required]
    [DataType(DataType.Text)]
    public string name { get; set; }

    [Required]
    [DataType(DataType.Text)]
    [StringLength(maximumLength: 10, MinimumLength = 7)]
    public string cin { get; set; }

    [Required]
    [DataType(DataType.Date)]
    public DateTime birthday { get; set; }

    [DataType(DataType.Text)]
    public string birthplace { get; set; }
  }

My controller code :

 public class SubscribersController : Controller
{
    private AgencyDbEntities dbcontext = new AgencyDbEntities();
    private Subscribe sb = new Subscribe();

    public ActionResult Index()
    {
        var subscribers = from sb in dbcontext.Subscribes select new SubscribersModel {      cin = sb.cin, name = sb.name, birthday = (DateTime)sb.birthDay, birthplace = sb.birthPlace   };

        return View(subscribers);
    }

    public ActionResult Details(string id,string cin,string name)
    {
        var subscriber = new SubscribersModel();
        IEnumerable<Subscribe> list = from s in dbcontext.Subscribes select s;
        foreach (var sb in list)
        {
            if (sb.cin == id)
            {
                subscriber.cin = sb.cin;
                subscriber.name = sb.name;
                subscriber.birthday = (DateTime)sb.birthDay;
                subscriber.birthplace = sb.birthPlace;
            }
        }
        return View(subscriber);
    }
 }

My index view :

  @model IEnumerable<_3SDWebProject.Models.SubscribersModel>

@{
    ViewBag.Title = "Subscribers";
}
    <div class="sidebar">
      //here i want to show my details view
     </div>
 <div class="content" style="width: 700px; margin-left: 250px; height: 545px;margin-  top: -30px;">
  <h2>Subscribers</h2>
<p>
     @Html.ActionLink("Create New", "Create")
</p>

 @Styles.Render("~/Content/css")
 <script src="@Url.Content("~/Scripts/Table.js")" type="text/javascript"></script>
 <table class="altrowstable" id="alternatecolor">
 <tr>
    <th>
        CIN
    </th>
    <th>
        Name
    </th>
    <th>
        birthday
    </th>
    <th>
        birthplace
    </th>
     <th class="operations">
        Operations
    </th>
</tr>

 @foreach (var item in Model)
{
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.cin)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.birthday)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.birthplace)
    </td>
    <td>
      @Html.ActionLink("Details", "Details", new { id = item.cin }, new { @class = "details-logo"})
     </td>
</tr>
}

</table>
</div>

my Details view :

@model _3SDWebProject.Models.SubscribersModel

<fieldset>
<legend>SubscribersModel</legend>

<div class="display-label">
     @Html.DisplayNameFor(model => model.name)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.name)
</div>
<div class="display-label">
     @Html.DisplayNameFor(model => model.birthday)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.birthday)
</div>

<div class="display-label">
     @Html.DisplayNameFor(model => model.birthplace)
</div>
<div class="display-field">
    @Html.DisplayFor(model => model.birthplace)
</div>
</fieldset>

so please if someone have any idea or solution i will be very appreciate: NB:this a picture describe what i want enter image description here

A View should be related to one model only. You can combine both models into one and use that combined model in the view. — Flavia
– Flavia, Commented Apr 25, 2013 at 16:15
I would disagree with this. A view can very well , and sometimes must, be related to as many models as needed. This is why I use something I call a 'View Model' (even if it's not absolutly correct), a class in between the models and the view, to build the proper in memory structure, that will be passed to the view. But in no way this can be named a "model". Remember that, if you are using EF Code First, creating a new model "combined" will in fact result in a new table in your database. I doubt that's the goal.... — BernardG
– BernardG, Commented Sep 26, 2013 at 16:01

Ian Mercer · Accepted Answer · 2013-04-25 15:49:18Z

9

Create a new, compound view model that includes both of these view models.

public class CompoundViewModel
{
    public IEnumerable<SubscribersModel> AllSubscribers {get; set;} 
    public SubscribersModel SelectedSubscriber {get; set;}
}

Ideally also split your view into partial views and render these two part of your compound model into them using DisplayFor<> or EditorFor<>. That way you can reuse the view for a 'SubscriberModel' elsewhere in the application if you need it.

Your controller code could also be improved by using a dependency injection framework (e.g. Autofac) to inject those dependencies that you are currently newing up.

Another alternative, given that you are using the same model for the list and the details view, would be to handle this client-side using Javascript, either manually using jQuery or with one of the newer frameworks that allows client-side model binding like Knockout.js or Angular.js.

answered Apr 25, 2013 at 15:49

Ian Mercer

39.4k8 gold badges103 silver badges139 bronze badges

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

1 Comment

Mohammadov Over a year ago

Thanks @lan it works perfectly, i create a class that contains the two model.

Rohrbs · Accepted Answer · 2013-04-25 15:50:50Z

0

You just need to create a second view called Details which is strongly typed with SubscribersModel

@model _3SDWebProject.Models.SubscribersModel

Right-click anywhere in the code for your Details() action
Select Add View...
Leave "Details" for View name
Check "Create a strongly-typed view"
Select your SubscribersModel from the Model class dropdown
Scaffold template: Details
Click "Add"

edited Apr 25, 2013 at 15:50

answered Apr 25, 2013 at 15:44

Rohrbs

1,85513 silver badges11 bronze badges

2 Comments

Mohammadov Over a year ago

i already do it the problem is i can't works with two different models type in the same view

Rohrbs Over a year ago

Whoops, I see the left side of your SS.

Collectives™ on Stack Overflow

how to create a view with multiple models mvc 4?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related