Please enable Javascript for better experience...
How to load partial from jquery in MVC
By Big | Aug 25, 2014 | In Articles | Update: Jan 8, 2015 | Total Views [ 1353 ]
Taged In
(2 Like)
Rate

In this article I will try to explain how to load a partial from jquery using controller method in MVC.

Introduction

Some times it needs to load a partial from jquery. In this article I have tried to explain this with the help of a simple example. Let's see this step by step.

Code

In my example I will create a controller, a view, a partial view and will put some jquery code to load my partial view. In jquery I am using two methods - $.aajx() which is used from asynchronous task and $.load() method which is especially made for this purpose. You can any of these method. Let's start with controller.

Controller

I am creating a controller and as usual putting its name as Example. You can put your name. Here is the code for same.

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public PartialViewResult CallPartial(int value)
        {
            return PartialView("_InnerPartial", value);
        }

View

Let's create a simple view. I am using default Index view for this.

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<div id="divPartial"></div>

Partial view

Now let's create a simple partial view and name it as _InnerPartial. Below is the code for the same.

@model int
@{
      <h1>This is a partial view</h1>
    <h3>You passed value=@Model</h3>         
}

Adding Script

Now let's add script to load the partial view. I have put this code on Index view. Here is the code.


<script>
    $(document).ready(function () {
        //you can any method to load your partial.
        AsyncAjaxCallback();
        //AsyncCallback();

    });
    function AsyncCallback() {
        var ctrl = $("#divPartial");
        var url = "/Example/CallPartial";

        if (url && url.length > 0) {
            ctrl.load(url, { value: 45 });
        }

    }

    function AsyncAjaxCallback() {
        $.ajax({
            type:"POST",
            url: "/Example/CallPartial",
            data: { value: 78 },
            success:function(result)
            {
                $("#divPartial").html(result);
            }
        });
    }
   
</script>

Hope this can help you. Use it in your code and enjoy.

Share this

About the Author

Big
Rahul Jha (Big)
Founder, Developer dotnet-concept.com
Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment