从创建方法背后的代码触发甜蜜警报消息 [英] Triggering sweet alert message from the code behind for create method

问题描述

感谢Rena在上一个问题中给出的出色回答，我还想问一问:如何在尝试使用他们在其中给出的代码的create controller操作上实现甜蜜警报消息框的相同效果.

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,
})

解决方案

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:

这篇关于从创建方法背后的代码触发甜蜜警报消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！