MVC UIHint/Parital观点与jQuery多选，动态创建问题

Question

我一直在使用这种tutorial创建一个屏幕，用户可以在给定屏幕上添加额外的输入字段

而不是使用文本框所有的Iv'e创建将呈现多选JQuery的小部件UIHint /局部视图（我使用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不执行/获取添加..

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

更新

到目前为止，我发现（我们”它看起来像），当用户点击添加另一个项目时，UIHint/Partial不会被渲染。 （否则，选择将物品填充，并JQuery的部件将被应用）

Answer 1

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

@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文件，你将有将被用来当添加其他功能...按钮被点击如图史蒂芬·桑德森的文章：

$('#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; 
});