javascript - 如何通过 JavaScript 创建 Telerik MVC 组合框

Question

我想实现动态添加组合框的功能，因此我必须使用 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');
});

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

Answer 1

好的，我尝试过，但在没有回发的情况下无法做到这一点。这是该问题的粗略解决方案:执行ajax请求并用部分 View 替换内容:

部分 View :

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

好吧，可能最好创建另一个部分 View 来渲染单个组合框，而不是重新绘制所有组合框......