Exception handling using the modal - asp.net

Question

There was such task.
I have a controller method of removing
public ActionResult Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
try {
TechnologicalCard technologicalCard = db.TechnologicalCards.Find(id);
db.TechnologicalCards.Remove(technologicalCard);
db.SaveChanges();
return RedirectToAction("Index");
}
catch (Exception ex)
{
ViewBag.Error = true;
TempData["message"] = "someMessage";
return RedirectToAction("Index");
}
}
How can I do that would be when an exception is thrown during the removal of the modal appeared with warning text ?
UPDATE
I added the index method
public ActionResult Index()
{
var id_Head = User.Identity.GetUserId();
TempData["message"] = "someMessage";
var technologicalCards = db.TechnologicalCards.Where(c => c.IdHeadDepartment == id_Head).ToList();
return View(technologicalCards);
}
My view has contains the following code
#model IEnumerable<AccountingPlusProject.Models.TechnologicalCard>
#{
ViewBag.Title = "Учёт+";
}
<style>
.md-form {
position: relative;
top: 40px;
width: 20%;
height: 20%;
text-align: center;
}
.img1 {
background-image: url("/Content/avatars/Head.jpg");
background-repeat: no-repeat;
width: 7%;
height: 65px;
border-style: none;
margin-left: 90%;
margin-top: -8%;
}
.img2 {
width: 7%;
height: 65px;
border-style: none;
margin-left: 80%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
.demo-card-wide.mdl-card {
width: 512px;
}
.demo-card-wide > .mdl-card__title {
color: #fff;
height: 176px;
}
.demo-card-wide > .mdl-card__menu {
color: #fff;
}
.container {
margin: 30px auto;
width: 85%;
height: 100%;
}
.warningMessage {
font-weight: bold;
color: Red;
}
</style>
<script>
$(function () {
if ($('#myModal').length) {
$('#myModal').modal('show');
}
});
</script>
<nav class="navbar navbar-light teal lighten-4" style="height: 100px">
<div class="container">
<div class="collapse navbar-toggleable-xs" id="collapseEx2" style="margin-top:-2%">
<img src="~/Content/truelogo.png" style="margin-left:-10%" />
#Html.ActionLink("Добавить технологическую карту", "Create", null, new { #class = "btn btn-success" })
<img src="~/Content/avatars/Head.jpg" class="rounded-circle img-responsive img1">
#Html.ActionLink("Отмена", "Index", "HeadDepartment", null, new { #class = "btn btn-danger", #style = "margin-left:100%; margin-top:-11%" })
</div>
</div>
</nav>
<div class="page-content">
<div class="container">
#{int i = 1;}
<table>
#foreach (var item in Model)
{
if (i % 4 == 1)
{
<tr></tr>
}
<td>
<div class="card">
<img class="img-fluid" src="#item.Image" alt="Card image cap">
<div class="card-block">
<center>
<hr />
<h4 class="card-title">#item.NameProduct</h4>
<hr />
#item.Description
<hr />
#{ var materials = item.SelectedMaterials.ToList();}
#foreach (var material in materials)
{
#Html.DisplayFor(model => material.ReferenceMaterial.NameMaterial) <b> Штук: </b>
#Html.DisplayFor(model => material.CountMaterial)
<br />
}
<br />
<center>
#Html.ActionLink("Настроить материалы", "EditMaterial", new { id = item.IdTechnologicalCard }, new { #class = "btn btn-success" })
<br />
#Html.ActionLink("Настроить количество", "EditCountOfMaterial", new { id = item.IdTechnologicalCard }, new { #class = "btn btn-success" })
</center>
<hr />
#Html.ActionLink("Удалить", "Delete", new { id = item.IdTechnologicalCard }, new { #class = "btn btn-danger" })
</center>
</div>
</div>
</td>
i++;
}
</table>
</div>
#if (TempData["message"] != null)
{
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
121212 <!--add your message here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
</div>
But when I deleting redirects to Index view without modal

Answer 1

You can pass error messages using the model state dictionary as well. In that case, you should be returning the same view back to the user instead of a redirect, so that user can try the action again.
catch (Exception ex)
{
ModelState.AddModelError(string.Empty,"Error! Try again.");
return View();
}
Now make sure you have the Validation helper methods being used in the view to render the error messages from the model state dictionary.
#Html.ValidationSummary(false)
With this approach, only the id will be passed back to the view (basically read from the model state dictionary), not all other fields you had. If you want all fields, use the same view model (which your view is strongly typed to) as the method parameter.

Answer 2

Exception handling using the modal
As you made it clear that you want to show the error in a modal window here is what you can do.
You need to again assign this TempData data into another TempData with in your Index method. Since the TempData is only alive from one controller to another.
And add this code in your index view.
#if (TempData["message"] != null)
{
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
#TempData["message"] <!--add your message here-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
}
Then add this script in your index.cshtml.
$(function(){
if($('#myModal').length){
$('#myModal').modal('show');
}
});