Hi rani,
Refer below example.
For reading connection string refer below article.
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">
×
</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
