Modal Pop-Up Displaying Incorrectly When ModelState.IsValid = false Redirect
I'm having an issue with my Modal Pop-Up displaying incorrectly when it fails model validation on HttpPost. When the Modal returns data and it fails validation, I want the screen to return to having the modal popup display as a pop-up over the screen that generated the pop-up initially. What is happing is that the pop-up fills the entire screen, without ANY formatting (i.e. it is not a modal popup at this point). It does show the validation messages though, just as unformatted text. Here are all of the pieces of code that I use:
This is in my site.js
(function () {
// Initialize numeric spinner input boxes
//$(".numeric-spinner").spinedit();
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
This is how I call the pop-up:
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-content"></div>
</div>
<a href="@Url.Action("CreateEdit", new { controller = "Issue", issueid = Model.IssueData.issueId, addedit = "add" })" class="modal-link btn btn-success">Add New Status</a>
This is the controller that handles the HttpPost from the Modal PopUp
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
if (ModelState.IsValid)
{
//Do Stuff
return RedirectToAction("edit");
} else
{
return PartialView("_CreateEdit", model);
}
}
And here is the Modal-PopUp:
@model MYAPP.ViewModels.StatusViewModel
<!--Modal Body Start-->
<div class="modal-content">
<!--Modal Header Start-->
<div class="modal-header">
<h4 class="modal-title">@ViewBag.Title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!--Modal Header End-->
<form asp-action="CreateEdit" asp-controller="Issue" method="post" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<div class="modal-body form-horizontal">
<div class="form-group row">
@Html.HiddenFor(model => model.addedit)
@Html.HiddenFor(model => model.IssueID)
@Html.HiddenFor(model => model.StatusDate)
@Html.LabelFor(model => model.Status, new { @class = "col-sm-2 col-form-label" })
<div class="col-sm-10">
<textarea asp-for="@Model.Status" class="form-control" rows="10" placeholder="Enter/Update Status">@Model.Status</textarea>
</div>
</div>
<div class="form-group row">
@Html.LabelFor(model => model.NextStep, new { @class = "col-sm-2 col-form-label" })
<div class="col-sm-10">
<textarea asp-for="@Model.NextStep" class="form-control" rows="10" placeholder="Please enter the next steps here">@Model.NextStep</textarea>
</div>
</div>
<div class="form-group">
<label asp-for="@Model.ColorCode" class="control-label"></label>
@Html.DropDownListFor(modelItem => modelItem.ColorCode, new[] {
new SelectListItem { Text = " ", Value = "" },
new SelectListItem { Text = "Red", Value = "R" },
new SelectListItem { Text = "Yellow", Value = "Y" },
new SelectListItem { Text = "Green", Value = "G" } })
<span asp-validation-for="@Model.ColorCode" class="text-danger"></span>
</div>
<div>
<table class="statustable">
<tr class="statustablerow">
<th></th>
<th>Previous Status</th>
<th>Previous Next Steps</th>
</tr>
<tr class="statustabledata">
@if (@ViewBag.LastColorCode == "R")
{
<td rowspan="2" width="2%" style=" background-color:red"></td>
}
else if (@ViewBag.LastColorCode == "Y")
{
<td rowspan="2" width="2%" style="background-color: yellow"></td>
}
else if (@ViewBag.LastColorCode == "G")
{
<td rowspan="2" width="2%" style="background-color: green"></td>
}
else
{
<td rowspan="2" width="2%" style="background-color: gray"></td>
}
<td width="20%">Previous Status:</td>
<td width="78%">@ViewBag.LastStatus</td>
</tr>
<tr class="statustabledata">
<td>Previous Next Steps:</td>
<td>@ViewBag.LastNextSteps</td>
</tr>
</table>
</div>
<!--Modal Footer Start-->
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success relative" id="btnSubmit" data-save="modal">
<i class="loader"></i>
Submit
</button>
</div>
<div class="row">
</div>
<!--Modal Footer End-->
</form>
</div>
<script type="text/javascript">
$(function () {
});
</script>
<!--Modal Body End-->
How can I get the screen to revert to showing the page with the popup when validation fails?
Solution
You should submit the form via ajax and replace the modal with the returned data(html of the partialview), otherwise it will directly return the partialview as a new view.
I made some changes to your codes and you can refer to the below example:
Model:
public class StatusViewModel
{
public string addedit { get; set; }
public int IssueID { get; set; }
public DateTime StatusDate { get; set; }
[Required]
public string Status { get; set; }
[Required]
public string NextStep { get; set; }
[Required]
public string ColorCode { get; set; }
}
Edit.cshtml:
<div id="modal-container" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
<a href="@Url.Action("CreateEdit", new { controller = "Issue", issueid = "1", addedit = "add" })" class="modal-link btn btn-success">Add New Status</a>
@section scripts{
<script>
$('body').on('click', '.modal-link', function () {
var actionUrl = $(this).attr('href');
$.get(actionUrl).done(function (data) {
$('body').find('.modal-content').html(data);
});
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
$('body').on('click', '.relative', function (e) {
e.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var dataToSend = form.serialize();
$.post(actionUrl, dataToSend).done(function (data) {
$('body').find('.modal-content').html(data);
});
})
$('body').on('click', '.close', function () {
$('body').find('#modal-container').modal('hide');
});
$('#CancelModal').on('click', function () {
return false;
});
</script>
}
_CreateEdit.cshtml:
@model StatusViewModel
<!--Modal Body Start-->
@{
ViewBag.Title = "Edit";
}
<div class="modal-header">
<h4 class="modal-title">@ViewBag.Title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
<form asp-action="CreateEdit" asp-controller="Issue" method="post" enctype="multipart/form-data">
@Html.AntiForgeryToken()
<div class="form-group row">
@Html.HiddenFor(model => model.addedit)
@Html.HiddenFor(model => model.IssueID)
@Html.HiddenFor(model => model.StatusDate)
@Html.LabelFor(model => model.Status, new { @class = "col-sm-2 col-form-label" })
<div class="col-sm-10">
<textarea asp-for="@Model.Status" class="form-control" rows="10" placeholder="Enter/Update Status">@Model.Status</textarea>
<span asp-validation-for="@Model.Status" class="text-danger"></span>
</div>
</div>
<div class="form-group row">
@Html.LabelFor(model => model.NextStep, new { @class = "col-sm-2 col-form-label" })
<div class="col-sm-10">
<textarea asp-for="@Model.NextStep" class="form-control" rows="10" placeholder="Please enter the next steps here">@Model.NextStep</textarea>
<span asp-validation-for="@Model.NextStep" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="@Model.ColorCode" class="control-label"></label>
@Html.DropDownListFor(modelItem => modelItem.ColorCode, new[] {
new SelectListItem { Text = " ", Value = "" },
new SelectListItem { Text = "Red", Value = "R" },
new SelectListItem { Text = "Yellow", Value = "Y" },
new SelectListItem { Text = "Green", Value = "G" } })
<span asp-validation-for="@Model.ColorCode" class="text-danger"></span>
</div>
<div>
<table class="statustable">
<tr class="statustablerow">
<th></th>
<th>Previous Status</th>
<th>Previous Next Steps</th>
</tr>
<tr class="statustabledata">
@if (@ViewBag.LastColorCode == "R")
{
<td rowspan="2" width="2%" style=" background-color:red"></td>
}
else if (@ViewBag.LastColorCode == "Y")
{
<td rowspan="2" width="2%" style="background-color: yellow"></td>
}
else if (@ViewBag.LastColorCode == "G")
{
<td rowspan="2" width="2%" style="background-color: green"></td>
}
else
{
<td rowspan="2" width="2%" style="background-color: gray"></td>
}
<td width="20%">Previous Status:</td>
<td width="78%">@ViewBag.LastStatus</td>
</tr>
<tr class="statustabledata">
<td>Previous Next Steps:</td>
<td>@ViewBag.LastNextSteps</td>
</tr>
</table>
</div>
<!--Modal Footer Start-->
<div class="modal-footer">
<button data-dismiss="modal" id="cancel" class="btn btn-default" type="button">Cancel</button>
<input type="submit" class="btn btn-success relative" id="btnSubmit" data-save="modal" value="Submit">
</div>
<div class="row">
</div>
</form>
</div>
Controller:
public IActionResult Edit()
{
return View();
}
[HttpGet]
public ActionResult CreateEdit(int issueid, string addedit)
{
var model = new StatusViewModel
{
Status = "AAAAA",
NextStep = "BBBBB"
};
ViewBag.LastColorCode = "R";
ViewBag.LastStatus = "CCCC";
ViewBag.LastNextSteps = "DDDD";
return PartialView("_CreateEdit", model);
}
[ValidateAntiForgeryToken]
[HttpPost]
public ActionResult CreateEdit(StatusViewModel model)
{
if (ModelState.IsValid)
{
//Do Stuff
return RedirectToAction("edit");
}
else
{
return PartialView("_CreateEdit", model);
}
}
Result:
- ASP.NET Core - Deserialize Cities API XML response not working
- An error occurred while saving the entity changes. See the inner exception for details
- How to get current user in asp.net core
- Microsoft.Extensions.Hosting.HostFactoryResolver+HostingListener+StopTheHostException
- Can't create a migration with EF Core 1.1
- Where Can I Find Views and codes of Login and register pages Created by Identity
- Predefined type 'System.Void' is not defined or imported during Visual Studio Online build of ASP.NET 5
- sending image file using ajax to controller action getting null value in action parameter asp.net core
- Unable to configure the build output directory on .net web project
- How to Reference Microsoft.NET.Sdk.Web class from a non-web project?
- ASP.NET Core TagHelper — how to get attribute value of descendant elements?
- How to implement Keyed Transient Dependency Injection in C# using IServiceProvider
- IQueryable does not contain a definition for Count or OrderBy .. Can't figure out why
- .NET Core MVC Page Not Refreshing After Changes
- Ajax url Data result
- Upgrade checklist for latest .NET, ASP.NET Core and EF Core
- Unable to Pass Form Data in Ajax POST
- Multipart body length limit exceeded exception
- aspnet razor pages form local-datetime not working with NodaTime LocalDateTime
- Antiforgery token migration from .NET framework to .NET Core
- Failed to launch debug adapter in Visual Studio 2022
- Does NServiceBus guarantee publishing messages from ASP.NET Core Controller?
- Asp.Net Core HTTP.SYS Windows authentication falls back to NTLM instead of Kerberos
- How can I save the state of a web application page after reloading the page?
- Language Resource is not working in .NET Core API
- System.Text.Json.JsonException: The JSON value could not be converted to enum
- Bind query parameters to a model in ASP.NET Core
- Why is the ConfigureWebHost(IWebHostBuilder builder) of the WebApplicationFactory class not being called?
- How to format ExceptionDetail from a structure to a string?
- ASP.NET Core 8 Identity Authorize with Cookies