MVC Multiple Screen Application and working with multiple table

In Brief:

 Let us now go through the simple multiple screen MVC application. Here the point of learning is how to link multiple tables, multiple screen navigation by making use of HTML Action Link. In previous article we have seen how to making use of Entity frame workand business object to fetch the data from the database.

In Detail:  In this article, I will make use of the entityframework for the data handling and i have taken the scenario of Listing Top mobile phone brands from Electronic Item category.

Above snap shows the database structure. In the green mark shows my intended navigation. Code required only for this navigation's are added here.

 Electronics Item->Mobile Phone brands->Micromax Phones->Canvas Series of Micromax.

  Let us directly proceed by creating the application.  For the basics of adding the Model, Controller and View follow my previousarticles.

Now let us represent above shown table as Model class.

Here it is how it goes.

clsElectronicsItem
using System.ComponentModel.DataAnnotations.Schema;
[Table("tbl_Electronics_Item")]
    public class clsElectronicsItem
    {
         public int Id { get; set; }
         public string itemName { get; set; }
    } 

Here table tbl_Electronics_Item  represented as clsElectronicsItem by using the keyword Table available from namespace. ComponentModel.DataAnnotations.Schema.

clsPhone_Brands
 [Table("tbl_Phone_Brands")]
        public class clsPhone_Brands
        {
            public int Id { get; set; }
            public int idItem { get; set; }
            public string brandName { get; set; }
        }
clsMicromax_Phones
  [Table("tbl_Micromax_Phones")]
    public class clsMicromax_Phones
    {
        public int Id { get; set; }
        public int idBrand { get; set; }
        public int idItem { get; set; }
        public string phoneName { get; set; }
    }
clsMicromax_Canvas
[Table("tbl_Micromax_Canvas")]
    public class clsMicromax_Canvas
    {
        public int Id { get; set; }
        public int idPhone { get; set; }
        public int idBrand { get; set; }
        public string canvasVersion { get; set; }
    }
Context Class
public class ShoppingContext : DbContext
    {
        public DbSet<clsEmployee> cntxtEmployees { get; set; }
        public DbSet<clsElectronicsItem> cntxtElectronicItem { get; set; }
        public DbSet<clsPhone_Brands> cntxtPhoneBrands { get; set; }
        public DbSet<clsMicromax_Phones> cntxtMicromaxPhones { get; set; }
        public DbSet<clsMicromax_Canvas> cntxtMicromaxCanvas { get; set; }
    }

Controller Code:

Now add controller to handle each category. Moving on  ElectronicsItemController controller responsible for respond the request of listing the all the items found in the category of ElectronicsItem. This is as simple as follows.

  public class ElectronicsItemController : Controller
    {

        public ActionResult Index()
        {
            EmployeeContext objContextClass = new EmployeeContext();
            List<clsElectronicsItem> lstElectronicItems = objContextClass.cntxtElectronicItem.ToList();
            return View( lstElectronicItems);
        }
    }

Now the controller to handle the item falls under Mobile phone brands.

public class MobilePhoneBrandsController : Controller
    {
        public ActionResult Index(int electronicItemId)
        {
            EmployeeContext objEmpContxt = new EmployeeContext();
            List<clsPhone_Brands> lstPhoneBrands = objEmpContxt.cntxtPhoneBrands.Where(phone => phone.idItem == electronicItemId).ToList();
            return View(lstPhoneBrands);
        }
    }

To display the Micromax Item, i.e Phone brand id matches with micromax phone id in the controller MicromaxPhonesController.

public class MicromaxPhonesController : Controller
    {
        public ActionResult Index(int phoneBrandId)
        {
            EmployeeContext objEmpContxt = new EmployeeContext();
            List<clsMicromax_Phones> lstMicromaxPhones = objEmpContxt.cntxtMicromaxPhones.Where(micrpmax => micrpmax.idBrand == phoneBrandId).ToList();
            return View(lstMicromaxPhones);
        }

    }

Bellow controller will fetch our favorite latest Micromax canvas phone brands :).

public class MicromaxCanvasPhonesController : Controller
    {
        public ActionResult Index(int micromaxVersionId)
        {
       EmployeeContext objEmpContxt = new EmployeeContext();
       List<clsMicromax_Canvas> lstMicromaxCanvasPhones = objEmpContxt.cntxtMicromaxCanvas.Where(micrpmax => micrpmax.idPhone == micromaxVersionId).ToList();
       return View(lstMicromaxCanvasPhones); 
        }
    }

View Code:

In all the above code (controllers) ready to throw the data object in the form custom list now we will add simple View(.cshtml) to get caught it :).

View to list the Electronic item category.

@using MvcSample.Models;
@model IEnumerable

@{
    ViewBag.Title = "Electronics Items";
}


Electronics Items

    @foreach (clsElectronicsItem objElectronicIem in @Model)
    {
 
        @Html.ActionLink(objElectronicIem.itemName, "Index", "MobilePhoneBrands", new {electronicItemId= objElectronicIem.Id},new {style="text-decoration:none;"})

  
}

[Please avoid the last line in all the view code ]

In the above code as visual studio describes, first argument here is Link text, second and third is  Action method name, Controller name to navigate respectively, fourth argument is routeValue  an argument for Action method and last argument is HTML attribute, like inline style etc.

View to list the all available brands inside selected category,but here selected only for the category of MobilePhone.

@using MvcSample.Models;
@model IEnumerable
@{
    ViewBag.Title = "Top Mobile Phone Brands";
}

Top Mobile Phone Brands
 
    @Html.ActionLink("-- All Electonics Items","Index","ElectronicsItem",null,new {style="text-decoration:none;"})
    

    

    @foreach (clsPhone_Brands objPhoneBrandIem in @Model)
    {
        


        @Html.ActionLink(objPhoneBrandIem.brandName, "Index", "MicromaxPhones", new {phoneBrandId= objPhoneBrandIem.Id},new {style="text-decoration:none;"})

        
    }
        
    
    

View to display the different phones under category micromax. Here back link to All brand added, but here we need to pass electronicItemId as parameter to MobilePhoneBrandController. In code  @Model.First().idItem returns required value, because all the listed items are of same category so first one is taken from the list @model.

@using MvcSample.Models;
@model IEnumerable
@{
    ViewBag.Title = "Micromax Phones";
}

Micromax Phones
 
      @Html.ActionLink("-- All Brands", "Index", "MobilePhoneBrands", new { electronicItemId = @Model.First().idItem },new {style="text-decoration:none;"})
    

    @foreach (clsMicromax_Phones objMicromaxPhone in @Model)
    {
        
 
        @Html.ActionLink(objMicromaxPhone.phoneName, "Index", "MicromaxCanvasPhones",  new {micromaxVersionId= objMicromaxPhone.Id},new {style="text-decoration:none;"}) 
        
    }
        
    
  

Now list the different versions of MicromaxCanvas

@using MvcSample.Models;
@using MvcSample.Models;
@model IEnumerable
@{
    ViewBag.Title = "Different MicromaxCanvas Phones";
}
MicromaxCanvas Phones
 
       @Html.ActionLink("-- All Micromax version", "Index", "MicromaxPhones", new {phoneBrandId=@Model.First().idBrand },new {style="text-decoration:none;"})
    

    @foreach (clsMicromax_Canvas objCanvas in @Model)
    {
        
 @Html.ActionLink( objCanvas.canvasVersion,"",null,new {style="text-decoration:none;"})
    }
    
    

On F5:

Conclusion : As we know Rigidity of building depends on the quality of each single bricks used. I thought this is the one such post that explains one of the MVC fundamental.