提交表单不起作用答案

【问题标题】：form onsubmit doesn't work提交表单不起作用
【发布时间】：2016-04-06 06:32:51
【问题描述】：

@model MVC_STORE.Models.Product

@{
    Layout = null;
}

<!DOCTYPE html>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>AddProduct</title>
</head>
<body>
    <div>
        <form id="formAdd" onsubmit=" return SendData(); return false;">
            <table>
                <tr>
                    <td>Serial number:</td>
                    <td>@Html.TextBoxFor(m => m.SerialNo) @Html.ValidationMessageFor(m => m.SerialNo)</td>
                </tr>
                <tr>
                    <td>Product name:</td>
                    <td>@Html.TextBoxFor(m => m.Name) @Html.ValidationMessageFor(m => m.Name)</td>
                </tr>
                <tr>
                    <td>Product price:</td>
                    <td>@Html.TextBoxFor(m => m.Price) @Html.ValidationMessageFor(m => m.Price)</td>
                </tr>
                <tr>
                    <td>Product quatity:</td>
                    <td>@Html.TextBoxFor(m => m.Quatity) @Html.ValidationMessageFor(m => m.Quatity)</td>
                </tr>
            </table>
            <input type="submit" id="toAdd" value="Add product" />
        </form>

        @Html.Partial("ProductsTable")

        <script language="javascript">
            function SendData() {
                $("#status").text("Saving product, please wait..");
                var formData = $("#formAdd").serialize();
                $.post("addProduct", formData, BindData);
                $("#status").text("");
            }
        </script>

    </div>
</body>
</html>

由于某种原因，onsubmit 不起作用，我已经阅读了很多关于它的帖子，但在这种情况下它们都没有帮助我。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;

namespace HW_MVC_STORE.Models
{
    public class Product
    {
        [Key]
        [RegularExpression("^[a-zA-Z0-9]+$", ErrorMessage = "Only upper- and lower- case letters and numbers.")]
        [Required]
        [StringLength(5,MinimumLength=5, ErrorMessage = "Please enter 5 characters serial.")]
        public string SerialNo { get; set; }


        [RegularExpression("^[a-zA-Z]+$", ErrorMessage = "Only upper- and lower- case letters")]
        [Required]
        [StringLength(10, MinimumLength=2, ErrorMessage="Please enter between 2 and 10 characters.")]
        public string Name { get; set; }

        [RegularExpression("^[0-9]+$", ErrorMessage = "Integers only")]
        [Required]
        public string Quatity { get; set; }

        [RegularExpression("^([0-9]+[.][0-9]+)|([1-9]+[0-9]*)$", ErrorMessage = "Numbers only, bigger then zero")]
        [Required]
        public string Price { get; set; }
    }
}

我尝试了一些帖子中的建议，但都没有奏效。

<form id="formAdd" onsubmit="return SendData(); return false;">
<form id="formAdd" onsubmit="return SendData();">
<form id="formAdd" onsubmit="SendData()">

我不明白为什么它甚至调用了 SendData() 函数，它不打算在所有文本框都正确归档之前离开表单。

我该如何解决它，或者至少它有什么问题？

【问题讨论】：

在 ASP.NET MVC 中，您执行 @Html.BeginForm。你可能想从你的模型中生成一个视图
我可以在本文中提供表单 ID 吗？
msdn.microsoft.com/en-us/library/… 我在这里看不到任何适合我需要的东西。（表单的 ID 并调用 JS 函数）。
您是否尝试从模型或控制器创建视图？
我是新手，所以我使用教程和文档，所以我不太清楚“从模型或控制器创建视图”是什么意思。正如您在帖子中看到的那样，我有一个模型，以及它的强类型视图，当然还有一个控制器。但是提交调用 SendData() 的那个小（巨大的）东西不管怎样，其他一切都很好。

标签： javascript jquery html asp.net-mvc-5

【解决方案1】：

你需要：

<form id="formAdd" onsubmit="SendData(); return false;">

函数SendData 没有返回值，因此return SendData(); 没有意义。
不返回 false 会导致页面重新加载（默认操作）

如果SendData 中的 ajax POST 不起作用，我们需要更多详细信息。

【讨论】：

也试过了。每件事都很好，如果您输入错误的值，cmets，控制器中的验证（ModelState.IsValid）。唯一的问题是，当您单击提交按钮时，无论文本框中的值如何，它都会调用 SendData() 函数。