Lesson 8 | C# Online Compiler

Lesson 8 by Lonagi

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
	public class SampleViewModel
	{
		public string Name;
		public string Email;
		public string Address;
		public string Department;
		public short _page;
		
		public List<SampleViewModel> GetData()
		{
			List<SampleViewModel> sampleList=new List<SampleViewModel>();
			sampleList.Add(
			new SampleViewModel()
			{
				Name="Amit",
				Email="Amit@test.com",
				Address="MyAdress",
				Department="Dep",
				_page=1
			});
			sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=1 });
			sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=2 });
			sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=3 });
			sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=3 });
			return sampleList;
		}
	}
}

Model

​x
 
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public string Name;
        public string Email;
        public string Address;
        public string Department;
        public short _page;
        
        public List<SampleViewModel> GetData()
        {
            List<SampleViewModel> sampleList=new List<SampleViewModel>();
            sampleList.Add(
            new SampleViewModel()
            {
                Name="Amit",
                Email="Amit@test.com",
                Address="MyAdress",
                Department="Dep",
                _page=1
            });
            sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=1 });
            sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=2 });
            sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=3 });
            sampleList.Add( new SampleViewModel() { Name="Ram", Email="Ram@test.com", Address="MyAdress2", Department="Dep2", _page=3 });
            return sampleList;
        }
    }
}

@model HelloWorldMvcApp.SampleViewModel
@{
	Layout = null;
}

<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
	
	<div class="container">
		<h1>User home</h1>
		<div class="row">
			<div class="col-md-12">
				<table class="table table-striped">
					<thead>
						<th>Name</th>
						<th>Email</th>
						<th>Address</th>
						<th>Department</th>
					</thead>
					<tbody id="tblData">
					
					</tbody>
				</table>
			</div>
			
			<div class="col-md-12">
				<div id="pageContainer">
					<nav class="navbar navbar-expand-sm">
						<ul class="navbar-nav" id="menu"></ul>
					</nav>
				</div>
			</div>
			
		</div>
	</div>
	
<script>
	var html="";
	var pHtml="";
	var i=0;
	var j=0;
	var m=0;
	var _currentPage=1;
	var totalPages=0;
	var GlobalData;
	var globalPageCount=0;

	$(function(){
		getResult(_currentPage);
	});
	
	function getResult(_currentPage)
	{
		$.ajax({
			type:'GET',
			url: '@Url.Action("BindTable","Home")',
			contentType:'application/json',
			dataType: 'json',
			data: {_currentPage:_currentPage},
			success: function(data)
			{
				GlobalData=data;
				globalPageCount=data.pageCount;
				CreatePages(globalPageCount);
				populateTable(_currentPage);
			},
			error: function(){alert("error")}
		});
	}
	
	function populateTable(_currentPage)
	{
		html='';
		$("#tblData").empty();

		var dataItemArray = $.grep(GlobalData.data, function(v) {return v._page===_currentPage;});

		for(var i=0; i < dataItemArray.length; i++)
		{
			html = html + "<tr><td>"+dataItemArray[i].Name+"</td><td>"+dataItemArray[i].Email+"</td><td>"+dataItemArray[i].Address+"</td><td>"+dataItemArray[i].Department+"</td></tr>";
		}

		$("#tblData").append(html);
		CreatePages(globalPageCount);
		$("#pageItem_"+_currentPage).removeAttr("href");
	}
	
	function CreatePages(count)
	{
		i=Math.floor(count/2);
		j=count%2;
		totalPages=i+j;
		pHtml='';

		$("#menu").empty();
		for(var k=0; k<totalPages; k++)
		{
			pHtml = pHtml + "<li class='nav-item'><a id='pageItem_"+(k+1)+"' class='nav-link' href='#' onclick='ChangePage("+(k+1)+")'>"+(k+1)+"</a></li>";
		}

		$('#menu').append(pHtml);
	}
	
</script>
	
</body>
</html>

View

 
@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}
​
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    
    <div class="container">
        <h1>User home</h1>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Department</th>
                    </thead>
                    <tbody id="tblData">
                    
                    </tbody>
                </table>
            </div>
            
            <div class="col-md-12">
                <div id="pageContainer">
                    <nav class="navbar navbar-expand-sm">
                        <ul class="navbar-nav" id="menu"></ul>
                    </nav>
                </div>
            </div>
            
        </div>
    </div>
    
<script>
    var html="";
    var pHtml="";
    var i=0;
    var j=0;
    var m=0;
    var _currentPage=1;
    var totalPages=0;
    var GlobalData;
    var globalPageCount=0;
​
    $(function(){
        getResult(_currentPage);
    });
    
    function getResult(_currentPage)
    {
        $.ajax({
            type:'GET',
            url: '@Url.Action("BindTable","Home")',
            contentType:'application/json',
            dataType: 'json',
            data: {_currentPage:_currentPage},
            success: function(data)
            {
                GlobalData=data;
                globalPageCount=data.pageCount;
                CreatePages(globalPageCount);
                populateTable(_currentPage);
            },
            error: function(){alert("error")}
        });
    }
    
    function populateTable(_currentPage)
    {
        html='';
        $("#tblData").empty();
​
        var dataItemArray = $.grep(GlobalData.data, function(v) {return v._page===_currentPage;});
​
        for(var i=0; i < dataItemArray.length; i++)
        {
            html = html + "<tr><td>"+dataItemArray[i].Name+"</td><td>"+dataItemArray[i].Email+"</td><td>"+dataItemArray[i].Address+"</td><td>"+dataItemArray[i].Department+"</td></tr>";
        }
​
        $("#tblData").append(html);
        CreatePages(globalPageCount);
        $("#pageItem_"+_currentPage).removeAttr("href");
    }
    
    function CreatePages(count)
    {
        i=Math.floor(count/2);
        j=count%2;
        totalPages=i+j;
        pHtml='';
​
        $("#menu").empty();
        for(var k=0; k<totalPages; k++)
        {
            pHtml = pHtml + "<li class='nav-item'><a id='pageItem_"+(k+1)+"' class='nav-link' href='#' onclick='ChangePage("+(k+1)+")'>"+(k+1)+"</a></li>";
        }
​
        $('#menu').append(pHtml);
    }
    
</script>
    
</body>
</html>

using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		
		public ActionResult Index(){
			return View();
		}
		
		[HttpGet]
		public JsonResult BindTable(int _currentPage)
		{
			SampleViewModel model = new SampleViewModel();
			List<SampleViewModel> lstModel=new List<SampleViewModel>();
			lstModel=model.GetData();
			
			return Json(new {success=true,data=lstModel,pageCount=lstModel.Count()},
			JsonRequestBehavior.AllowGet);
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
using System.Linq;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        
        public ActionResult Index(){
            return View();
        }
        
        [HttpGet]
        public JsonResult BindTable(int _currentPage)
        {
            SampleViewModel model = new SampleViewModel();
            List<SampleViewModel> lstModel=new List<SampleViewModel>();
            lstModel=model.GetData();
            
            return Json(new {success=true,data=lstModel,pageCount=lstModel.Count()},
            JsonRequestBehavior.AllowGet);
        }
    }
}
​

View in Full Screen

View IL Code