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”>
   
Employee_Dept_Detail
</asp:Content>
<
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>

<scriptsrc=“../../Scripts/MicrosoftMvcAjax.js”type=”text/javascript”></script>

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

        }
    </script>
</
asp:Content>

We will have the view at start as follows

image

 

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

Load method has syntax as

$(selector)).load(url,data,function(response,status,xhr))

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

 

image

Hope this will help you.

Thanks

Advertisements
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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: