Add Edit Update table row using Bootstrap Modal Popup in ASP.Net Core MVC

Last Reply 10 days ago By dharmendr

Posted 10 days ago

Save updated selected row details in popup in asp.net core mvc

Display selected row details in Bootstrap Modal Popup in ASP.Net Core MVC

After changing value how to update database record. Should i have to make ajax call or how can i use model for this to pass value to controller? 

Posted 10 days ago Modified on 10 days ago

Hi rani,

Refer below example.

For reading connection string refer below article.

.Net Core: Read Connection String inside Startup.cs from AppSettings.json file

Database

I have made use of table Customers with the schema as follows. CustomerId is an Auto-Increment (Identity) column.

I have already inserted few records in the table.

You can download the database table SQL by clicking the download link below.         

Download SQL file

Model

using System.ComponentModel.DataAnnotations;

namespace Row_Update_Modal_Core_MVC.Models
{
    public class Customer
    {
        public int Id { set; get; }
        public string Name { set; get; }
        public string Country { set; get; }
        public IEnumerable<Customer> Customers { get; set; }
    }
}

Namespaces 

using System.Data;
using System.Data.SqlClient;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Configuration;

Controller

public class HomeController : Controller
{
    private IConfiguration Configuration;
    public HomeController(IConfiguration _configuration)
    {
        Configuration = _configuration;
    }
    private string GetConnectionString()
    {
        return this.Configuration.GetConnectionString("MyConn");
    }

    public IActionResult Index()
    {
        Customer customer = new Customer();
        customer.Customers = GetCustomers(null);
        return View(customer);
    }

    public IActionResult Update(Customer customer)
    {
        using (SqlConnection con = new SqlConnection(GetConnectionString()))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                cmd.Parameters.Clear();
                cmd.CommandText = "UPDATE Customers SET NAME = @Name,Country = @Country WHERE CustomerId = @Id";
                cmd.Parameters.AddWithValue("@Id", customer.Id);
                cmd.Parameters.AddWithValue("@Name", customer.Name);
                cmd.Parameters.AddWithValue("@Country", customer.Country);
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
        return RedirectToAction("Index");
    }

    public JsonResult EditCustomer([FromBody]Customer cust)
    {
        int id = Convert.ToInt32(cust.Id);
        Customer customer = new Customer();
        customer.Id = id;
        customer.Name = GetCustomers(id).FirstOrDefault().Name;
        customer.Country = GetCustomers(id).FirstOrDefault().Country;
        customer.Customers = GetCustomers(null);
        return Json(customer);
    }

    public List<Customer> GetCustomers(int? id)
    {
        List<Customer> customers = new List<Customer>();
        using (SqlConnection con = new SqlConnection(GetConnectionString()))
        {
            using (SqlCommand cmd = new SqlCommand())
            {
                cmd.Connection = con;
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.Clear();
                if (id != null)
                {
                    cmd.CommandText = "SELECT * FROM Customers WHERE CustomerId = @Id";
                    cmd.Parameters.AddWithValue("@Id", id);
                }
                else
                {
                    cmd.CommandText = "SELECT * FROM Customers";
                }
                con.Open();
                SqlDataReader rdr = cmd.ExecuteReader();
                while (rdr.Read())
                {
                    customers.Add(new Customer()
                    {
                        Id = Convert.ToInt32(rdr["CustomerId"]),
                        Name = rdr["Name"].ToString(),
                        Country = rdr["Country"].ToString()
                    });
                }
                con.Close();
            }
        }

        return customers;
    }
}

View

@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model Row_Update_Modal_Core_MVC.Models.Customer

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function () {
            $("body").on('click', '#btnEdit', function () {
                $("#MyPopup").modal("hide");
                var obj = {};
                obj.Id = $(this).attr('data-id');

                $.ajax({
                    url: 'Home/EditCustomer',
                    data: JSON.stringify(obj),
                    type: 'POST',
                    dataType: 'html',
                    contentType: "application/json; charset=utf-8",
                    success: function (response) {
                        var id = JSON.parse(response).Id;
                        var name = JSON.parse(response).Name;
                        var country = JSON.parse(response).Country;
                        $('#txtId').val(id);
                        $('#txtName').val(name);
                        $('#txtCountry').val(country);
                        $("#MyPopup").modal("show");
                    }
                });
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h4>Customers</h4>
                <table class="table table-responsive">
                    <thead>
                        <tr>
                            <th>@Html.DisplayNameFor(model => model.Name)</th>
                            <th>@Html.DisplayNameFor(model => model.Country)</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var customer in Model.Customers)
                        {
                            <tr>
                                <td>@Html.DisplayFor(x => customer.Name)</td>
                                <td>@Html.DisplayFor(x => customer.Country)</td>
                                <td>
                                    <a href="#" id="btnEdit" class="btn btn-primary btn-sm" data-id="@customer.Id">Edit</a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="MyPopup" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        &times;
                    </button>
                    <h4 class="modal-title">Customer Details</h4>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-4">
                                <form  asp-action="Update" asp-controller="Home" method="post">
                                    <div class="form-group">
                                        Id: <input id="txtId" asp-for="Id" class="form-control" readonly="readonly" />
                                    </div>
                                    <div class="form-group">
                                        Name: <input id="txtName" asp-for="Name" class="form-control" />
                                    </div>
                                    <div class="form-group">
                                        Country: <input id="txtCountry" asp-for="Country" class="form-control" />
                                    </div>
                                    <div class="form-group">
                                        <input type="submit" value="Update" class="btn btn-success btn-sm" />
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot