Introduction:

In this article we will explain how to return partial view from controller action in mvc using jQuery ajax or how to return and render partial view from controller action in mvc Using http post method in JQuery ajax with example.

Description: 

To return a Partial view from the controller action method In Asp.Net MVC

, we can write return type as PartialViewResult and return using PartialView method.

  • Let’s see a demonstration example of PartialViewResult() method 

Index.cshtml:

@{
    Layout = null;
}
 
<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="width=device-width" />
 <title>Reder Partial View</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet" />
   
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $(function(){
        $.ajax({
            type: "POST",
            url: '@Url.Action("ProductList","Home")',
            data: {},
            success: function (viewHTML) {
                $("#ProductList").html(viewHTML);
            },
            error: function (errorData) {alert(errorData) }
        });
        })
    </script>
</head>
<body>
    <div id="ProductList">       
 
    </div>
</body>
</html>


ProductList.cshtml:

@model List<Tutorials.Product>
 
<div class="table-responsive" style="width:500px;">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Product Name</th>
                <th>Model No</th>
                <th>Rate</th>                
            </tr>
        </thead>
        <tbody>
            @foreach(var item in Model)
            {
            <tr>
                <td>@item.ID</td>
                <td>@item.ProductName</td>
                <td>@item.ModelNo</td>
                <td>@item.Rate</td>               
            </tr>
            }
        </tbody>
    </table>
</div>

 

HomeController:

 using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Tutorials.Controllers
{
    public class HomeController : Controller
    {                public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public PartialViewResult ProductList()
        {
            ArticleEntities db=new ArticleEntities ();
            return PartialView(db.Product.ToList());
        }
 
    }
}

 

In the above code, we know that ProductList.cshtml exists in this controller specific folder otherwise we need to specify the complete file name of the view from the root of the application (like "~/Views/Home/ProductList").

Output:

How to Return a partial view from controller action method in ASP.NET MVC

I hope it will help to you.

comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like