jquery - 部分 View - 客户端验证不适用于 jquery ajax post

转载作者：行者123 更新时间：2023-12-03 22:49:18

25

4

在索引页面中，我显示员工列表，当用户单击编辑链接时，我显示编辑 View 。

此编辑 View 呈现部分 View (_EditPartial) 以显示可编辑的不同字段。

当用户单击保存按钮时，我想进行 Ajax post 调用。

我想在将数据发布到服务器之前验证输入。我尝试使用不引人注目的验证，但验证对我来说根本没有触发。以下是代码片段。

ClientValidationEnabled 和 UnobtrusiveJavaScriptEnabled 在 web.config 中启用。

代码片段

部分查看代码

        @model WebApplication1.Models.employee

        <div id="mypartial" class="form-horizontal">
            <h4>employee</h4>
            <hr />
            @Html.ValidationSummary(true)
            @Html.HiddenFor(model => model.id)

            <div class="form-group">
                @Html.LabelFor(model => model.name, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.name)
                    @Html.ValidationMessageFor(model => model.name)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.age, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.age)
                    @Html.ValidationMessageFor(model => model.age)
                </div>
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.address, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.address)
                    @Html.ValidationMessageFor(model => model.address)
                </div>
            </div>              
        </div>

====================

编辑查看代码 @model WebApplication1.Models.employee

        @{
            Layout = null;
        }

        <!DOCTYPE html>

        <html>
        <head>
            <meta name="viewport" content="width=device-width" />
            <title>Edit</title>
            <script src="~/Scripts/jquery-2.1.0.js"></script>

            <script type="text/javascript">
                $(document).ready(function () {

                    $("#btnSave").click(function () {
                        $("#btnSave").click(function () {


                            debugger;

                            // For some reason following function always return true even if I put invalide data
                            var v = $(this).valid();

                            $.validator.unobtrusive.parse($("#mypartial"));

                            var data = $('form').serialize();
                            $.ajax({
                                type: "POST",
                                url: "@Url.Action("Edit")",
                                data: data,
                                cache: false
                            })
                            .fail(function (xhr, textStatus, errorThrown) {
                                alert(xhr.responseText);
                            })
                            .success(function () {

                                alert("Success");

                            });
                                });
                    });

                });
            </script>
        </head>
        <body>
            @Scripts.Render("~/bundles/jquery")
            @Scripts.Render("~/bundles/jqueryval")


            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()

                @Html.Partial("_EditPartial", Model)

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="button" id="btnSave" value="Save" class="btn btn-default" />
                    </div>
                </div>
            }

        </body>


        </html>

============

操作代码

 [HttpPost]
        public ActionResult Edit([Bind(Include="id,name,age,address")] employee employee)
        {
            // This return falase because input data is invalid
            if (ModelState.IsValid)
            {
                db.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(employee);
        }

==============

型号

公共(public)部分类员工 { 公职人员() { this.employeeerolemappings = new List(); }

    public int id { get; set; }
    [Required]
    public string name { get; set; }

    [Required]
    public Nullable<int> age { get; set; }
    [Required]
    public string address { get; set; }

}

我检查了渲染的 html 代码。 data-val="true"带有不同的字段。

任何人都可以帮助如何通过 ajax post 调用使用客户端验证吗？

最佳答案

您必须检查您的表格是否有效。在您的代码中，$(this) 引用 btnSave 按钮，而不是您的表单。

尝试将代码更改为:

<script type="text/javascript">
    $(document).ready(function () {

        $("#btnSave").click(function () {

            var v = $('form').valid();

            var data = $('form').serialize();

            $.ajax({
                type: "POST",
                url: "@Url.Action("Edit")",
                data: data,
                cache: false
            })
            .fail(function (xhr, textStatus, errorThrown) {
                alert(xhr.responseText);
            })
            .success(function () {
                alert("Success");
            });
        });
    });
</script>

关于jquery - 部分 View - 客户端验证不适用于 jquery ajax post，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21595692/

25

4

0

文章推荐： jquery - 混合 Angularjs 和 Bootstrap 3 - 不兼容在哪里？

文章推荐： jQuery Validate Unobtrusive - Hook 到单个输入的错误事件

文章推荐： jQuery 自定义属性的非侵入式客户端验证

文章推荐： jquery - mouseenter/mouseleave 忽略覆盖元素

post - 防止双重HTTP POST
我已经制作了一个用于报名参加 Activity 的小应用程序。用户输入他们的数据，然后单击“登录我”。现在有时人们在数据库中是双倍的，完全相同的数据彼此之间很快被插入了两次。这只能表示某人单击了两次
post - post 方法中的未定义索引
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: PHP: “Notice: Undefined variable” and “Notice: Undefin
post - post 方法中的未定义索引
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: PHP: “Notice: Undefined variable” and “Notice: Undefin
post - 通过 HTTP 请求 POST 发送 Post 数据
我正在尝试将数据从 Textarea 发布到经典的 ASP 脚本，该脚本更新本地计算机上的 MS SQL，然后发布到另一台服务器上的 PHP 脚本。但是，执行以下操作不起作用，因为它会切断文本区域的数
ruby - 无法使用字符串 'post' 但使用 'POST' 识别表单。 html 包含 'post'
无效的代码: login_form = page.form_with(:method => 'post') 和有效的代码: login_form = page.form_with(:method =>
javascript - 当触发特定 POST 请求时修改 HTTP POST 请求正文(post 参数)
我希望能够在 HTTP Post 请求被触发时拦截它，然后修改其请求正文(或参数)，然后发送它。这怎么可能用 jquery/js 实现。谢谢最佳答案 Jquery ajax beforeSend
php - 你怎么写“Select (all) From (table) Where posting=$posting except this posting？(Mysql)
我想编写一个 Mysql 语句，从表(发布)中选择所有内容，其中标题类似于 $title 除了 $title 的标题。基本上我想显示某个帖子的所有相关帖子。我希望查询选择表中标题或详细信息中具有标题名
post - S3 POST 上传最小策略
我已经成功创建了一个简单的 HTML 表单，它将上传的文件发布到我的 Amazon S3 存储桶。我遵循了以下说明: http://aws.amazon.com/articles/1434 现在我正在
post - PHP POST 推荐人
我正在实现一个 PayPal IPN 页面，并想检查以确保请求真正来自 PayPal 而不是被欺骗。我假设 HTTP_REFERRER 不是一个好的检查方式？我已经尝试过这种方法，但变量只是空的。有
post - nginx 不将 POST 数据转发到 uwsgi -- [UPDATE] flask 不读取 post 数据
我有一个非常简单的设置有一个非常特殊的问题。该设置部署了 nginx Web 服务器以提供一些静态页面。它还有一个用于处理 POST 请求的后端 uwsgi 守护进程。我的nginx位置配置如下
javascript - 为什么我的 HTML POST 请求表单没有通过 Express app.post？如何将数字变量传递给另一个 POST 请求？
我认为我做错了什么，或者误解了我在网上阅读的有关 POST 和 GET 请求的内容。我在 myNumber.ejs 上有一个提交表单。当我按下提交时，有 Add.ejs 的 View 。 Add.ej
javascript - jQuery $.post 和 $.ajax POST 请求不适用于 Express 中的 app.post() 方法
我需要将数据从 Express 应用程序的前端发送到后端，然后使用需要显示该数据的 EJS 呈现页面。问题是 app.post() 方法，随后 res.render() 函数似乎没有完全执行或者当我
amazon-web-services - AWS cfn-hup 配置中的 post.add、post.update 与 post.delete
根据AWS Documentation对于 CloudFormation cfn-hup 帮助程序脚本，cfn-hup Hook 可以具有“要检测的以逗号分隔的条件列表”。这些条件/触发器可以是 po
php - HTTP 500 错误但确实将数据存储到数据库 - Wordpress new-post.php、post.php、edit-post.php 在更新数据结构和插件后无法正常工作
位于“wp-admin/includes/”的“post.php”文件中的 wordpress 函数“get_default_post_to_edit”无法正常工作。当我加载页面时:wp-admin
post - 带有空体的 Flutter post 方法
我使用请求库发布数据，但在服务器上收到空主体，没有传递任何数据。我在代码中遗漏了什么吗？ Map map = new Map(); map[csrfNameKey] = csrfName;
post - Siege 不发送 POST 数据
我正在尝试使用 siege 3.0.1 测试我的网站。但是好像siege不发送POST数据。这是我从网络浏览器收到的请求 POST / HTTP/1.0 Accept: text/html,appli
post - Feign 无法使用 POST 方法
我正在尝试为 stockfigher 游戏 api 编写包装器，只是为了了解 feign 是如何工作的，而且我在第一个 POST 方法中遇到了问题: @RequestMapping(method =
post - 如何使用 Jersey 获取原始 POST？
如何使用 Jersey 获取原始 POST？ @FormParam将不起作用，因为我发布的原始 JSON 不在任何特定的 POST 字段中。最佳答案 Jersey 带有一个用于将 JSON 映射到
post - 使用扩展创建 OData POST 实体
我正在尝试同时创建一个实体和两个子实体的实例。如果我将以下 JSON 发布到/user_objects 资源，它会很高兴地创建父 user_object 实体和链接的 User_object_att
post - IPV6 curl POST 请求
在 IPV6 中如何使用 IPV6 地址和端口号构建 CURL POST http 请求。任何类型的线程都将受到赞赏。尝试构建如下请求 >curl --interface 'http://[2001

首页

博学

6Ren·AI

商城

jquery - 部分 View - 客户端验证不适用于 jquery ajax post

部分查看代码