如何通过 JavaScript 创建 Telerik MVC 组合框答案

【问题标题】：How to create Telerik MVC Combobox via JavaScript如何通过 JavaScript 创建 Telerik MVC 组合框
【发布时间】：2015-01-29 08:16:52
【问题描述】：

我想实现动态添加组合框的功能，为此我必须使用 Telerik ComboBox。我把这个逻辑放到了按钮点击中。

$('#add-presenter').click(function (e) {
        e.preventDefault();

        var combobox = '@(Html.Telerik().ComboBox()
            .Name("Presenters[" + (Model.Count) + "]")
            .BindTo(new SelectList(LeaderList, "ID", "Value"))
            .ClientEvents(ev => ev.OnChange("onSelect"))
            .DataBinding(bnd => bnd.Ajax().Select("_LoadJournalist", "MonitoringFRadio"))
            .Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.StartsWith))
            .HtmlAttributes(new { style = "width:320px;vertical-align:middle;" }))';
        combobox = combobox.split('Presenters[' + index + ']').join('Presenters[' + (index + 1) + ']');
        index++;
        $('#presenters-block').append(combobox);
}

这段代码在浏览器中呈现如下：

$('#add-presenter').click(function (e) {
  e.preventDefault();
  var combobox = '<div class="t-widget t-combobox t-header" style="width:320px;vertical-align:middle;"><div class="t-dropdown-wrap t-state-default"><input class="t-input" id="Presenters[0]-input" name="Presenters[0]-input" type="text" /><span class="t-select t-header"><span class="t-icon t-arrow-down">select</span></span></div><input id="Presenters[0]" name="Presenters[0]" style="display:none" type="text" /></div>';
  combobox = combobox.split('Presenters[' + index + ']').join('Presenters[' + (index + 1) + ']');
  index++;
  $('#presenters-block').append(combobox);
  combobox = $('#Presenters\\['+index+'\\]').data('tComboBox');
});

问题在于数据绑定。此代码生成正确的 HTML，但新添加的列表不会“丢弃” 当我为新添加的项目执行combobox = $('#Presenters\\['+index+'\\]').data('tComboBox'); 时，我得到未定义（它存在，但未设置data），因此combobox.dataBind(dataSource) 方法不起作用。

【问题讨论】：

正确的 HTML 是不够的。数据绑定是通过 JavaScript API 完成的。 HTML 助手生成的代码还会呈现一个script，它在运行时会初始化组件。
我明白了，但是我该怎么做呢？
我真的不明白为什么助手不在你的代码中生成脚本标签。也许你需要在最后显式设置ToString()；也许这无关。我会采用不同的方法并使用 JavaScript API 构建/插入组合框。
我已经阅读了telerik.com/help/aspnet-mvc/…，但我仍然不明白如何使用他们的 API 构建组合框。似乎我需要使这个新组合框正常运行的部分在服务器上运行并且无论如何都不会暴露。看起来如果不回发并再次重绘所有组合框，从技术上讲是不可能做到这一点的

标签： javascript asp.net-mvc combobox kendo-ui telerik

【解决方案1】：

好的，我试过了，但没有回发就无法做到这一点。这是问题的粗略解决方案：做ajax请求并用部分视图替换内容：

局部视图：

@model List<int>
@{
    var LeaderList = ViewData["LeaderList"] as List<ListItem>;
}
<div id="presenters-ajax-wrapper">
<div id="presenters-block">
    @(Html.Telerik().ComboBox()
            .Name("Presenters[0]")
            .BindTo(new SelectList(LeaderList, "ID", "Value"))
            .ClientEvents(ev => ev.OnChange("onSelect"))
            .DataBinding(bnd => bnd.Ajax().Select("_LoadJournalist", "MonitoringFRadio"))
            .Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.StartsWith))
            .HtmlAttributes(new { style = "width:320px;vertical-align:middle;" }))

    @for(int i=1; i<Model.Count; i++)
    {
        var item = LeaderList.FirstOrDefault(l => l.ID == Model[i]);
        var value = item != null ? item.Value : "";
        @(Html.Telerik().ComboBox()
              .Name("Presenters[" + i + "]")
              .Value(value)
              .BindTo(new SelectList(LeaderList, "ID", "Value"))
              .ClientEvents(ev => ev.OnChange("onSelect"))
              .DataBinding(bnd => bnd.Ajax().Select("_LoadJournalist", "MonitoringFRadio"))
              .Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.StartsWith))
              .HtmlAttributes(new { style = "width:320px;vertical-align:middle;" }))

    }
</div>
<button id="add-presenter" class="t-button">+</button>
<script type="text/javascript">
    var index = @(Model.Count == 0 ? 0 : Model.Count-1);

    $('#add-presenter').click(function (e) {
        e.preventDefault();
        index++;
        var msg = $('#monitForm').serialize();
        $.ajax({
            url: '@Url.Action("_GetPresenters","MonitoringFRadio")'+'?count='+(index+1),
            data: msg,
            type: 'POST',
            success: function(data) {
                $('#presenters-ajax-wrapper').html(data);
            }
        });
    });
</script>
</div>

行动：

[HttpPost]
public virtual ActionResult _GetPresenters(EditableMonitoring model, int count)
{
  //some logic here...
  return PartialView("EditorTemplates/Presenters", model.Presenters);
}

好吧，也许最好创建另一个局部视图来呈现单个组合框，而不是重绘所有组合框...

【讨论】：