0

我有以下代码：

索引.cshtml：

    @using System.Web.Script.Serialization
@model MvcApplication3.ViewModels.PersonViewModel
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-2.1.0.js" type="text/javascript"></script>
    <!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<form class="transferListEditor" data-bind="submit: save">

    <p>First name: <input class='required' data-bind="value: firstName, uniqueName: true" /></p>
    <p>Last name: <input class='required' data-bind="value: lastName, uniqueName: true" /></p>

    <table>
        <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: activities">
            <tr>
                <td><input data-bind="value: Name" /></td>
                <td><a href="#" data-bind="click: $root.removeActivity">Remove</a></td>
            </tr>    
        </tbody>
    </table>
    <button data-bind="click: addActivity">Add activity</button>
    <button type="submit">Submit</button>
</form>

<script type="text/javascript">

    var initialData = @Html.Raw(new JavaScriptSerializer().Serialize(Model));

    function activity(name) {
        var self = this;
        self.Name = name;
    }

    // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
    var viewModel = {
        firstName: ko.observable(initialData.Person.FirstName),
        lastName: ko.observable(initialData.Person.LastName),
        activities: ko.observableArray(initialData.Person.Activities),

        removeActivity : function(activity) {

            viewModel.activities.remove(activity);
        },

        addActivity : function() {
            viewModel.activities.push(new activity(""));
        },

        save: function() {

            $.ajax({
                type: "POST",
                url: "/Home/Index",
                data: ko.toJSON({ Person: viewModel }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(data) {
                    $("#resultCount").html(data);
                }
            });
        }
    };

    // Activates knockout.js
    ko.applyBindings(viewModel);

    $("form").validate({ submitHandler: viewModel.save });
</script>

家庭控制器：

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ahb.Insite.HerdRegistration.WebUI;
using MvcApplication3.Models;
using MvcApplication3.ViewModels;

namespace MvcApplication3.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            var person = new Person {FirstName = "John", LastName = "Cool"};

            person.Activities = new List<Activity> { new Activity { Name = "Skiing" } };

            var personViewModel = new PersonViewModel  { Person = person };

            return View(personViewModel);
        }

        [HttpPost]
        public ActionResult Index(PersonViewModel personViewModel)
        {
            //Save it

            return View();
        }
    }
}

因此，当我单击提交时，如果名字和姓氏为空白，则会出现必填字段消息。问题是即使有一个必填字段缺少 viewModel 上的 save 方法，仍然会被调用。

有谁知道如何解决？

4

1 回答 1

2

尝试删除data-bind="submit: save"表格。

由于淘汰绑定是在 jQuery 验证绑定之前绑定的，它可能只是先点击保存代码。

我注意到使用带有敲除的 jQuery 验证的示例在表单元素上没有数据绑定。

更新： 我确认我可以通过将 data-bind 属性添加到示例来重现您的问题。

于 2012-08-10T00:01:01.960 回答