Hi nabilabolo,
You are not setting the Id for Model. So the MaterialLists is null in your code. I have set data-id attribute and set the value in hiddenfield to set the model value.
Refer below sample.
Database
CREATE TABLE MaterialLists
(
Id INT IDENTITY PRIMARY KEY,
Material VARCHAR(100),
Mat_Quantity INT
)
INSERT INTO MaterialLists VALUES ('Material 1',10)
INSERT INTO MaterialLists VALUES ('Material 2',5)
INSERT INTO MaterialLists VALUES ('Material 3',7)
SELECT * FROM MaterialLists
Model
public class ItemModel
{
public string Material { get; set; }
public Nullable<int> Mat_Quantity { get; set; }
public int ID { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
MaterialEntities db = new MaterialEntities();
var material = db.MaterialLists.ToList();
TempData["updateMaterial"] = material;
return View(new ItemModel());
}
[HttpPost]
public ActionResult UpdateQuantity(ItemModel q)
{
MaterialEntities db = new MaterialEntities();
if (q != null)
{
var updateqty = db.MaterialLists.Where(a => a.Id == q.ID).FirstOrDefault();
if (updateqty != null)
{
updateqty.Mat_Quantity = q.Mat_Quantity;
db.SaveChanges();
}
}
return RedirectToAction("Index", "Home");
}
}
View
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<_783469_Insert_Model_Database.Models.ItemModel>" %>
<!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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('#myModal2').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget) // Button that triggered the modal
var Material = button.data('status') // Extract info from data-* attributes
var Id = button.data('id') // Extract info from data-* attributes
$(e.currentTarget).find('.modal-title').text('Update Quantity For :' + Material);
$(e.currentTarget).find("input[name='Material']").val(Material);
$(e.currentTarget).find("input[name='Id']").val(Id);
});
});
</script>
</head>
<body>
<div class="table" id="table_id">
<table class="table table-striped table-bordered table-hover table-sm display" id="dataTable"
cellspacing="0">
<thead class="thead-dark">
<tr>
<th class="text-center">Material</th>
<th class="text-center">Quantity</th>
<th class="text-center"></th>
</tr>
</thead>
<tbody>
<% if (TempData["updateMaterial"] != null)
{
foreach (var item in (IEnumerable<_783469_Insert_Model_Database.MaterialList>)TempData["updateMaterial"])
{%>
<tr>
<td class="">
<%=item.Material%>
</td>
<td class="text-center">
<%=item.Mat_Quantity%>
</td>
<td class="text-center">
<a href="" class="btn btn-warning" data-toggle="modal" data-target="#myModal2" data-status="<%=item.Material%>"
data-id="<%=item.Id%>" id="<%=item.Id%>">Update</a>
</td>
</tr>
<% }
}%>
</tbody>
</table>
</div>
<!--Modal quantity-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<%using (Html.BeginForm("UpdateQuantity", "Home", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{ %>
<div class="modal-header">
<h5 class="modal-title custom_align">
New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<input type="hidden" id="hfMaterialId" name="Id" value="" />
<input class="form-control " id="Material" name="Material" type="text" value="" />
</div>
<div class="form-group">
<input class="form-control " id="Mat_Quantity" name="Mat_Quantity" type="text" value="" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close</button>
<button type="submit" class="btn btn-success">
Save</button>
</div>
<%} %>
</div>
</div>
</div>
</body>
</html>
Screenshot
