更改DropdownList时使用AJAX调用的剑道UI网格编辑模板

我有一个带有剑道UI网格的MVC3网络应用程序。 我正在使用弹出模板编辑功能。 我在模板视图中有一个下拉列表

一切都很好。。。现在，我添加了一个

说明

div和一个

说明

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"))
    )
)

@（Html.Kendo（）
.Grid（）
.名称（“网格”）
.列（c=>
{
c、 ForeignKey（p=>p.Type，（System.Collections.IEnumerable）@ViewBag.CompanyDefaultDataItemTypes，“CompanyDefaultDataItemTypeId”，“Name”）.Title（“默认数据类型”）.Width（200）；
c、 界限（p=>p.Data）；
c、 绑定（p=>p.Instructions）；
c、 界限（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（“添加/编辑公司默认数据项”）.HtmlAttributes（新的{@style=“width:100px；”}））
.DataSource（ds=>ds
.Ajax（）
.批（假）
.ServerOperation（错误）
.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\u Update”，“Company”））
.Create（update=>update.Action（“CompanyDefaultDataItem_Add”，“Company”，new{Id=ViewBag.CompanyId}））
.Destroy（update=>update.Action（“CompanyDefaultDataItem\u 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>

@{
布局=空；
}
@型号VW40.Web.Models.CompanyDefaultDataItemViewModel
@Html.HiddenFor（model=>model.CompanyId）


@LabelFor（model=>model.Type）
@EditorFor（model=>model.Type，新的{@id=“typeDropdown\u id”}）
@Html.ValidationMessageFor（model=>model.Type）


@LabelFor（model=>model.Data）
@Html.TextBoxFor（model=>model.Data，新的{style=“width:250px”}）
@Html.ValidationMessageFor（model=>model.Data）


说明：
@模型。说明


说明：
@型号.说明
$（'#typeDropdown_Id'）。单击（函数（）{
var typeId=$（'#typeDropdown_Id选项：slected'）.val（）；
警报（“所选类型=”+类型ID）；
$.getJSON（“/Company/GetJsonCompanyDefaultDataItemTypeInstructionsAndDescription/”+typeId，函数（数据）{
$（'指令'）.val（数据.指令）；
$（'#description'）.val（data.description）；
});
});

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

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

@Html.Kendo（）
函数onTypeChange（args）{
var typeId=$（'#type option:slected'）.val（）；
警报（“所选类型=”+类型ID）；
$.getJSON（“/Company/GetJsonCompanyDefaultDataItemTypeInstructionsAndDescription/”+typeId，函数（数据）{
$（'指令'）.val（数据.指令）；
$（'#description'）.val（data.description）；
});
};

---

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

能否显示dropdownlist的代码？@Tejo Hope this help.var typeId=$（“#typeDropdown_Id option:slected”）.val（）；选项：选择。。它不应该被“选中”吗？@Tejo谢谢…我纠正了，但它仍然不起作用。也许这与KendoUIGrid如何处理弹出的添加/编辑模板有关。也许这就是javascript代码中从未出现断点的原因。我会使用：$（'#type'）.val（）@Tejo来访问下拉列表的值……也许使用Kendo.DropDownListFor而不是EditorFor控件会起作用。谢谢，我试试看。记住，这是一个编辑模板，剑道网格加载到弹出窗口中。是的，但我也这样使用它。我现在编辑了我的答案，因为我在javascript中发现了一个输入错误