javascript - 如何设置 Kendo 文本框的值并将该值传递给 Controller ​​以使模型有效？

Question

我在 Javascript 中设置了一个 Kendo 文本框的值，该值显示在屏幕上，但是当它到达 Controller 时收到一个错误，指出该字段为 null 并且模型状态无效。如何设置文本框的值并保留该值以使模型状态有效？

这是我所拥有的:

• 使用 C# 的 ASP.net MVC Visual Studio 项目
• Kendo/Telerik 调度程序控制
• 模板中定义的调度程序的事件弹出窗口(单独的 CSHTML 文件)
• 在模板中，字段标题的 Kendo TextBoxForControl
• 同样在模板中，字段 TaskSourceWoId 的 Kendo 下拉列表

当用户从下拉列表中选择一个值时，Javascript 会像这样设置标题的值:

$("#Title").val("WO# " + workOrderID);

文本显示在屏幕上(见下面的屏幕截图)。但是，当用户单击保存按钮时，他们会收到标题不能为空的错误。如果我在 Controller 中查看用户单击保存时点击的方法，我可以看到模型中的 Title 确实为 null，这导致模型状态无效。我添加了 Javascript 以在使用上面的代码设置它之后立即获取 Title 的值并且它是空的。

我尝试了几种不同的方法在 javascript 中设置标题；主要是沿着这样的路线:

alert($("#Title").data("kendoTextBox").value());

并返回“未找到”错误。

那么如何设置 Title 使其不仅出现在屏幕上，而且会被 Controller 识别并且不会使模型状态无效？

这是第一次打开时的事件弹出窗口。请注意此时标题为空白:

从下拉列表中选择工作订单后，标题设置为包含此值，标题现在在屏幕上有一个值:

$("#Title").val("WO# "+ workOrderID);

但是，当用户点击保存并且代码转到 Controller 时，Model State 无效并且 Title 的值为 null:

这是调度程序的代码:

@(Html.Kendo().Scheduler<SchedTasksModel>()
       .Name("scheduler")
       .Date(DateTime.Today)
       .StartTime(DateTime.Parse(string.Format("{0} {1}", DateTime.Today.ToShortDateString(), "07:00")))
       .Height(600)
       .Views(views =>
       {
             views.DayView();
             views.WeekView(weekView => weekView.Selected(true));
             views.MonthView();
             views.AgendaView();
       })
       .Editable(editable => editable.TemplateName("KoorsenEditor"))
       .Timezone("Etc/UTC")
       .Events(e => { e.Edit("sched_edit"); })
       .Resources(resource =>
       {
            resource.Add(m => m.TaskType)
                    .Title("Type")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataColorField("Color")
                    .BindTo(new[]
                    {
                          new {Text = "Work Order", Value = 1, Color = "#6eb3fa"},
                          new {Text = "Event", Value = 2, Color = "#f58a8a"}
                    });

            resource.Add(m => m.TaskSourceId)
                    .Title("Wo")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(ds => ds.Read(read => read.Action("GetSchedWo", "Sched", new { userID = ViewBag.CurrUser, userType = ViewBag.CurrUsrType })));

            resource.Add(m => m.TaskSourceEvtId)
                    .Title("Evt")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .BindTo(new[]
                     {
                         new {Name = "Meeting", Id = 1},
                         new {Name = "Vacation", Id = 2},
                         new {Name = "Sick Time", Id = 3},
                         new {Name = "Other", Id = 4}
                      });
            resource.Add(m => m.TaskResId)
                    .Title("Res")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(ds => ds.Read(read => read.Action("GetTechRes", "Sched")));
                      })
                    .DataSource(d => d.Model(m =>
                    {
                          m.Id(f => f.TaskId);
                          m.Field(f => f.Title).DefaultValue("");
                          m.Field(f => f.TaskType).DefaultValue(1);
                          m.RecurrenceId(f => f.RecurrenceId);
                    })
                    .Events(e =>
                     {
                          e.Error("error_handler");
                          e.Sync("onSchedulerSync");
                     })
                     .Create("WrkOrdTasksCreate", "Sched")
                     .Read("WrkOrdTasksRead", "Sched")
                     .Update("WrkOrdTasksUpdate", "Sched")
                     .Destroy("WrkOrdTasksDestroy", "Sched")
                     .Filter(filters => filters.Add(model => model.TaskResId).IsNotEqualTo(0))
                      ))

定义文本框的Editor.cshtml

@(Html.TextBoxFor(model => model.Title, new {@class = "k-textbox", data_bind = "value:title"}))

Javascript 设置标题字段的值

function onWorkOrderChange(e) {
    try {
        var workOrderID = $("#TaskSourceWoId").data("kendoDropDownList").value();
        if ($("#Title").val() == "") {
            $("#Title").val("WO# " + workOrderID);
        }
    } catch (ex) {
        alert(ex);
    }
}

Answer 1

收到 Telerik 的回复。他们的回答是:

In order to notify the model for the automatically assigned Title value, you will have to trigger the change event of the Title field

对于文本框，我只是将 change() 添加到赋值的末尾:

$("#Title").val("WO# " + workOrderID).change();

这对下拉列表不起作用。我终于在另一个 StackOverflow 页面上找到了它的语法:here

所以在我的例子中，用于下拉列表的代码是:

$("#TaskResId").data("kendoDropDownList").value('@ViewBag.CurrUser');
$("#TaskResId").data("kendoDropDownList").trigger("change");