This example demonstrates how to use the jQuery.ajax function to load the GridView extension on a callback.
In this example, we handle a button's Click event to call the $.ajax() function. The function sends an AJAX (asynchronous HTTP) request to the GridViewPartial action and renders the action result (GridViewPartial.cshtml) to the div container.
Razor<script type="text/javascript">
function OnClick(s, e) {
$.ajax({
type: "POST",
url: "@Url.Action("GridViewPartial")",
success: function(response) {
$("#container").html(response);
}
});
}
</script>
@Html.DevExpress().Button(settings => {
settings.Name = "MyButton";
settings.Text = "Click Me!!!";
settings.ClientSideEvents.Click = "OnClick";
}).GetHtml()
Files to Look At
- Index.cshtml(VB: Index.vbhtml)
- HomeController.cs (VB: HomeController.vb)
- GridViewPartial.cshtml(VB: GridViewPartial.vbhtml)
Documentation
More Examples
- How to use the GridView extension in Full Screen mode (100% browser Width and Height)
- GridView - How to edit in memory data source
- How to bind GridView to XPO in Server Mode
- How to load MVC extensions using the CallbackPanel extension
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
AjaxSupport/Views/Home/GridViewPartial.cshtml
Razor@Html.DevExpress().GridView(settings => {
settings.Name = "gridView";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
}).Bind(Model).GetHtml()
AjaxSupport/Views/Home/Index.cshtml
Razor<script type="text/javascript">
function OnClick(s, e) {
$.ajax({
type: "POST",
url: "@Url.Action("GridViewPartial")",
success: function(response) {
$("#container").html(response);
}
});
}
</script>
@Html.DevExpress().Button(settings => {
settings.Name = "MyButton";
settings.Text = "Click Me!!!";
settings.ClientSideEvents.Click = "OnClick";
}).GetHtml()
<div id="container" class="container">
</div>
AjaxSupport/Views/Home/Index.vbhtml
Code<script type="text/javascript">
function OnClick(s, e) {
$.ajax({
type: "POST",
url: "/Home/GridViewPartial",
success: function(response) {
$("#container").html(response);
}
});
}
</script>
@Html.DevExpress().Button(Sub(settings)
settings.Name = "MyButton"
settings.Text = "Click Me!!!"
settings.ClientSideEvents.Click = "OnClick"
End Sub).GetHtml()
<div id="container" class="container">
</div>
AjaxSupport/Controllers/HomeController.cs(vb)
C#using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AjaxSupport.Models;
namespace AjaxSupport.Controllers {
public class HomeController : Controller {
public ActionResult Index() {
return View();
}
public ActionResult GridViewPartial() {
return PartialView("GridViewPartial", InMemoryModel.GetDataTableModel());
}
}
}
AjaxSupport/Views/Home/GridViewPartial.vbhtml
Code@Html.DevExpress().GridView(
Sub(settings)
settings.Name = "gridView"
settings.CallbackRouteValues = New With {
Key .Controller = "Home",
Key .Action = "GridViewPartial"
}
End Sub).Bind(Model).GetHtml()