Question

我需要在页脚中创建新闻稿表单，因此必须将其包含在布局中。我已经使用以下方法成功创建了表单：

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

当我提交时，页面将刷新，表单提交成功，用户将被重定向到同一页面的页脚区域。但是不会触发成功或完成的功能。我在做什么错了？

Answer 1

按如下所示编写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

从Asp.Net核心中的Layout提交带有成功消息的帖子表格

1 个答案: