使用jQuery多选，动态创建问题MVC UIHint / Parital视图 [英] MVC UIHint/Parital view with JQuery multiselect, dynamic creation issue

问题描述

我一直用这个的教程来创建屏幕，用户可以在一个给定的屏幕上添加额外的输入域

I've been using this tutorial to create a screen where a user can add additional input fields on a given screen

而不是使用文本框都创建Iv'e那将呈现一个多选的JQuery窗口部件UIHint /局部视图中（我使用的这个组件）

Instead of using all textboxes Iv'e created a UIHint/Partial view that'll render a multi-select JQuery widget (I'm using this component)

视图模型为每个行项目

 public class Micros
    {
        [UIHint("JsonComboBox")]
        [AdditionalMetadata("id", "Lab_T_ID")]
        [AdditionalMetadata("description", "Description")]
        [AdditionalMetadata("action", "LabTestOptions")]
        [AdditionalMetadata("controller", "Micro")]
        [AdditionalMetadata("noneSelectedText", "Test")]
        [AdditionalMetadata("comboboxWidth", "200")] 
        [DisplayName("Test")]
        public Nullable<int> Lab_T_ID { get; set; }

        [UIHint("JsonComboBox")]
        [AdditionalMetadata("id", "Lab_SD_ID")]
        [AdditionalMetadata("description", "Description")]
        [AdditionalMetadata("action", "LabSampleDetailOptions")]
        [AdditionalMetadata("controller", "Micro")]
        [AdditionalMetadata("noneSelectedText", "Sample Details")]
        [AdditionalMetadata("comboboxWidth", "300")]
        [DisplayName("Sample Details")]
        public Nullable<int> Lab_SD_ID { get; set; }

        [DisplayName("Result")]
        public string Result { get; set; }
    }

局部视图/ UIHint

@model int?
@{
    var values = ViewData.ModelMetadata.AdditionalValues;
}
<select id="@values["id"]" multiple="multiple" style="width:@values["comboboxWidth"]px" > </select>
<script type="text/javascript">

        $.getJSON('@Url.Action((string)values["action"], (string)values["controller"])', 
                     null,
                    function (j) {
                        var options = '';

                    for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].@values["id"] + '">' + j[i].@values["description"] + '</option>';
                    }
                    $('#@values["id"]').html(options);
                    $('#@values["id"] option:first').attr('selected', 'selected');
        });


    setTimeout(function () {

     $("#@values["id"]").multiselect({
       multiple: false,
       header: "Select an option",
       noneSelectedText: '@values["noneSelectedText"]',
       selectedList: 1
    });

    }, 300);

</script>

的组件上呈现初始页面加载很好，但是当加入的项目，他们得到补充...但它似乎JavaScript不执行/被添加。

The components render fine on the initial page load, but when add the items, they get added... but it seems that the javascript doesn't execute/get added..

任何想法？还在调试这个问题，会尽快，我觉得它发布的修补程序，但我希望有人能指出我在正确的方向

Any ideas? Still debugging this issue, will post the fix as soon as I find it, but I'm hoping someone can point me in the right direction

更新

到目前为止，我已经发现（我们将它看起来像），在UIHint /局部模板没有得到所有当用户点击添加其他项目呈现。 （否则，选择将项目进行填充，而JQuery的部件将被应用）

So far I've discovered that (We'll it looks like), the UIHint/Partials don't get rendered at all when the user clicks to add another item. (Otherwise the select will be populated with items, and the JQuery widget will be applied)

推荐答案

我会建议你从你的部分删除所有的JavaScript。的JavaScript不应与标记进行混合。所以你的编辑器模板应该只包含标记：

I would recommend you to remove all javascript from your partial. Javascript shouldn't be mixed with markup. So your editor template should contain only markup:

@model int?
@{
    var values = ViewData.ModelMetadata.AdditionalValues;
}


<span>
    <select multiple="multiple" style="width:@values["comboboxWidth"]px" data-url="@Url.Action((string)values["action"], (string)values["controller"])" data-noneselectedtext="@values["noneSelectedText"]" data-value="@values["id"]" data-text="@values["description"]"></select>
</span>

，然后在一个单独的JavaScript文件，你将不得不将被用来当的添加功能的另一... 的按钮被点击如图史蒂芬·桑德森的文章：

and then in a separate javascript file you will have a function which will be used when the Add another... button is clicked as shown in Steven Sanderson's article:

$('#addItem').click(function() {
    $.ajax({
        url: this.href,
        cache: false,
        success: function(html) { 
            // Here's the place to attach any plugins to the given row:

            var select = $('select', html);
            $.getJSON(select.data('url'), function(options) {
                $.each(options, function() {
                    select.append(
                        $('<option/>', {
                            value: this[select.data('value')],
                            text: this[select.data('text')]
                        })
                    );
                });

                select.multiselect({
                    multiple: false,
                    header: 'Select an option',
                    noneSelectedText: select.data('noneselectedtext'),
                    selectedList: 1
                });

                $('#editorRows').append(select);

            });
        }
    });
    return false;
});

这篇关于使用jQuery多选，动态创建问题MVC UIHint / Parital视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！