Kendo UI PopUp未将值传递给控制器

Question

除了我在创建模式中输入的值不会被传递回我的控制器之外，网格和弹出窗口都可以正常工作。查看JS控制台没有显示任何错误。监视Fiddler中的创建过程也显示没有传递任何值，尽管我的表单元素显示了。

调试时，我的控制器中的模型是空的。

下面是网格的定义：

@(Html.Kendo().Grid<MyApp.Domain.Entities.TaktInterruptionViewModel>()
.Name("Interruptions")
.Columns(columns =>
    {
        columns.Bound(i => i.TaktInterruptionId).Hidden().IncludeInMenu(false);
        columns.Bound(i => i.DateCreated).Title("Date").Width(75).Format("{0:d}");
        columns.Bound(i => i.ActionCount).Title("Actions").Width(50).Hidden(true);
        columns.Bound(i => i.MeetingType).Title("Meeting   Type").Width(100).Hidden(true);
        columns.Bound(i => i.AreaName);
        columns.Bound(i => i.TypeName);
        columns.Bound(i => i.Responsible);
        columns.Bound(i => i.Description).Width(300);
        columns.Bound(i => i.Interruption).Width(75).Hidden(true);
        columns.Bound(i => i.TaktMissed).Title("Missed").Width(75);
    })
.ClientDetailTemplateId("ActionsTemplate")
.ToolBar(toolbar => toolbar.Create().Text("Add Interruption"))
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("Create").Window(w => w.Title("Interruption").Name("addInterruption").Modal(true)))
.DataSource(datasource => datasource.Ajax()
    .Model(model => model.Id(p => p.TaktInterruptionId))
    .ServerOperation(false)
    .PageSize(5)
    .Create(create => create.Action("Create", "Home"))
    .Read(read => read.Action("GetInterruptions", "Home")))
.Groupable()
.Pageable()
.Sortable()
.Filterable()
.ColumnMenu()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resize => resize.Columns(true))
.Events(events => events.Change("displayChart"))
)

我的创建编辑器模板如下：

@model MyApp.Domain.Entities.TaktInterruptionViewModel
@{
    ViewBag.Title = "Index";
}

<div class="span-14" style="padding: 10px;">
    @Html.ValidationSummary(true)
    <hr class="space" />
    <div>
        @Html.LabelFor(model => model.DateCreated)<br />
        @(Html.Kendo().DatePicker().Name("DateCreated").Value(DateTime.Today))
        <br />
        @Html.ValidationMessageFor(model => model.DateCreated, null, new { style =    "color:red;" })
    </div>
    <hr class="space" />
    <div class="span-7">
        @Html.LabelFor(model => model.AreaId)<br />
        @(Html.Kendo().DropDownListFor(model => model.AreaId)
            .Name("AreaId")
            .HtmlAttributes(new { style = "width:200px" })
            .OptionLabel("Select Area...")
            .DataTextField("AreaName")
            .DataValueField("AreaId")
            .DataSource(source =>
                {
                    source.Read(read =>
                        {
                            read.Action("GetAreas", "Area");
                        });
                })
         )
        <br />
        @Html.ValidationMessageFor(model => model.AreaId)
    </div>
    <div class="span-6">
        @Html.LabelFor(model => model.TaktInterruptionTypeId)<br />
        @(Html.Kendo().DropDownListFor(model => model.TaktInterruptionTypeId)
            .Name("TaktInterruptionTypeId")
            .HtmlAttributes(new { style = "width: 200px" })
            .OptionLabel("Select Type...")
            .DataTextField("TypeName")
            .DataValueField("TaktInterruptionTypeId")
            .DataSource(source =>
                {
                    source.Read(read =>
                        {
                            read.Action("GetTypes", "Area").Data("filterTypes");
                        }).ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("AreaId")
         )
        <br />
        @Html.ValidationMessageFor(model => model.TaktInterruptionTypeId, null, new { style = "color:red;" })
    </div>
    <hr class="space" />
    <div class="span-11">
        @Html.LabelFor(model => model.Description)<br />
        @Html.TextAreaFor(model => model.Description, new { @class = "multi-line" })
        <br />
        @Html.ValidationMessageFor(model => model.Description, null, new { style = "color:red;" })
    </div>
    <hr class="space" />
    <div class="span-5">
        @Html.LabelFor(model => model.Interruption)<br />
        @(Html.Kendo().NumericTextBox().Name("Interruption").Format("#.0").Value(0))
        <br />
        @Html.ValidationMessageFor(model => model.Interruption)
    </div>
    <div class="span-6">
        @Html.LabelFor(model => model.TaktMissed)<br />
        @(Html.Kendo().NumericTextBox().Name("TaktMissed").Format("#.0").Value(0))
        <br />
        @Html.ValidationMessageFor(model => model.TaktMissed)
    </div>
    <hr class="space" />
    <div>
        @Html.LabelFor(model => model.Responsible)<br />
        @Html.EditorFor(model => model.Responsible, new { @class = "k-input k-textbox" })
        <br />
        @Html.ValidationMessageFor(model => model.Responsible, null, new { style = "color:red;" })
    </div>
    <hr class="space" />
    <hr class="space" />
</div>

<script type="text/javascript">
    function filterTypes() {
        return {
        AreaID: $("#AreaId").val()
        };
    }
</script>

我的控制器创建方法是：

[HttpPost]
    public ActionResult Create([DataSourceRequest] DataSourceRequest request, MyApp.Domain.Entities.TaktInterruptionViewModel taktInterruption)
    {
        try
        {
            if (ModelState.IsValid)
            {
                // code removed for brevity
            }

            return Json(ModelState.ToDataSourceResult());
        }
        catch(Exception ex)
        {
            TempData["message"] = "There was a problem saving the takt interruption.\n" + ex.Message;
            return View();
        }
    }

如果我从等式中删除编辑器模板，并允许kendo执行弹出窗口，则信息将传递给我的控制器；但是，我希望控制弹出窗口的布局，并且我还具有级联下拉菜单(即编辑器模板)。

我的问题是，为什么我在弹出窗口中输入的值没有传递给我的控制器？

Answer 1

我不知道这是一个错误还是对使用自定义编辑器模板的限制，但是，为了解决这个问题，我订阅了JavaScript编辑事件并设置了下拉列表值。

function reassignVacancy_Editing(e)
{
    e.preventDefault();

    var reassignUserList = $("#reassignUserList").data("kendoComboBox");

    reassignUserList.value(e.model.UserId);
}

我还需要处理保存事件并更新模型：

function reassignVacancy_Saving(e)
    {
        // Update the ViewModel

        var reassignUserList = $("#reassignUserList").data("kendoComboBox");

        e.model.UserName = reassignUserList.dataItem().FullName;  // For the benefit of the grid
        e.model.UserId = reassignUserList.dataItem().Id;            
    }

希望这能有所帮助！

Answer 2

kendo弹出编辑，从网格而不是模板中取值，当你输入一个值时，模板会修改新行的单元格。例如：

 @(Html.Kendo().DatePicker().Name("DateCreated").Value(DateTime.Today))
 @(Html.Kendo().NumericTextBox().Name("TaktMissed").Format("#.0").Value(0))

这些都有一个默认值。如果你不改变它们的值，它们就不会被发送到控制器。对于posting，您必须将值写入网格单元格中。

    var firstItem = $('#GridName').data().kendoGrid.dataSource.data()[0];
    firstItem.set('ColumnName', DefaultValue);