Home > ASP.NET MVC > ASP.NET # MVC # 8 – Load the content of the DIV on the MVC view through JavaScript function using Ajax and controller.

ASP.NET # MVC # 8 – Load the content of the DIV on the MVC view through JavaScript function using Ajax and controller.

Hi folks,

If you are new to ASP.NET MVC  please visit  ASP.NET MVC Series.

As we are developers we know the importance of the div control on any Web page design.

Today we will see the easy way to load the content of the div on MVC view using JavaScript function and controller.

Suppose we have a view as follow containing the div with ID  “divLoad” containing the  text  “Before Loading”.

As well as there is a button with ID “btnLoad” on client click of it we are calling a JavaScript  method called as LoadTheDiv.

<%@ Page Title=”” Language=”btnLoadC#” MasterPageFile=”~/Views/Shared/Site.Master” Inherits=”System.Web.Mvc.ViewPage<AllInMvc.ViewModels.Employee_Department>” %>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”TitleContent” runat=”server”>
asp:Content ID=”Content2″ ContentPlaceHolderID=”MainContent” runat=”server”>
<%–//Note – For using ajax method following namespaces are very much required –%>

 <script src=”../../Scripts/jquery-1.4.1.min.js” type=”text/javascript”></script>

<script src=“../../Scripts/MicrosoftAjax.js”type=”text/javascript”></script>


    <div id=”divLoad”>
Before Loading
input type=”button” id=”btnLoad” onclick=”LoadTheDiv()” />
script type=”text/javascript”>
LoadTheDiv() {
            $(‘#divLoad’).load(“/Employee/LoadDiv”, { divid: 1 },
                   function (str) {alert(‘success’); });


We will have the view at start as follows



In the JavaScript method above we have used a Ajax function called LOAD.

Load method has syntax as


As written in the aboce JavaScript load method “/Employee/LoadDiv” is a url

{ divid: 1 } is the data and function (str) {alert(‘success’);  is success function.

So it will give call to the LoadDiv method accepting parameter divid on controller Employee

public string  LoadDiv(int divid)

           return “<h1>Div Loaded</h1>”;

The method above is returning the string which will be loaded in the divLoad

and we will have the output as follows



Hope this will help you.


Categories: ASP.NET MVC
  1. October 19, 2011 at 6:56 am

    ashes267 :
    This info helped me a lot .. Thnx very much

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: