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 in MVC


Partial view


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

Index page

 
Using HTML.Partial()
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <section class="box">
     <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mindstick</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">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()


<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <section class="box">
     <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Mindstick</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">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>

Partial View in MVC


You can also check these helpful related post

Working with Partial View in ASP.NET MVC


How to create a partial view in ASP.NET MVC 4


Auto Refresh Partial View in ASP.NET MVC


Crud operation in ASP.NET MVC using Ajax


Calling Partial View Using Ajax in ASP.NET MVC 4


Crud Operations in MVC Using (DB First Approach)


Cascading Dropdown list in ASP.Net MVC

  Modified On Mar-17-2018 04:43:08 AM

Leave Comment