Skip to main content

Shared View in MVC

Any view that can be used by multiple controllers is known as shared view. It is placed in ‘Views\Shared’ folder. There can be more than one shared view in MVC application.

For example , there are two controllers ‘Customer’ and ‘Agent’. We want to display same Contact view for both controllers. Action method Contact() will be added in both controllers. Since Contact view is same for both controllers so instead of creating separate view for each controller , we will create single view in ‘Views\Shared’ folder. This shared view will be accessible for both Controllers.

I am using same project which was created in article First MVC Application. I am adding 2 controllers Customer and Agent.You can read article First MVC Application for the steps of adding a controller.
Now I am adding Contact() action method in both controller.

Below is the code of both Controllers:

Customer Controller

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

namespace MVCApplication.Controllers
{
public class CustomerController : Controller
{
    // GET: Customer
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult Contact()
    {
        return View();
    }
}
}

Agent Controller

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

namespace MVCApplication.Controllers
{
public class AgentController : Controller
{
    // GET: Agent
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult Contact()
    {
        return View();
    }
}
}

Now right click on Views folder and Add ‘Shared’ Folder:

Right click on Shared folder and add ‘Contact’ view:

Below is the HTML of Contact view:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/umd/popper.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<a class="navbar-brand" href="#">Logixn</a>
<div class="col-8">
<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="/home/index">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/home/about">About</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/home/contact">Contact</a>
    </li>

</ul>
</div>

</nav>
<div class="container-fluid">
<div class="jumbotron">
<p style="font-weight:bold;">Address</p>
<p>Udyog Vihar, Sector 82, Noida<br/>
India</p>
            
</div>
</div>
</body>
</html>

Now press F5, start debugging and test below 2 URLs:

http://localhost:53204/Customer/Contact
http://localhost:53204/Agent/Contact

Both will display same page, it means same Contact view is rendered from ‘Views\Shared’ folder when request comes for Contact() action method of Customer and Agent controller
Below is the output:

Below is the project structure:

You can see that there is no view in ‘Views\Customer’ and ‘Views\Agent’ folder. There is only 1 Contact view in ‘Views\Shared’ folder. When request comes for Contact() action method of Customer controller then after processing action method, MVC framework searches for Contact view inside ‘Views\Customer’ folder, if view is not found there then it searches inside ‘Views\Shared’ folder, it finds Contact view there and its output is rendered to browser. Same process happens for Agent controller.

We can send additional data to be displayed on Contact view by using ViewBag. We can assign data in ViewBag from action methods and data can be retrieved in shared view from ViewBag.