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 923 times, 1 visits today)

Leave a Reply

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