Render Partial view using jquery get method in asp.net mvc

we learn earlier that How we bind data with HTML dropdown using ajax-jquery-and-asp.net mvc . in this article i will show you how to GET an HTML view using Jquery get method.

You can return a fully HTML view and render it as a partial view in your current page.

ok now lets start work. Create a new aps.net mvc application in visual studio. Add a new controller, name it product controller. Now add fallowing code in product controller class

public ActionResult Categories()
        {
            return View();
        }

Now add view for categories action result.

View Code

<div class="col-lg-12">
    <div class="col-lg-6">
        <h2>Categories</h2>
        <ul>
            <li><a href="#" onclick="LoadCategoryDetails('c#')">C# Programing</a> </li>
            <li><a href="#" onclick="LoadCategoryDetails('Asp')">Asp.net MVC</a></li>
            <li><a href="#" onclick="LoadCategoryDetails('Ado')">Ado.net</a></li>
        </ul>
    </div>
    <div class="col-lg-6">
        <h2>Category Details</h2>
        <div id="CategoryDetails">
            

        </div>
    </div>
</div>

<script>>
    function LoadCategoryDetails(param) {
        if (param != "") {
            $.get('/product/CategoryDetail', { category: param }, function (data) {
                $("#CategoryDetails").html('');
                $('#CategoryDetails').html(data);
            });
        }
    }
</script>>

Category action result code is very simple. ul contain some dummy data, each link contain onclick handler, so when ever link clik LoadCategoryDetails(param) function call

LoadCategoryDetails(param) function take single argument which differentiate which category details required. After that a jquery get method call which fetch data from server and render it on current page.

Now we write our controller action result method which handle this request and return category details according to category.

CategoryDetail Controller ActionResult code

[HttpGet]
        public ActionResult CategoryDetail(string category)
        {
            if (category=="c#")
            {
                return View("Csharp");
            }
            else if (category=="Asp")
            {
                return View("Asp");
            }
            else
            {
                return View("Ado");
            }
        }

Now we add three views in views->Product and write contents according to your need

Csharp category view code

<h2>Csharp</h2>

Asp category view code

<h2>Asp</h2>

Ado category view code

<h2>Ado</h2>

i jsut write heading to distinguish between each view. you can write any kind of html like image etc or bind view with database and then fetch via jquery get method