0

我有一个带有 Kendo UI Grid 的 MVC3 Webapp。我正在使用弹出模板编辑功能。我在模板视图中有一个下拉列表。

一切都很好......现在我添加了一个Instructionsdiv 和一个Descriptiondiv，我想用它来为用户提供说明，以及所选项目的描述。这些说明取决于下拉菜单的选定值。在下拉列表中选择一个项目后，我需要对控制器进行 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>
4

1 回答 1

0

这是我在模板中所做的：

@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>

看看有没有帮助（抱歉耽搁了）

于 2013-04-18T12:05:29.473 回答