I made a view with records and each one has accepted and rejected button. On reject, there is a pop-up a modal for writing why. the issue here is whenever I click reject button for any record, it takes the id and status of the first record and the type="button".
I tried changing the type of the reject button type="submit", it works but it goes directly to the controller without showing the popup. literally, I'm going crazy .what am I doing wrong?
my workflow is I'm doing two begin forms one for each button.
Error I am receiving:
the reject button in any records just updates the first one only by taking its Id, status and its stored comment.
The markup is invalid and the selectors are not specific enough. Learn how to use the browser's dev tools when debugging JavaScript as the problem with the code will be very obvious and you will not waste time guessing.
Since all the Modals' id are the same (id= "exampleModal"), and you use id selector here, so the reject button always open the first modal. One solution is to set a unique id for each Modal like below:
.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
Member
8 Points
74 Posts
Reject button always updates just the first record
Feb 06, 2020 10:46 AM|khloud_ali39|LINK
Summary of the problem I am having:
I made a view with records and each one has accepted and rejected button. On reject, there is a pop-up a modal for writing why. the issue here is whenever I click reject button for any record, it takes the id and status of the first record and the
type="button". I tried changing the type of the reject button type="submit", it works but it goes directly to the controller without showing the popup. literally, I'm going crazy .what am I doing wrong?my workflow is I'm doing two begin forms one for each button.
Error I am receiving:
the reject button in any records just updates the first one only by taking its Id, status and its stored comment.
My code:
the view:
<tbody> @for (int i = 0; i < Model._Requests.Count(); i++) { <tr> <td> @Html.HiddenFor(x=>Model._Requests[i].Request_ID , new {Name="theId" }) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Account_Name) </td> <td> @Html.DisplayFor(x => Model._Requests[i].LOB) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Operation_Date) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Employee_no) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate) </td> @if (Model._Requests[i].Status == false) { <td> <span name="badge" class="badge badge-warning" id="pend">pending training</span> </td> } @if (Model._Requests[i].Status == true) { <td> <span name="badge" class="badge badge-pill badge-success">completed</span> </td> } @if (Model._Requests[i].Status == null) { <td> <span name="badge" class="badge badge-warning" id="pend">pending</span> </td> } <!--for the accept button--> @using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post)) { @Html.AntiForgeryToken() <td> <button id="btnAccept" class="btn btn-success" name="a_button" type="submit" value="true">Accept</button> @Html.Hidden("Request_ID", Model._Requests[i].Request_ID) @Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" }) </td> } <!--for the reject button--> @using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post)) { @Html.AntiForgeryToken() <td> <button id="btnReject" class="btn btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="button" value="false">Reject</button> @Html.Hidden("Request_ID", Model._Requests[i].Request_ID) @Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" }) </td> <!--this is the note modal of the reject button --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">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"> @Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { @class = "form-control" }) </div> </div> <div class="modal-footer"> <input type="submit" value="submit" class="btn btn-success" id="finalSave" /> </div> </div> </div> </div> } </tr> } </tbody> @section Scripts { <script> $(function () { var msg = "@(TempData["success"] as string)"; if (msg !== "") { toastr.success('the request status has been updated successfully!'); } }); $('[name = "a_button"]').click(function () { $('[name = "Status"]').val($('[name = "a_button"]').val()); }) $('[name = "button"]').click(function () { $('[name = "Status"]').val($('[name = "button"]').val()); }) </script> }the controller :
#region fulfillment [CustomAuthorize(Roles = AccessRoleHelper.Training_Action)] [HttpPost] public ActionResult Add_Fulfillment_Accept(int Request_ID, bool Status) { var user = db.TBL_Request.Find(Request_ID); user.IsApproved = Status ; //db.TBL_Request.Add(user); db.SaveChanges(); TempData["success"] = "Done"; return RedirectToAction("Training_Action"); } //reject method for the reject button [CustomAuthorize(Roles = AccessRoleHelper.Training_Action)] [HttpPost] public ActionResult Add_Fulfillment_Reject(int theId , bool Status , string Note) { var selectedRequest = db.TBL_Request.Find(theId); selectedRequest.Note = Note; selectedRequest.IsApproved = Status; db.SaveChanges(); TempData["success"] = "Done"; return RedirectToAction("Training_Action"); } #endregionI appreciate your help.
All-Star
53051 Points
23634 Posts
Re: Reject button always updates just the first record
Feb 06, 2020 12:52 PM|mgebhard|LINK
The markup is invalid and the selectors are not specific enough. Learn how to use the browser's dev tools when debugging JavaScript as the problem with the code will be very obvious and you will not waste time guessing.
Participant
1320 Points
491 Posts
Re: Reject button always updates just the first record
Feb 07, 2020 09:26 AM|jiadongm|LINK
Hi khloud_ali39,
Since all the Modals' id are the same (id= "exampleModal"), and you use id selector here, so the reject button always open the first modal. One solution is to set a unique id for each Modal like below:
<tbody> @for (int i = 0; i < Model._Requests.Count(); i++) { <tr> <td> @Html.HiddenFor(x=>Model._Requests[i].Request_ID , new {Name="theId" }) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Account_Name) </td> <td> @Html.DisplayFor(x => Model._Requests[i].LOB) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Operation_Date) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Employee_no) </td> <td> @Html.DisplayFor(x => Model._Requests[i].Fulfillment_Rate) </td> @if (Model._Requests[i].Status == false) { <td> <span name="badge" class="badge badge-warning" id="pend">pending training</span> </td> } @if (Model._Requests[i].Status == true) { <td> <span name="badge" class="badge badge-pill badge-success">completed</span> </td> } @if (Model._Requests[i].Status == null) { <td> <span name="badge" class="badge badge-warning" id="pend">pending</span> </td> } <!--for the accept button--> @using (Html.BeginForm("Add_Fulfillment_Accept", "TBL_Request", FormMethod.Post)) { @Html.AntiForgeryToken() <td> <button id="btnAccept" class="btn btn-success" name="a_button" type="submit" value="true">Accept</button> @Html.Hidden("Request_ID", Model._Requests[i].Request_ID) @Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" }) </td> } <!--for the reject button--> @using (Html.BeginForm("Add_Fulfillment_Reject", "TBL_Request", FormMethod.Post)) { @Html.AntiForgeryToken() <td> <button id="btnReject" class="btn btn-danger" name="button" data-toggle="modal" data-target="#@i" type="button" value="false">Reject</button> @Html.Hidden("Request_ID", Model._Requests[i].Request_ID) @Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" }) </td> <!--this is the note modal of the reject button --> <div class="modal fade" id="@i" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">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"> @Html.TextArea("Note", Model._Requests[i].Note, htmlAttributes: new { @class = "form-control" }) </div> </div> <div class="modal-footer"> <input type="submit" value="submit" class="btn btn-success" id="finalSave" /> </div> </div> </div> </div> } </tr> } </tbody> @section Scripts { <script> $(function () { var msg = "@(TempData["success"] as string)"; if (msg !== "") { toastr.success('the request status has been updated successfully!'); } }); $('[name = "a_button"]').click(function () { $('[name = "Status"]').val($('[name = "a_button"]').val()); }) $('[name = "button"]').click(function () { $('[name = "Status"]').val($('[name = "button"]').val()); }) </script> }The Action should use the same name parameter to receive the value:
[CustomAuthorize(Roles = AccessRoleHelper.Training_Action)] [HttpPost] public ActionResult Add_Fulfillment_Reject(int Request_ID, bool Status , string Note) { var selectedRequest = db.TBL_Request.Find(theId); selectedRequest.Note = Note; selectedRequest.IsApproved = Status; db.SaveChanges(); TempData["success"] = "Done"; return RedirectToAction("Training_Action"); }Best Regards,
Jiadong Meng