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