Load Asp.net MVC Partial View inside a Html DIV via Ajax/Jquery with parameters on Kendo UI Button Click

today i came across a  scenario where i had to load a partial view inside a div tag. this solution might come handy when you have to pass Javascript variables  via Razor Syntax. anyway there is nothing fancy..

Step 1 :  define your  div tag


<div id="DivDataEntry"></div>


Step 2 : Defile your Controller Action and partial view

Controller Action

public ActionResult LoadDataEntryGrid(string Code,string Location,int Year,int Preiod,int LDate)
DateTime testDate = new DateTime(Year, Preiod, LDate); // this is according to requirement.. can not help with that 😉

// call WCF service
DataService.DataServiceClient client = new DataService.DataServiceClient();

var data = client.SelectEmpData(Code, Location, Year, Preiod, testDate);
ViewData["EmpData"] = data;

return PartialView("_LoadDataEntryGrid");

Partial View

@model IEnumerable<MyViewModels.MyViewModel>

<div class="row">

<div class="col-md-12">

<div class="content-box-header panel-heading">

<div class="panel-title ">Leave</div>


<div class="content-box-large box-with-header">
 .Columns(columns =>
 columns.Bound(p => p.aaa).Title("Id");
 columns.Bound(p => p.bbb);
 columns.Bound(p => p.ccc);
 columns.Bound(p => p.ddd);
 columns.Bound(p => p.eee);
 columns.Bound(p => p.fff);
 columns.Bound(p => p.ggg);
 columns.Bound(p => p.hhh);
 columns.Bound(p => p.iii);

 .Pageable(pa => pa.Enabled(false))
 .DataSource(dataSource => dataSource





Step 3: Wire up your events accordingly 

Razor Code

.Content("View Data")
.Events(ev =&gt; ev.Click("BtnViewClick"))


function BtnViewClick() {

var Code = $("#ddlLocation").data("kendoDropDownList").value();</pre>
<pre>var Location= $("#ddlLocation").data("kendoDropDownList").value();</pre>
<pre>var year = parseInt( $("#txtYear").data("kendoNumericTextBox").value()); 
var month = parseInt($("#txtMonth").data("kendoNumericTextBox").value()); 
var day = parseInt($("#txtDay").data("kendoNumericTextBox").value()); 

  type: 'POST', 
   url: '@Url.Action("CheckValidity", "MyControllerName")', // Part of business logic. you may not need to do this. 
   data: { Code: Code, Location: Location, Year: year, Month: month, Day: day }, 
   cache: false, 
   success: function (data) 
    { if (data == true)
     { // we are going to render partial view inside a Div tag // this is the part i wanted to share with you all..
       $("#DivDataEntry").load('@Url.Action("LoadDataEntryGrid", "MyControllerName")?Code=' + Code + '&Location=' + Location + '&Year=' + year + '&Preiod=' + month + '&LDate=' + day); 
error: function ()
 { alert("Error Please Try Again"); }


Cheers !!!


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

This site uses Akismet to reduce spam. Learn how your comment data is processed.