Triggering sweet alert message from the code behind for create method - asp.net-core

Question

Thanks to the excellent answer by Rena in the previous question I am also asking how do I achieve the same effect of the sweet alert message box on the create controller action I tried with the code they gave in this.
Using JavaScript code behind asp.net core c#
But because the action create submits the form first it doesn't seem to like the trigger the alert.
swal({
title: "MIS",
text: "Case Created your Case Number is ",
icon: "warning",
buttons: true,
dangerMode: true,
})

Answer 1

just post the form with ajax after that jsut show the message you want
<form action="/your action url" method="post" id="formCreate">
...Yıur item inputs
<button type="submit"></button>
</form>
$("#formCreate").submit(function (event) {
event.preventDefault(); //prevent default action
var post_url = $(this).attr("action"); //get form action url
var request_method = $(this).attr("method"); //get form GET/POST method
var form_data = $(this).serialize(); //Encode form elements for submission
$.ajax({
url: post_url,
type: request_method,
data: form_data
}).done(function (response) { //
Swal.fire({
position: 'center',
icon: "warning",
text: "Case Created your Case Number is "+response.Id,
title: "MIS",
showConfirmButton: false,
timer: 1500,
}).then(() => {
window.location.reload(true);
})
});
});
in cotroller side you should return something like this
[HttpPost]
public IActionResult Create(Item item){
//create item
return Json(new {Id=item.id});
}

Answer 2

It seems you want to trigger the sweet alert when you click the submit button.
Here is a working demo:
Model:
public class Test
{
public int Id { get; set; }
public string Name { get; set; }
}
Index.cshtml:
#model IEnumerable<Test>
<p>
<a asp-action="Create">Create New</a>
</p>
<table class="table">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.Name)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
</tr>
}
</tbody>
</table>
Create.cshtml:
#model Test
<h1>Create</h1>
<h4>Test</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<input type="button" onclick="Create()" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
<script>
function Create() {
swal({
title: "MIS",
text: "Case Created your Case Number is " + $("#Name").val(),
icon: "warning",
buttons: true,
dangerMode: true,
}).then((willCreate) => {
if (willCreate) {
var data = $('form').serialize();
$.ajax({
url: "/tests/create",
type: "POST",
data: data,
dataType: "html",
success: function () {
swal("Done!", "It was succesfully created!", "success")
.then((success) => {
window.location.href="/tests/index"
});
},
error: function (xhr, ajaxOptions, thrownError) {
swal("Error creating!", "Please try again", "error");
}
});
}
});
}
</script>
}
Controller:
public class TestsController : Controller
{
private readonly Mvc3_1Context _context;
public TestsController(Mvc3_1Context context)
{
_context = context;
}
// GET: Tests
public async Task<IActionResult> Index()
{
return View(await _context.Test.ToListAsync());
}
// GET: Tests/Create
public IActionResult Create()
{
return View();
}
// POST: Tests/Create
[HttpPost]
public async Task<IActionResult> Create(Test test)
{
if (ModelState.IsValid)
{
_context.Add(test);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(test);
}
}
Result: