Update record in HTML Table using jQuery Ajax in ASP.Net MVC

Sowmia

SOLVED CLOSED ACTIVE ANSWERED
User: Sowmia
Posted: on Sep 17, 2018 12:50 AM
Forum: ASP.Net MVC
Answer: 1
Views: 17558
Sample Code: Download

Hello Everyone,

I am using a HTML table binded with SQL database server using MVC

I want to carry my HTML table data to be stored in Database for that I am using JSON

MY DB header is inserted as ,

first_name,last_name,first_school

I am displaying my header in HTML table as,

FIRST NAME, LAST NAME, FIRST SCHOOL

on JSON.stringify

 [HttpPost]
 public ActionResult UpdateCustomer(Customer customer)
 {
     using (CUSTOMEREntities entities = new CUSTOMEREntities())
     {
     Customer updatedCustomer = (from c in entities.Customers
                                 where c.CustomerId == customer.CustomerId
                                 select c).FirstOrDefault();
     updatedCustomer.Name = customer.Name;
     updatedCustomer.Country = customer.Country;
     entities.SaveChanges();
 }

 return new EmptyResult();
 }

data: '{customer:' + JSON.stringify(customer) + '}',

I am receving the json result with the name i mentioned in HTML table so in my controller the values are not fetched since the Table headers are not matching.

How to solve this any alternate solutions?

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Sep 17, 2018 04:46 AM
Modified: on Sep 17, 2018 04:48 AM
Report

Hi Sowmia,

Check this example. Now please take its reference and correct your code.

SQL

CREATE TABLE StudentsDetail
(
	ID INT IDENTITY PRIMARY KEY,
	first_name VARCHAR(20),
	last_name VARCHAR(20),
	first_school VARCHAR(50)
)

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        StudentEntities entities = new StudentEntities();
        List<StudentsDetail> customers = entities.StudentsDetails.ToList();
        customers.Insert(0, new StudentsDetail());
        return View(customers);
    }

    [HttpPost]
    public ActionResult UpdateStudent(StudentsDetail studentsDetail)
    {
        using (StudentEntities entities = new StudentEntities())
        {
            StudentsDetail updatedStudent = (from c in entities.StudentsDetails
                                                where c.ID == studentsDetail.ID
                                                select c).FirstOrDefault();
            updatedStudent.first_name = studentsDetail.first_name;
            updatedStudent.last_name = studentsDetail.last_name;
            updatedStudent.first_school = studentsDetail.first_school;
            entities.SaveChanges();
        }

        return new EmptyResult();
    }
}

View

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<_818685_Json_Update.StudentsDetail>>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            if ($("#tblStudents tr").length > 2) {
                $("#tblStudents tr:eq(1)").remove();
            } else {
                var row = $("#tblStudents tr:last-child");
                row.find(".Edit").hide();
                row.find("span").html('&nbsp;');
            }

            $("#tblStudents .Edit").on("click", function () {
                var row = $(this).closest("tr");
                $("td", row).each(function () {
                    if ($(this).find("input").length > 0) {
                        $(this).find("input").show();
                        $(this).find("span").hide();
                    }
                });
                row.find(".Update").show();
                row.find(".Cancel").show();
                $(this).hide();
            });

            $("#tblStudents .Update").on("click", function () {
                var row = $(this).closest("tr");
                $("td", row).each(function () {
                    if ($(this).find("input").length > 0) {
                        var span = $(this).find("span");
                        var input = $(this).find("input");
                        span.html(input.val());
                        span.show();
                        input.hide();
                    }
                });
                row.find(".Edit").show();
                row.find(".Cancel").hide();
                $(this).hide();
                var student = {};
                student.ID = row.find(".Id").find("span").html().trim();
                student.first_name = row.find(".FirstName").find("span").html().trim();
                student.last_name = row.find(".LastName").find("span").html().trim();
                student.first_school = row.find(".School").find("span").html().trim();
                $.ajax({
                    type: "POST",
                    url: "/Home/UpdateStudent",
                    data: student,
                    dataType: "json"
                });
            });

            $("#tblStudents .Cancel").on("click", function () {
                var row = $(this).closest("tr");
                $("td", row).each(function () {
                    if ($(this).find("input").length > 0) {
                        var span = $(this).find("span");
                        var input = $(this).find("input");
                        input.val(span.html());
                        span.show();
                        input.hide();
                    }
                });
                row.find(".Edit").show();
                row.find(".Update").hide();
                $(this).hide();
            });
        });
    </script>
</head>
<body>
    <table id="tblStudents" class="table" cellpadding="0" cellspacing="0">
        <tr>
            <th>ID</th>
            <th>FIRST NAME</th>
            <th>LAST NAME</th>
            <th>FIRST SCHOOL</th>
            <th></th>
        </tr>
        <% foreach (var item in Model)
           { %>
        <tr>
            <td class="Id">
                <span><%: item.ID %></span>
            </td>
            <td class="FirstName">
                <span><%: item.first_name %></span>
                <input type="text" value="<%: item.first_name %>" style="display: none" />
            </td>
            <td class="LastName">
                <span><%: item.last_name %></span>
                <input type="text" value="<%: item.last_name %>" style="display: none" />
            </td>
            <td class="School">
                <span><%: item.first_school %></span>
                <input type="text" value="<%: item.first_school %>" style="display: none" />
            </td>
            <td>
                <a class="Edit" href="javascript:;">Edit</a> 
                <a class="Update" href="javascript:;" style="display: none">Update</a> 
                <a class="Cancel" href="javascript:;" style="display: none">Cancel</a>
            </td>
        </tr>
        <% } %>
    </table>
</body>
</html>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Update record in HTML Table using jQuery Ajax in ASP.Net MVC

Company

Explore

Follow us

Contact Us