MVC Example for Display Footer or Grand total in webgrid in mvc4

Description:-

            In previous example we already explain that how to create footer toatal or grand total in Gridview in Asp.Net but now        In this Example we explain that how to Display or maintain footer total or grandtotal in Gridview or webgrid with Paging facility in mvc4.

Here is a code for how to maintain or Display Grantotal or Footer total in Webgrid

<script type="text/javascript">

    $(document).ready(function () {

        var total = 0;

      

        $('#grid .Salary').each(function () {

            total = total + parseFloat($(this)[0].innerHTML.toLocaleString());

          

        });

        $('tbody').append('<tr><td><b>Total</b></td><td><b>' + total.toFixed(2) + '</b></td></tr>');

    });

</script>

Look at this above code we use Jaquery for Append the Footer template in webgrid in which function it will read webgrid row one by one and calculate the total of the all rows and finally append to the webgrid as a Footer.

to do this you have to first create the table like below with name poll and create Linqtosql dataclasses in Model folder and drag and drop this table.

 Create Nested Gridview in asp.Net Nested Gridview example

File Upload Example in MVC4 Upload File and bind to Gridview

Read/Write File in asp.net Read/write file using c#

to download complete example click below download image link

footerController:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using  MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

    public class footerController : Controller

    {

        //

        // GET: /footer/

        DataClasses1DataContext dc = new DataClasses1DataContext();

        public ActionResult Index()

        {

            var lst=(from p in dc.polls select p).ToList();

            return View(lst);

        }

        //

        // GET: /footer/Details/5

        public ActionResult Details(int id)

        {

            return View();

        }

        //

        // GET: /footer/Create

        public ActionResult Create()

        {

            return View();

        }

        //

        // POST: /footer/Create

        [HttpPost]

        public ActionResult Create(FormCollection collection)

        {

            try

            {

                // TODO: Add insert logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

        //

        // GET: /footer/Edit/5

        public ActionResult Edit(int id)

        {

            return View();

        }

        //

        // POST: /footer/Edit/5

        [HttpPost]

        public ActionResult Edit(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add update logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

        //

        // GET: /footer/Delete/5

        public ActionResult Delete(int id)

        {

            return View();

        }

        //

        // POST: /footer/Delete/5

        [HttpPost]

        public ActionResult Delete(int id, FormCollection collection)

        {

            try

            {

                // TODO: Add delete logic here

                return RedirectToAction("Index");

            }

            catch

            {

                return View();

            }

        }

    }

}

Create Index.cshtml view in footer Folder

Index.cshtml:-

 

@model IEnumerable<MvcApplication1.Models.poll>

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<style> .Salary{

     color:yellow;

     font:200;

 } </style>

<script src="~/Scripts/jquery-1.7.1.js">

</script>

<script src="~/Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {

        var total = 0;

      

        $('#grid .Salary').each(function () {

            total = total + parseFloat($(this)[0].innerHTML.toLocaleString());

          

        });

        $('tbody').append('<tr><td><b>Total</b></td><td><b>' + total.toFixed(2) + '</b></td></tr>');

    });

</script>

<h2>webgrid - Add row for total</h2>

@{

    var grid = new WebGrid(Model, defaultSort: "Name", rowsPerPage: 5);

}

<div id="grid" >

@grid.GetHtml(tableStyle: "table", footerStyle: "foot",

    columns:

        grid.Columns(

            grid.Column("Name", format: @<text>@item.Name</text>),

            grid.Column("Salary", header: "Salary", format: @<text>@String.Format("{0:0.00}", (decimal)(@item.Salary))</text>, style: "Salary")))

</div>