Question

我有一个带有Kendo UI Grid的MVC3 Web应用程序。我正在使用弹出模板编辑功能。我在模板视图中有一个DropdownList。

一切都很好......现在我添加了一个Instructions div和一个Description div，我想用它来向用户说明，以及所选项目的描述。这些说明取决于下拉列表的选定值。在下拉列表中选择项目后，我需要对控制器进行ajax调用以获取指令和选择说明。我已经尝试了很多东西，但似乎无法让它甚至触发对控制器的调用。

任何帮助将不胜感激。谢谢，墨菲

这是网格代码：

@(Html.Kendo()
    .Grid<VW40.Web.Models.CompanyDefaultDataItemViewModel>()
    .Name("Grid")
    .Columns(c =>
    {
        c.ForeignKey(p => p.Type, (System.Collections.IEnumerable)@ViewBag.CompanyDefaultDataItemTypes, "CompanyDefaultDataItemTypeId", "Name").Title("Default Data Type").Width(200);
        c.Bound(p => p.Data);
        c.Bound(p => p.Instructions);
        c.Bound(p => p.Description);
        c.Command(command => { command.Edit(); command.Destroy(); });
    })
    .ToolBar(t => t.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("CompanyDefaultDataItem").Window(w => w.Title("Add/Edit Company Default Data Item").HtmlAttributes(new { @style = "width:100px;" })))
    .DataSource(ds => ds
        .Ajax()
        .Batch(false)
        .ServerOperation(false)
        .Events(events => events.Error("error"))
        .Model(m => m.Id(p => p.CompanyDefaultDataItemId))
        .Read(read => read.Action("CompanyDefaultDataItems_Read", "Company", new { Id = @ViewBag.CompanyId }))
        .Update(update => update.Action("CompanyDefaultDataItem_Update", "Company"))
        .Create(update => update.Action("CompanyDefaultDataItem_Add", "Company", new { Id = ViewBag.CompanyId }))
        .Destroy(update => update.Action("CompanyDefaultDataItem_Delete", "Company"))
    )
)

以下是添加/编辑模板以及我尝试在脚本中执行我想要的操作：

@{
    Layout = null;
}

@model VW40.Web.Models.CompanyDefaultDataItemViewModel

@Html.HiddenFor(model => model.CompanyId)
<br />
<div class="editor-label">
    @Html.LabelFor(model => model.Type)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Type, new { @id = "typeDropdown_Id" })
    @Html.ValidationMessageFor(model => model.Type)
</div>
<br />

<div class="editor-label">
    @Html.LabelFor(model => model.Data)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Data, new { style = "width:250px" })
    @Html.ValidationMessageFor(model => model.Data)
</div>
<br />

<div style="padding-left:50px">Instructions:</div>
<div id="instructions" style="width:200px">
    @Model.Instructions
</div>
<br />

<div style="padding-left:50px">Description:</div>
<div id="description" style="width:200px">
    @Model.Description
</div>

    <script type="text/javascript">
        $('#typeDropdown_Id').click(function () {
            var typeId = $('#typeDropdown_Id option:slected').val();
            alert("selected type = " + typeId);
            $.getJSON("/Company/GetJsonCompanyDefaultDataItemTypeInstructionsAndDescription/" + typeId, function (data) {
                $('#instructions').val(data.Instructions);
                $('#description').val(data.Description);
            });
        });
    </script>

Answer 1

以下是我在模板中的操作：

@Html.Kendo().DropDownListFor(model => model.Type).BindTo(new SelectList(new List<SelectListItem> { new SelectListItem { Value = "0", Text = "Type1" }, new SelectListItem { Value = "1", Text = "Type 2" } }, "Value", "Text")).Events(x => { x.Change("onTypeChange"); })

<script type="text/javascript">
        function onTypeChange(args) {
            var typeId = $('#type option:slected').val();
            alert("selected type = " + typeId);
            $.getJSON("/Company/GetJsonCompanyDefaultDataItemTypeInstructionsAndDescription/" + typeId, function (data) {
                $('#instructions').val(data.Instructions);
                $('#description').val(data.Description);
            });
        };
    </script>

看看它是否有帮助（抱歉延迟）

使用AJAX调用Kendo UI网格编辑模板更改DropdownList

1 个答案: