jQuery Ajax表单提交不起作用.Net MVC

【问题标题】：jQuery Ajax form submit not working .Net MVCjQuery Ajax表单提交不起作用.Net MVC
【发布时间】：2020-10-21 10:20:50
【问题描述】：

我有一个带有 1 个字段的简单订阅表单。我希望使用 jQuery Ajax 提交此表单。这是代码。

  1. 订阅者模型类
public class Subscriber
    {

        [Key]
        public int SubsID { get; set; }
        [Display(Name = "Email address")]
        [Required(ErrorMessage = "The email address is required")]
        [EmailAddress(ErrorMessage = "Invalid Email Address")]
        public string Email { get; set; }
    }
  1. 表单是共享文件夹下默认共享布局的一部分，如下所示
                  <div class="col-md-4">
                    <strong>Subscribe to our Mailing List!</strong>
                    <form class="shadow-lg p-4 mb-5 bg-white rounded" id="formSub">
                        <input type="text" name="Email" id="Email" placeholder="Email here.." />
                        <button id="click">Subscribe</button>
                    </form>
                   <span id=success>Show Success message here<span>
                   <span id=error>Show Error message here<span>
                </div>
  1. 这是完整的 HTML 代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <meta name="description" content="@Html.Raw(ViewBag.MetaDesc)"/>   
    <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
    <link href="~/Content/SocialShare.css" rel="stylesheet" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <meta name="google-site-verification" content="Z3J9-GHgzfRAHkIM_68WrYr3qQTNJMXJBKj7ZWnh6wM" />
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="background: #158cba !important;">
        <a class="navbar-brand" href="#">Coupon4All <i class="fa fa-tags"></i></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">

            @if (Request.IsAuthenticated)
            {
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Store
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background: #158cba;">
                            <p>@Html.Action("StoreNavPartial", "Shop")</p>

                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Category
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background: #158cba;">
                            <p>@Html.Action("CategoryNavPartial", "Shop")</p>

                        </div>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Our Blog</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">MyProfile</a>
                    </li>
                </ul>

                using (Html.BeginForm("Logout", "Home", FormMethod.Post, new { id = "logoutForm", }))
                {
                    @Html.AntiForgeryToken()
                    <ul class="nav navbar-nav navbar-right">

                        <li style="padding:5px;"><a href="javascript:document.getElementById('logoutForm').submit()" class="btn btn-warning">Log off</a></li>
                    </ul>
                }

                if (User.IsInRole("Admin"))
                {
                    <ul class="nav navbar-nav">
                        <li class="nav-item">
                            <a class="btn btn-primary" href="/Admin/Store/AllStore" target="_blank" style="margin: 5px;">ADMIN</a>
                        </li>
                    </ul>
                }
            }
            else
            {
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Store
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background: #158cba;">
                            <p>@Html.Action("StoreNavPartial", "Shop")</p>

                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Category
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown" style="background: #158cba;">
                            <p>@Html.Action("CategoryNavPartial", "Shop")</p>

                        </div>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="#">Our Blog</a>
                    </li>

                </ul>

                <ul class="navbar-nav navbar-right">
                    <li class="nav-item">
                        <a class="nav-link btn btn-success" style="margin: 5px;" href="@Url.Action("Signup","Home")">Register</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link btn btn-info" style="margin: 5px;" href="@Url.Action("Login","Home")">Login</a>
                    </li>
                </ul>
            }
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <div class="container body-content">
        @RenderBody()
        <hr /><footer style="background-color:#e7f1f5;">
            <div class="row" style="padding:10px;">
                <div class="col-md-4">
                    <strong>About Us</strong>
                    <p style="text-align: justify;">
                        Get Instant Access To Every Discount, Deal, And Promo Code At Thousands Of Stores Online. Throw Out Your Coupon Clippings,
                        C4A Makes Sure You Get The Lowest Price, Every Time. World's #1 Coupon site. Automatic Coupon Codes. Save with Droplist.
                    </p>
                </div>

                <div class="col-md-2">
                    <strong>Know More</strong>
                    <p>Terms & Condition</p>
                    <p>Privacy Policy</p>
                    <p>Sitemap</p>
                </div>

                <div class="col-md-4">
                    <strong>Subscribe to our Mailing List!</strong>
                    <form class="shadow-lg p-4 mb-5 bg-white rounded" id="formSub">
                        <input type="text" name="Email" id="Email" placeholder="Email here.." />
                        <button id="click">Subscribe</button>
                    </form>
                </div>

                <div class="col-md-2">
                    <strong>Follow Us!</strong>
                    <p><i class="fa fa-facebook-square"></i> <i class="fa fa-twitter-square"></i> <i class="fa fa-youtube-square"></i></p>

                </div>



            </div>
            <p>&copy; @DateTime.Now.Year - Created by RayZ</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
    @section Scripts{

        <script src="~/Scripts/jquery-3.5.1.min.js"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
        <script>
            $(document).ready(() => {

                $('#click').click(onClick);

                return false;
            });

            function onClick() {

                alert("Working");
            }
        </script>
    }

</body>
</html>

我怎样才能让这个表单提交到动作控制器，并返回一个成功消息？非常感谢您的帮助。

【问题讨论】：

  • 请附上您的完整 html/razor 代码和控制器。
  • 感谢您的回复。更新了 HTML 代码。我是 .Net jQuery 的新手，因此根本无法获得工作代码
  • 我不会内联那个 javascript 代码。我宁愿在 onclick 事件上调用 JS 方法。然后您可以在 JS 方法中提交您的表单。此外，如果您只想提交表单，您可以随时使用 type="submit" 的按钮。

标签： jquery asp.net-mvc asp.net-ajax


【解决方案1】：

这是工作代码，可以派上用场。

  1. 表格
<div class="col-md-4 shadow-lg p-3 mb-5 bg-white rounded form-inline">
                          <strong class="form-group mb-2">Subscribe to our Mailing List!</strong>
                          <form id="myFOrm">
                              <input class="emailField" type="email" name="Email" id="Email" placeholder="Email here.." />
                              <input type="reset" class="btn btn-warning submitForm" value="Subscribe" /><br />
                              <span id="errorMsg" class="text-danger"></span>
                              <span id="successMsg" class="text-success"></span>
                          </form>
                      </div>
  1. jQuery 函数
<script>
        $(function () {

            $('input.submitForm').click(function (e) {
                e.preventDefault();                
                var Email = $('#Email').val();
                if (Email == '') {
                    alert("Email required");
                    //$('#errorMsg').fadeOut(5000).html("Email required");                    
                    
                }
                else { 
                $.ajax({
                    type: "POST",
                    url: "@Url.Action("NewSub","Home")",
                    data: { SubEmail: Email },
                    success: function (response) {
                        if (response == "emailexists") {
                            $('#errorMsg').fadeOut(5000).html("Email already exists in our Database");
                            
                        }
                        else {
                            $('#successMsg').html("Thank you for your Subscrition!");
                            $('#myFOrm').trigger("reset"); //reset form
                        }

                    }
                });
            }
            });
        });

    </script>
  1. 控制器动作方法
[HttpPost]
        public string NewSub(string SubEmail)
        {
            string Email;

            using(Db db = new Db())
            {                

               if(db.Users.Any(x => x.Email == SubEmail))
                {
                    return "emailexists";
                }

                User dto = new User();

                dto.Email = SubEmail;

                db.Users.Add(dto);
                db.SaveChanges();

                Email = dto.Email.ToString();
            }
            return Email;
        }

按预期工作。只有一件事我不能做的是电子邮件验证，以确保输入的电子邮件格式是有效的电子邮件。将继续在线搜索解决方案。

【讨论】：

    猜你喜欢
    • 2011-02-12
    • 2012-02-22
    • 2015-07-29
    • 1970-01-01
    • 1970-01-01
    • 2011-11-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode