Bind WebGrid with dynamic Columns using jQuery AJAX and JSON in ASP.Net MVC

Last Reply 2 months ago By dharmendr

Posted 3 months ago

I have three buttons and a webgrid on my view page. I want to bind webgrid dynamically. On page load, this code is working fine but i want to populate records when specific button is clicked.

//my controller

using SmsMvc.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace SmsMvc.Controllers
    public class ReportController : Controller
        SampleDataModel sdm = new SampleDataModel();

        public JsonResult AssignmentReport()
            string[] columnNames = typeof(Academics.AcademicAssignment).GetProperties().Select(property => property.Name).ToArray();

            List<WebGridColumn> columns = new List<WebGridColumn>();
            columns.Add(new WebGridColumn() { ColumnName = columnNames[1], Header = "Class" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[2], Header = "Stream" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[3], Header = "Section" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[6], Header = "Title" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[7], Header = "Issue Date" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[8], Header = "Deadline Date" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[10], Header = "Description" });

            ViewBag.Columns = columns;
            var resultAssignment = sdm.academicAssignment.ToList();
            return Json(resultAssignment, JsonRequestBehavior.AllowGet);

// my view 

    ViewBag.Title = "AcadmicReport";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: true);

<!DOCTYPE html>


    <title>Report | Assignment</title>


    <div class="row">
        <div class="form-group">
            <div class="col-sm-4">
                <input type="submit" class="btn btn-sm btn-success" onclick="BindAssignment(); return false;" value="Assignment" style="width:100%" />
    <div class="row">
        @if (Model != null)
            @webGrid.GetHtml(htmlAttributes: new { @id = "WebGrid", @class = "table table-striped table-bordered table-hover" }, columns: ViewBag.Columns)
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
        function BindAssignment() {
                url: '/Report/AssignmentReport',
                type: "POST",
                contentType: false,
                processData: false,
                dataType: "JSON",
                data: "",
                success: function (resultAssignment) {
                    var grid = $('#WebGrid').GetHtml();

Posted 2 months ago
Shud says:
 var grid = $('#WebGrid').GetHtml();

You can't assign the dataSource to WebGrid.

To populate the WebGrid using JSON Ajax refer below article.

Populate (Bind) WebGrid from database using jQuery AJAX and JSON in ASP.Net MVC