Kendo UI PopUp没有将值传递给控制器

时间:2013-03-02 23:05:00

标签: asp.net-mvc-3 kendo-grid

网格和弹出窗口工作正常,但我在创建模式下输入的值不会传递回控制器。查看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进行弹出,则信息将传递给我的控制器;但是,我想控制弹出窗口的布局,我也有级联下拉菜单(可以工作),因此也就是编辑器模板。

我的问题是为什么我输入弹出窗口的值不会传递给我的控制器?

2 个答案:

答案 0 :(得分:1)

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

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

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

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

我还需要处理save事件并更新模型:

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;            
    }

希望这有帮助!

答案 1 :(得分:1)

kendo弹出编辑,从网格中取值而不是模板,当您输入值时,模板会修改新行的单元格。 例如;

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

这些都有默认值。如果您不更改其值,则不会将其发布到控制器。对于发布,您必须将值写入网格单元格。

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