javascript - 如何将 knockout 模型传递给 jsonresult 参数

Question

我试图将整个对象传递给 jsonresult 方法。但还是会出现错误。这可能是我绑定(bind)它的方式，但我不确定。我是 JS 和 KOJS 的新手。单击绑定(bind)到 LogUser 方法的登录按钮后，它应该调用 Authenticate(Employee p) 方法。

这是我的类(class)模型

public class Employee
{
    [Key]
    public long AutoId { get; set; }

    [Required]
    Display(Name = "Employee ID")]
    public string EmployeeId { get; set; }

    [Required]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string EmployeePassword { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string MiddleName { get; set; }
}

这是我的knockoutjs View 模型

$(function () {
    ko.applyBindings(LoginVm);
});

//VIEW MODEL. MODEL IS BELOW THIS
var LoginVm = {

    thisEmp: ko.observable(EmpObject),

    LogUser: function () {
        var self = this;

        //trying to check if thisEmp properties has values by alerting
        alert("ID: " + thisEmp.EmployeeId() + " Password: " + thisEmp.EmployeePassword());

        $.ajax({
            url: '/Employee/AuthenticateUser',
            type: 'POST',
            dataType: 'json',
            data: ko.toJSON(thisEmp),
            contentType: 'application/json',
            success: function (errorMsg) {
                if (errorMsg === '') {

                }
            }
        });


    }
};

//MODEL
var EmpObject = {
    EmployeeId: ko.observable(''),
    EmployeePassword: ko.observable('')
}

这是我的观点以及我如何绑定(bind)属性

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Employee</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.EmployeeId)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.EmployeeId, new { data_bind="value: thisEmp.EmployeeId()"})
            @Html.ValidationMessageFor(model => model.EmployeeId)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.EmployeePassword)
        </div>
        <div class="editor-field">
            @Html.PasswordFor(model => model.EmployeePassword, new { data_bind="value: thisEmp.EmployeePassword()"})
            @Html.ValidationMessageFor(model => model.EmployeePassword)
        </div>B

        <p>
            @*<input type="submit" value="Create"/>*@
            <input type="button" value="Login" data-bind="click: LogUser"/>
        </p>
    </fieldset>
}

这是错误

Uncaught TypeError: Unable to process binding "value: function (){return thisEmp().EmployeeId }"
Message: Cannot read property 'EmployeeId' of undefined
    at value (eval at createBindingsStringEvaluator

Answer 1

抛出错误是因为您在EmpObject之前定义了LoginVm。您需要更改它们的声明顺序。

您确定这是产生此错误的代码吗？在您看来，您正在绑定(bind) thisEmp.EmployeeId() 但错误表明无法绑定(bind) thisEmp().EmployeeId。我认为您尝试了这两种方法，但错误仍然存​​在。无论哪种方式，都不需要将 thisEmp 设为可观察对象。只要属性是可观察的就足够了。

因此，将代码更改为:

$(function () {
    ko.applyBindings(new LoginVm());
});

//MODEL
var EmpObject = {
    EmployeeId: ko.observable(''),
    EmployeePassword: ko.observable('')
}

//VIEW MODEL. MODEL IS BELOW THIS
var LoginVm = function() {
    var self = this;

    self.thisEmp = EmpObject;

    self.LogUser = function () {
        var self = this;

        //trying to check if thisEmp properties has values by alerting
        alert("ID: " + self.thisEmp.EmployeeId() + " Password: " + self.thisEmp.EmployeePassword());

        $.ajax({
            url: '/Employee/AuthenticateUser',
            type: 'POST',
            dataType: 'json',
            data: ko.toJSON(self.thisEmp),
            contentType: 'application/json',
            success: function (errorMsg) {
                if (errorMsg === '') {

                }
            }
        });
    }
};

并将 View 中的绑定(bind)更改为:

@Html.TextBoxFor(model => model.EmployeeId, new { data_bind="value: thisEmp.EmployeeId"})
@Html.PasswordFor(model => model.EmployeePassword, new { data_bind="value: thisEmp.EmployeePassword"})