Category Archives: Kendo UI

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

 HTML 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>


<div class="content-box-large box-with-header">
 @(Html.Kendo().Grid((IEnumerable<MyViewModels.MyViewModel>)ViewData["EmpData"])
 .Name("myKendoGrid")
 .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
 .Ajax()
 
 )
 )
 


</div>

</div>

</div>

 

Step 3: Wire up your events accordingly 

Razor Code


@(Html.Kendo().Button()
.Name("btnView")
.Content("View Data")
.Icon("search")
.Events(ev =&gt; ev.Click("BtnViewClick"))
)

 
Javascript

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()); 

$.ajax(
{ 
  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 !!!

Advertisements