Example of JSON data binding into html table in MVC


Data Binding with json in HTML table and filter data using AJAX in Mvc

Binding data into HTML table using json 

Here I am going to present how to bind a JSON data to html table in MVC. Then load dynamically based on dropdown selected item. This filter the data from JSON and binds to the UI.  Here I am using asynchronous call using AJAX.Beginform() which does not send refresh the full page. It only refreshes specific part of the page.  BeginForm() method is an extension method of AjaxHelper classed. It works with asynchronously using JavaScript.

Example to bind the table with json data then filter with Ajax :

Fig 1: Data with full recordset :

 

Fig 2 : Message after clicking on submit data: 

Fig 3 : After selecting from dropdown then click on submit: 


Here is the definition of Model Class : Model/Modelcodefile.cs

 

using System;

using System.ComponentModel.DataAnnotations;

namespace DotNetMindsWebBlogPost

{

    public class Appointment

    {

        public string ClinicName { get; set; }

        [DataType(DataType.Date)]

        public DateTime Date { get; set; }

        public bool TermsAccepted { get; set; }

    }

 

}

Some recommended book on MVC/Jquery/AngularJS:

Building Single Page App With ASP.NET MVC 5 and Angular

https://ws-in.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B00TQXRQKY&Format=_SL160_&ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dotnetmindsco-21

AngularJS - Up and Running 2e

http://ws-in.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=1491901942&Format=_SL160_&ID=AsinImage&MarketPlace=IN&ServiceVersion=20070822&WS=1&tag=dotnetmindsco-21

 

Here is the definition controller class :Controller/HomeController.cs

Here I am implicitly creating an appointment data  in the form JSON, and sending the data to the view.

By default , All as id will be selected and it will return all the data to the UI and then you can filter based on user wise . Here I am iterating the json data and binding to table during ajax request.

Like this:

for (var i = 0; i <data.length; i++) {

            target.append('<tr><td>' + data[i].ClinicName + '</td><td>' +readableDate( data[i].Date) + '</td></tr>');

        }

Below are the Controller Definition: 

using DotNetMindsWebBlogPost;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web.Mvc;

 

namespace DotNetMindsWebBlogPost.Controllers

{

    public class HomeController : Controller

    {    

        public ActionResult Index()

        {

            return View();

        }

 

        [HttpPost]

        public ActionResult Index(string id)

        {

            return View((object)id);

        }

 

        public ActionResult AppointmentInfo(string id)

        {

       

            var data = GetAppointments();

            if(!string.IsNullOrEmpty(id) && id!="All")

            {

                data = data.Where(m => m.ClinicName == id);

            }

            if (Request.IsAjaxRequest())

            {

                return Json(data, JsonRequestBehavior.AllowGet);

            }

            else

            return View(data);

 

        }

        

        [NonAction]

        IEnumerable<Appointment> GetAppointments()

        {

            IEnumerable<Appointment> data = new[] {

            new Appointment { ClinicName = "Bikash", Date =  DateTime.ParseExact("01/01/2016","dd/MM/yyyy",null)},

            new Appointment { ClinicName = "Bikash", Date = DateTime.ParseExact("01/01/2016","dd/MM/yyyy",null)},

            new Appointment { ClinicName = "Bikash", Date = DateTime.ParseExact("03/01/2016","dd/MM/yyyy",null)},

            new Appointment { ClinicName = "Anup", Date = DateTime.ParseExact("04/01/2016","dd/MM/yyyy",null)},

            new Appointment { ClinicName = "Anup", Date = DateTime.ParseExact("05/01/2016","dd/MM/yyyy",null)},

            new Appointment {ClinicName = "Kapil", Date = DateTime.ParseExact("06/01/2016","dd/MM/yyyy",null)},

            new Appointment {ClinicName = "Kapil", Date = DateTime.ParseExact("07/01/2016","dd/MM/yyyy",null)}

        };

            return data;

        }

    }

}

 

 

Here is the definition of View: View/Index.cshtml

When page is loading first time that time it will fetch all the appointment record . You can observe that div block is within Ajax.BeginForm(ajx). Here ajx is AjaxOption data which says UpdateTargetID ,URL, LoadingElementID, LoadingElementDuration and OnBegin and OnSuccess method.

 

For detail please see below code in details:

//--------------------------------------------------------------------------------------------------------------

@model string

 

@{

    ViewBag.Title = "Index";

    AjaxOptions ajx = new AjaxOptions

    {

        UpdateTargetId = "myData",

        Url = Url.Action("AppointmentInfo"),

        LoadingElementId = "loadMe",

        LoadingElementDuration = 2000,

        OnBegin = "CallBegin",

        OnSuccess = "OnSuccess"

    };

}

 

<div id="loadMe" style="display: none; color: red; font-weight: bold">

    <p>Fetching Data</p>

</div>

@using (Ajax.BeginForm(ajx))

{

    

    <div class="content-wrapper">

        <h2>Appointment Details</h2>

        <table class="table" style='width: 50%; table-layout: fixed; font-size: 1.4em;'>

            <thead>

                <tr>

                    <th>Client Name</th>

                    <th>Appointment Data</th>

                </tr>

            </thead>

            <tbody id="myData">

                @Html.Action("AppointmentInfo", new { id = Model })

            </tbody>

        </table>

        <p>

            <div class="table-dashed ">

                @Html.DropDownList("id",

                    new SelectList(

                        new[] { "All", "Bikash", "Anup", "Kapil" }, (Model ?? "All")))

            </div>

        </p>

        <input type="submit" value="submit" />

    </div>

}

<div class="content-wrapper">

    @foreach (string str in new[] { "All", "Bikash", "Anup", "Kapil" })

    {

        <div style="float: left; font-size: 1.4em; display: block;">

            @Ajax.ActionLink(str, "Index", new { id = str }, new AjaxOptions

           {

               UpdateTargetId = "myData",

               Url = Url.Action("AppointmentInfo", new { id = str })

           })

        </div>

    

    }

</div>

@section scripts{

    <script>

        function CallBegin() {

            alert("Hi Mr. Anup");

        }

        function OnSuccess(data) {

            var target = $("#myData");

            target.empty();

            for (var i = 0; i < data.length; i++) {

                target.append('<tr><td>' + data[i].ClinicName + '</td><td>' + readableDate(data[i].Date) + '</td></tr>');

            }

        }

        function readableDate(jsDt) {

            var date = new Date(parseInt(jsDt.substr(6)));

            return (date.getMonth() + 1) + '/' + date.getDate() + '/' + date.getFullYear();

        }

    </script>

}

 


Recommended Book for MVC : List of Some Important books for .NET Framework, C#, MVC, WCF



(Visited 548 times, 1 visits today)

Leave a Reply

Your email address will not be published. Required fields are marked *