.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!



Home >> Code Snippets >> Ajax >> Post New Resource Bookmark and Share   

 Subscribe to Code Snippets

Post HTML Table data into ASP.Net MVC action

Posted By:Sasi Prabhu       Posted Date: May 05, 2015    Points: 40    Category: Ajax    URL: http://www.dotnetspark.com  

Send the table content into ASP.Net MVC Post Action.
 

Model
    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int Age { get; set; }
        public string Gender { get; set; }
        public string Address { get; set; }
        public string Email { get; set; }
    }


Controller

        public ActionResult ShowEmployee()
        {
            ViewBag.Message = "Your contact page.";

            return View(GenerateEmployee());
        }

        [NonAction]
        public List<Models.Employee> GenerateEmployee()
        {
            var lstEmployee = new List<Models.Employee>();
            for (int i = 0; i < 25; i++)
            {
                lstEmployee.Add(new Models.Employee
                {
                    Address = "Address " + i * i,
                    Age = i * 2,
                    Email = "email" + i * 5 + "@address.com",
                    Gender = i % 2 == 0 ? "Male" : "Female",
                    Id = i,
                    Name = "Name" + i * 10
                });
            }
            return lstEmployee;
        }

        [HttpPost]
        public ActionResult GetEmployee(List<Models.Employee> lstEmployee)
        {
         return View();
        }

View
<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Id)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Age)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Gender)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Address)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Age)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Gender)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Address)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
            </tr>
        }
    </tbody>
</table>
<button id="btnPost">Post Data</button>

Script

 $(function () {
        $('#btnPost').click(function () {

            var tableRow = $('table.table').children('tbody').children('tr');
            var empCollection = $.map(tableRow, function (tr) {
                var td = $(tr).children('td');
                return{
                    Id: td.eq(0).text(),
                    Name: td.eq(1).text(),
                    Age: td.eq(2).text(),
                    Gender: td.eq(3).text(),
                    Address: td.eq(4).text(),
                    Email: td.eq(5).text(),
                };
            });
            var data = { lstEmployee: empCollection };
            $.ajax({
                url:'/Home/GetEmployee',
data: JSON.stringify(data), type: "POST", contentType: 'application/json; charset=utf-8', dataType: "json", success: function (response) { console.log('success response.'); }, failure: function (response) { console.log('failure response.'); } }); return false; }); });

Happy Coding...




     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More code samples in C#, ASP.Net, Vb.Net and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend