Friday 10 May 2019

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC







Controller Code:

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

namespace WebApplication5.Controllers
{
    public class HomeController : Controller
    {

        db_testEntities db = new db_testEntities();
        public ActionResult Index()
        {
            return View(db.tbl_skills.ToList());
        }


        public JsonResult InsertSkills(List<tbl_skills> skills)
        {


            //Check for
NULL.
            if (skills == null)
            {
                skills = new List<tbl_skills>();
            }

            //Loop and
insert records.
            foreach (tbl_skills s in skills)
            {
                db.tbl_skills.Add(s);
            }
            int insertedRecords = db.SaveChanges();
            return Json(insertedRecords);

        }





        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

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

            return View();
        }
    }
}

View  Code:

@model IEnumerable<WebApplication5.Models.tbl_skills>

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <table id="tblSkills" cellpadding="0" cellspacing="0" class="table table-responsive">
        <thead>
            <tr>
                <th style="width:150px">Skill Name</th>
                <th style="width:150px">Value</th>
                <th></th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td><input type="text" id="txtskills" /></td>
                <td><input type="number" id="txtvalues" /></td>
                <td><input type="button" id="btnAdd" class="btn
btn-success btn-sm" value="Add" /></td>
            </tr>
        </tfoot>
    </table>
    <br />
    <input type="button" id="btnSave" value="Save
All" class="bnt
btn-block btn-success" />

    <br />
    <table class="table table-bordered table-responsive">
        <thead>
            <tr>
                <th style="width:200px">Skill Name</th>
                <th>Value</th>
                <th style="width:200px"></th>
            </tr>
        </thead>
        <tbody>

            @if (Model != null)
            {


                foreach (WebApplication5.Models.tbl_skills c in Model)
                {
                    <tr>
                        <td>@c.skill_name</td>

                        <td>

                            <span class="progress">
                                <span class="progress-bar
progress-bar-striped active" role="progressbar" aria-valuenow="@c.skill_value" aria-valuemin="0" aria-valuemax="100" style="width:@c.skill_value%">
                                    @c.skill_value %
                                </span>
                            </span>


                        </td>
                        <td><input type="button" value="Remove" class="btn
btn-danger btn-sm" onclick="Remove(this)" /></td>
                    </tr>
                }


            }

        </tbody>

    </table>



    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script type="text/javascript">
        $("body").on("click", "#btnAdd", function ()
        {

            var txtskills = $("#txtskills");
            var txtvalues = $("#txtvalues");

            var tBody = $("#tblSkills > TBODY")[0];

            //Add Row.
            var row = tBody.insertRow(-1);

            //Add Name
cell.
            var cell = $(row.insertCell(-1));
            cell.html(txtskills.val());

            //Add Country
cell.
            cell = $(row.insertCell(-1));
            cell.html(txtvalues.val());

            //Add Button
cell.
            cell = $(row.insertCell(-1));
            var btnRemove = $("<input/>");
            btnRemove.attr("type", "button");
            btnRemove.attr("onclick", "Remove(this);");
            btnRemove.attr("class", "btn btn-danger btn-sm")
            btnRemove.val("x");
            cell.append(btnRemove);

            //Clear the
TextBoxes.
            txtskills.val("");
            txtvalues.val("");
        });

        function Remove(button) {
            //Determine the
reference of the Row using the Button.
            var row = $(button).closest("TR");
            var name = $("TD", row).eq(0).html();
            if (confirm("Do you want to delete:
" + name)) {
                //Get the
reference of the Table.
                var table = $("#tblSkills")[0];

                //Delete
the Table row using it's Index.
                table.deleteRow(row[0].rowIndex);
            }
        };

        $("body").on("click", "#btnSave", function ()
        {
            //Loop through
the Table rows and build a JSON array.
            var skills = new Array();
            $("#tblSkills
TBODY TR").each(function ()
            {
                var row = $(this);
                var skill = {};
                skill.skill_name = row.find("TD").eq(0).html();
                skill.skill_value = row.find("TD").eq(1).html();
                skills.push(skill);
            });
            console.log(skills);

            //Send the JSON
array to Controller using AJAX.
            $.ajax({
                type: "POST",
                url: "/Home/InsertSkills",
                data: JSON.stringify(skills),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r)
                {
                    alert(r + " record(s) inserted.");
                    location.reload();
                }
            });
        });
    </script>
</body>
</html>




- 3 comments:
Subscribe to: Posts (Atom)

Pass Dynamically Added Html Table Records List To Controller In Asp.net MVC

Controller Code: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ...