Partial View in MVC

In this article I will explain about basic of, partial view and step for creating and using partial view.

Partial view a is view that is used in the view for specific portion it is reusable in all over the application. It is said to as child view. If we want to use some code multiple time we can use the concept of partial view.

Creating partial view

Go to view folder, right click select add and click view pop will be appeared same as below image gives the name for your partial view and tick on the create as a partial view and then click add. It will return a blank page.

@Html.Partial() –It return partial view in this we pass partial view name

@Html.RenderPartial()- it is same as HTML. Partial but it return void .

Partial view

<div class="panel-footer"> Footer</div>

Index page

 
Using HTML.Partial()
<!DOCTYPE html>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>@ViewBag.Title</title>
    <linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
    <scriptsrc="~/Scripts/jquery-3.1.1.min.js"></script>
    <scriptsrc="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <divclass="container">
        <sectionclass="box">
     <navclass="navbar navbar-inverse">
  <divclass="container-fluid">
    <divclass="navbar-header">
      <aclass="navbar-brand"href="#">Mindstick</a>
    </div>
    <ulclass="nav navbar-nav">
      <liclass="active"><ahref="#">Home</a></li>
      <liclass="dropdown">
        <aclass="dropdown-toggle"data-toggle="dropdown"href="#">Page 1
        <spanclass="caret"></span></a>
        <ulclass="dropdown-menu">
          <li><ahref="#">Page 1-1</a></li>
          <li><ahref="#">Page 1-2</a></li>
          <li><ahref="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><ahref="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
    <div>
             @Html.Partial("Partial")   //calling partial view
 
  @*   
@{
           
Html.RenderPartial("Partial");   //RenderPartial returns void, so a semicolon
is required at the end and so it must be enclosed in the braces.
    }*@
    </div>
      
            </section>
      </div>
 
</body>
</html>

Using HTML.RenderPartial()

<!DOCTYPEhtml>
 
<html>
<head>
    <metaname="viewport"content="width=device-width"/>
    <title>@ViewBag.Title</title>
    <linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
    <scriptsrc="~/Scripts/jquery-3.1.1.min.js"></script>
    <scriptsrc="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <divclass="container">
        <sectionclass="box">
     <navclass="navbar navbar-inverse">
  <divclass="container-fluid">
    <divclass="navbar-header">
      <aclass="navbar-brand"href="#">Mindstick</a>
    </div>
    <ulclass="nav navbar-nav">
      <liclass="active"><ahref="#">Home</a></li>
      <liclass="dropdown">
        <aclass="dropdown-toggle"data-toggle="dropdown"href="#">Page 1
        <spanclass="caret"></span></a>
        <ulclass="dropdown-menu">
          <li><ahref="#">Page 1-1</a></li>
          <li><ahref="#">Page 1-2</a></li>
          <li><ahref="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><ahref="#">Page 2</a></li>
      <li><ahref="#">Page 3</a></li>
    </ul>
  </div>
</nav>
    <div>
             
      @{      
Html.RenderPartial("Partial");   //RenderPartial returns void, so a semicolon
is required at the end and so it must be enclosed in the braces.
    }
    </div>
      
            </section>
      </div>
 
</body>
</html>