Запуск сладкого предупреждающего сообщения из кода для метода создания

Question

Благодаря отличному ответу Рены на предыдущий вопрос, я также спрашиваю, как мне добиться того же эффекта, что и окно приятного сообщения с предупреждением о действии создания контроллера, которое я пробовал с кодом, который они дали в этом.

Использование JavaScript кода за asp. net core c#

Но поскольку действие create сначала отправляет форму, ему, похоже, не нравится триггер оповещение.

swal({
    title: "MIS",
    text: "Case Created your Case Number is ",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})

Answer 1

Похоже, вы хотите вызвать сладкое оповещение при нажатии кнопки отправки.

Вот рабочая демонстрация:

Модель:

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
}

Index. cs html:

@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.cs html:

@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>
}

Контроллер:

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

Результат: введите описание изображения здесь

Answer 2

просто отправьте форму с помощью ajax после этого просто покажите сообщение, которое вы хотите

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

на стороне cotroller, вы должны вернуть что-то вроде этого

    [HttpPost]
    public IActionResult Create(Item item){
    //create item
    return Json(new {Id=item.id});
    }