如何在选项中显示属性但在选择时获取 id答案

【问题标题】：How can I display a property in options but get the id when selected如何在选项中显示属性但在选择时获取 id
【发布时间】：2023-04-06 17:26:01
【问题描述】：

这是我的学生课（简体）

public class Student
{
    public int StudentId { get; set; }
    public string LastName { get; set; }
    public string FirstName { get; set; }
}

我有一个对象集合：

public JsonResult FetchSample()
{
    List<Students> students = StudentDataAccess.GetList();

    return Json(students, JsonRequestBehavior.AllowGet); //this will be loaded in students ko.observableArray([])
}

我使用 knockoutjs viewmodel 来获取学生的选项列表。但是我怎么能只显示 LastName + ", " + FirstName 但是当我选择一个项目时，它会得到 StudentId 呢？

这是我的 knockoutjs 视图模型：

$(function() {
    ko.applyBindings(studVm);
    studVm.GetStudents();

});

var studVm =
{
    students: ko.observableArray([]),
    studentSelected: ko.observable(),
    GetStudents: function () {
        var self = this;
        $.ajax({
            url: '/OB/FetchSample',
            type: 'GET',
            dataType: 'json',
            data: ko.toJSON(this),
            contentType: 'application',
            success: function (data) {
                //  self.students.push(data);
                self.students(data);
            }
        });
    }
}

这是我的html

    <p>
        Student:
        <select data-bind="options: students, optionsCaption: 'Select student', value: studentSelected"></select>
    </p>

<button type="submit">SAVE</button>

更新：

我添加了按钮元素：SAVE。单击保存后，将触发此 ActionResult 方法：

public ActionResult FilePayment(Payment payment)
{
    PaymentContext db = new PaymentContext();
    Payment newPay = new Payment();

    newPay.StudentId = payment.StudentId; //this should be from the selected drop down list
    newPay.PayPrice = payment.PayPrice; //I just omitted the html element for this.

    db.Paymnents.Add(newPay);
    db.SaveChanges();
    return View();
}

【问题讨论】：

你能显示控制器方法吗？
就像这样：public ActionResult OfficialBusinessFORM() { return View(); }
JsonResult 负责检索（没有错误）
我的意思是，您想在哪里“获取 StudentId”？您的确切问题是什么，您尝试过没有运气的事情？请告诉我们。
我更新了控制器的帖子

标签： c# knockout.js

【解决方案1】：

首先，您必须创建与您的服务器端Student 类匹配的客户端Student 类（我将其称为子视图模型）。请注意，客户端 Student 类必须具有 fullName 属性，如下所示。

function Student(id, fName, lName) {
    this.studentId = id;
    this.firstName = fName;
    this.lastName = lName;
    this.fullName = fName + ' ' + lName;
}

第二，编辑你的ajax成功回调来创建一个Student数组，如下所示。

success: function (data) {
    for (var i = 0; i < data.length; i++) {
        // please pay attention at the UPPER case/lower case below, it could be data[i].StudentId depends on your server JSON converter setting
        var student = new Student(data[i].studentId, data[i].lastName, data[i].firstName);
        self.students.push(student);
    }
}

最后，如下编辑您的绑定。

<select data-bind="options: students, optionsText: 'fullName', optionsValue: 'id', value : studentSelected"></select>

我在这里创建了一个 CodePen https://codepen.io/trgiangvp3/pen/veJryp

【讨论】：