I am working on creating Modal pop-ups for CRUD operations. I have created working modals for Create and Edit. My issue is now I have no way to use the validations from the server side which I need to have. When Edit fails the validation test it rightfully so rejects the request but redirects back to the Edit view in a non modal form. Please see below.
Modal:
After Invalid input:
I believe its going into the controller post edit and rendering from the URL. Which its good as it gives the validation for the pin being empty correctly, However this would need to be rendered on the Modal Edit 1234 pop up. Will include Model, controller , index view, Edit view, and js to help with the issue. Thank you for your help.
Model:
public class Airmen
{
[Key]
[Required]
public string MobileID { get; set; }
[Required]
public string Pin { get; set; }
}
public class SuperModel
{
public Airmen airmen { get; set; }
public IEnumerable<Airmen> airmens { get; set; }
}
Controller:
public async Task<IActionResult> Index(SuperModel arm)
{
arm.airmens = await _context.Airmen.ToListAsync();
return View(arm);
}
[HttpGet]
public async Task<IActionResult> Edit(string id)
{
SuperModel airmen = new SuperModel();
airmen.airmen = await _context.Airmen.FindAsync(id);
return PartialView(airmen);
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Edit(string id, [Bind("MobileID,Pin")] Airmen airmen)
{
SuperModel amn = new SuperModel();
if (id != airmen.MobileID)
{
return NotFound();
}
if (ModelState.IsValid)
{
try
{
_context.Update(airmen);
await _context.SaveChangesAsync();
}
catch (DbUpdateConcurrencyException)
{
if (!AirmenExists(airmen.MobileID))
{
return NotFound();
}
else
{
throw;
}
}
return RedirectToAction(nameof(Index));
}
amn.airmen = airmen;
return PartialView(amn);
}
Index View:
@model ALRSweb4.Models.SuperModel
@{ViewData["Title"] = "Index";}
<h1>Index</h1>
<table class="table">
<thead>
<tr>
<th>
Mobile ID
</th>
<th>
Pin
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.airmens)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.MobileID)
</td>
<td>
@Html.DisplayFor(modelItem => item.Pin)
</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-target="#Edit" data-url="@Url.Action(item.MobileID,"Airmen/Edit")">
Edit
</button>
<a asp-action="Details" asp-route-id="@item.MobileID">Details</a> |
<a asp-action="Delete" asp-route-id="@item.MobileID">Delete</a>
</td>
</tr>
}
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#CreateModal">
Create
</button>
<div class="modal fade" id="CreateModal" 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">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@Html.Partial("Create")
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div id="EditPlaceHolder">
</div>
Edit View:
@model ALRSweb4.Models.SuperModel
@{
ViewData["Title"] = "Edit";
}
<div class="modal fade" id="Edit" 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">Edit 12343</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="row">
<div class="col-md-4">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input asp-for="airmen.MobileID" />
<div class="form-group">
<label asp-for="airmen.Pin" class="control-label"></label>
<input asp-for="airmen.Pin" class="form-control" />
<span asp-validation-for="airmen.Pin" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
JS:
// t2
$(function () {
var CreatePlaceHolderElement = $('#EditPlaceHolder');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
var decodedUrl = decodeURIComponent(url);
$.get(decodedUrl).done(function (data) {
CreatePlaceHolderElement.html(data);
CreatePlaceHolderElement.find('.modal').modal('show');
})
})
CreatePlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
CreatePlaceHolderElement.find('.modal').modal('hide');
location.reload(true);
})
})
})
// end of t2
// start of function for create modal
$(function () {
var CreatePlaceHolderElement = $('#CreatePlaceHolder');
$('button[data-toggle="ajax-modal"]').click(function(event){
var url = $(this).data('url');
$.get(url).done(function (data) {
CreatePlaceHolderElement.html(data);
CreatePlaceHolderElement.find('.modal').modal('show');
})
})
CreatePlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
CreatePlaceHolderElement.find('.modal').modal('hide');
location.reload(true);
})
})
})
// end of function for create modal
CodePudding user response：
Html.RenderPartialAsync cannot render the js successfully by ajax call back. So the fastest way is to add the js in Edit view like below and it will prevent form submit:
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
The ajax function below is useless, just remove the following code to use default form submit. The reason for why removing it is because firstly your code does not have any element with data-save="modal". Then you have <input type="submit" /> which will submit your form data by default without using ajax.
CreatePlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
CreatePlaceHolderElement.find('.modal').modal('hide');
location.reload(true);
})
})