My current project involves displaying data from a database with accept and reject buttons next to each row. When the user clicks on one of these buttons, the value is passed to the controller and saved in the database. Everything was working fine until I tried to implement a popup modal that would only appear when the reject button is clicked and allow the user to add a note. However, I encountered an issue where the modal was passing double the number of data rows instead of just the specific row I was on. I am struggling to figure out how to pass the row ID, the rejected button value, and the message to the controller correctly. Additionally, I attempted to pass the modal within the reject button method in the controller, but it ended up being null. Can anyone provide guidance on what I may be doing wrong here? Is my script portion properly organized and accurate after adding AJAX functionality? Any help or advice would be greatly appreciated. Here is a snippet of my view:
@model AllmyTries.Models.fulfillmentVM
<!-- page content -->
@using (Html.BeginForm("Add_Fulfillment_Reject", "Feedback", FormMethod.Post))
{
@Html.AntiForgeryToken()
<td>
<button id="btnReject" class="btn btn-lg btn-danger" name="button" data-toggle="modal" data-target="#exampleModal" type="submit" onclick="reject(0)" value="0">Reject</button>
@Html.Hidden("Request_ID", Model._Requests[i].Request_ID)
@Html.Hidden("Status", Model._Requests[i].Status, new { id = "myEdit", value = "" })
</td>
<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">
<form id="myform">
<div class="form-group">
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="reset" value="submit" class="btn btn-success" id="finalSave" />
</div>
</div>
</div>
</div>
}
<!-- /page content -->
@section Scripts {
<script>
$('[name = "button"]').click(function () {
$('[name = "Status"]').val($('[name = "button"]').val());
})
$(document).ready(function () {
$('#finalSave').click(function () {
var dataform = $('#myform').serialize();
$.ajax({
type: 'POST',
url: '/Feedback/Add_Fulfillment_Reject',
data: dataform,
success: function () {
$('#exampleModal').modal('hide');
}
})
})
})
</script>
}
This is an excerpt from the controller:
#region fulfillment
[HttpPost]
public ActionResult Add_Fulfillment_Accept(int Request_ID, int? Status)
{
var user = db.TBL_Request.Find(Request_ID);
user.Inserted_by = Status ?? 0;
db.SaveChanges();
return RedirectToAction("Index");
}
//this is the one with the issue
[HttpPost]
public ActionResult Add_Fulfillment_Reject(fulfillmentVM vM)
{
//save the status
//save the note
db.SaveChanges();
return RedirectToAction("Index");
}
#endregion
}