Отправка бланка с успешным сообщением из Layout в ядре Asp.Net - PullRequest
Новая
       7

Отправка бланка с успешным сообщением из Layout в ядре Asp.Net

0 голосов
/ 24 февраля 2019

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

<footer>
 <form method="post" asp-controller="NewsletterSubscriptions" asp-action="Create" data-ajax="true" data-ajax-method="post" data-ajax-success="success" data-ajax-completed="completed">
   <div class="newsletter" id="newsletter">
     <div class="form-group">
      <input type="text" id="FullName" name="FullName" data-provide="FullName" class="form-control" placeholder="name" autocomplete="off">
     </div>
     <div class="form-group">
      <input type="email" id="Email" name="Email" data-provide="Email" class="form-control" placeholder="email" autocomplete="off">
     </div>
    </div>
    <div class="newsletter-btn">
      <input type="submit" value="ok" />
    </div>
 </form>
</footer>

И в голове: 

<head>
    <script src="@Url.Content("/lib/jquery-validation/dist/jquery.validate.js")"></script>
    <script src="@Url.Content("/lib/jquery-validation/dist/additional-methods.js")"></script>
    <script src="@Url.Content("/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js")"></script>
    <script>
        success = function () {
            alert("Hi !");
        };
    </script>
    <script>
        completed = function (xhr) {
            alert("Hi ${xhr.responseText}!");
        };
    </script>
</head>

Контроллер: 

 [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> Create([Bind("FullName,Email")] NewsletterSubscription newsletterSubscription)
    {
        if (ModelState.IsValid)
        {
            _context.Add(newsletterSubscription);
            await _context.SaveChangesAsync();
            return Redirect(Request.Headers["Referer"]+ "#newsletter");
        }
        else
        return View(newsletterSubscription);
    }

Когда я отправляю, страница обновляется, формауспешно отправлен, пользователь перенаправлен в ту же область нижнего колонтитула страницы.Но успех или выполненные функции не срабатывают.что я делаю не так?

1 Ответ

0 голосов
/ 24 февраля 2019

Напишите ваш form тег следующим образом: 

<div id="success-message-container" class="alert alert-success text-center d-none">
        <strong>Success!</strong> You have been subscribed successfully!
    </div>

<div id="failure-message-container" class="alert alert-danger text-center d-none">
        <strong>Failure!</strong> There is some problem with the service.Please try again.If the problem persists
        please contract with system administrator!
</div>

<form id="newsLetterForm" method="post" asp-controller="NewsletterSubscriptions" asp-action="Create">
   // Your form contents
</form>

Затем в JavaScript: 

$(document).on("submit", "#newsLetterForm", function (event) {
            event.preventDefault();
            event.stopImmediatePropagation();
            var formData = new FormData(this);
            var url = this[0].action; // if this does not work then use '@Url.Action("Create","NewsletterSubscriptions")'

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                success: function (response) {
                    if (response) {
                        document.getElementById("newsLetterForm").reset();

                        $("#newsLetterForm input,textarea").removeClass('valid');
                        $("#success-message-container").removeClass("d-none");
                        setTimeout(function () {
                            $("#success-message-container").addClass("d-none");
                        }, 5000);
                    }
                },
                error: function () {
                    $("#failure-message-container").removeClass("d-none");
                    setTimeout(function () {
                        $("#failure-message-container").addClass("d-none");
                    }, 5000);
                },
                cache: false,
                contentType: false,
                processData: false
            });
            return false;
        });

Примечание: css классов, которые я использовал, взяты из Bootstrap 4

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...