TechnoTips : Part 30 - How to return multiple model to view in asp.net mvc

#Controller Code

using MVCTutorial.Models;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.Mvc;

namespace MVCTutorial.Controllers
{
    public class TestController : Controller
    {

        public ActionResult Index()
        {
            List<ModelA> list_A = new List<ModelA>();
            List<ModelB> list_B = new List<ModelB>();

            list_A.Add(new ModelA { Name = "Ashish" });
            list_A.Add(new ModelA { Name = "John" });
            list_A.Add(new ModelA { Name = "Sara" });


            list_B.Add(new ModelB { Country = "US" });
            list_B.Add(new ModelB { Country = "India" });
            list_B.Add(new ModelB { Country = "UK" });

            ModelC finalItem = new ModelC();
            finalItem.ListA = list_A;
            finalItem.ListB = list_B;
            finalItem.Age = 12;


            return View(finalItem);
        }
    }
}

#ModelA, ModelB and ModelC

// #Model A

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class ModelA
    {
        public string Name { get; set; }
    }
}

//#Model B

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class ModelB
    {
        public string Country { get; set; }
    }
}

//#Model C 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCTutorial.Models
{
    public class ModelC
    {
        public List<ModelA> ListA { get; set; }
        public List<ModelB> ListB { get; set; }
        public int Age { get; set; }
    }
}

# View Page (Index.cshtml)

@model MVCTutorial.Models.ModelC
@{
     ViewBag.Title = "Index";
    // Layout = null;
}

<div class="panel panel-body"style="min-height:256px">

    <div class="col-md-3">

        <div class="thumbnail">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Director Message</h3>
                </div>
            </div>
            <img src="~/Content/Images/director1.jpg" alt="..." style="margin-top:-20px">
            <div class="caption">
                <h3>Ashish Tiwary</h3>
                <p>&para; Have faith in us, We will give you full satisfaction by providing best service. &para;</p>
                <p><a href="#" class="btn btn-primary" role="button">See more</a> </p>
            </div>
        </div>   

    </div>
    <div class="col-md-9">
       <h4>@Model.Age</h4> 

        @if (Model != null)
        { 
           <div class="col-md-6">
               
               <ul class="list-group">
                   @foreach (var name in Model.ListA) { 
                   
                   <li class="list-group-item">@name.Name </li>
                   
                   }

               </ul>

           </div>
        <div class="col-md-6">
           
            <ul class="list-group">
                @foreach (var country in Model.ListB)
                {

                    <li class="list-group-item">@country.Country </li>

                }

            </ul>

           </div>
        }


    </div>

</div>

All Code Factory

2 comments:

RANJITH REDDY said...: Hi your article is very much helpful how to display the data inside a table; August 29, 2017 at 7:34 AM
Unknown said...: Hello Ashish,

Thanks for the tutorial, can you please help me with the same tutorial using database for loading Model with Values.; March 15, 2019 at 6:38 PM

TechnoTips

Labels

Sunday, January 22, 2017

Part 30 - How to return multiple model to view in asp.net mvc

2 comments: