MVC UIHint / Parital view с множественным выбором JQuery, проблема динамического создания - PullRequest
Новая
       26

MVC UIHint / Parital view с множественным выбором JQuery, проблема динамического создания

0 голосов
/ 14 марта 2012

Я использовал этот учебник , чтобы создать экран, на котором пользователь может добавлять дополнительные поля ввода на заданном экране

Вместо использования всех текстовых полей Iv'e создал UIHint /Частичное представление, которое будет отображать мульти-выбранный виджет JQuery (я использую этот компонент )

ViewModel для каждого элемента строки 

 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 нене выполняются / не добавляются ..

enter image description here

Есть идеи?Все еще отлаживаю эту проблему, опубликую исправление, как только я его найду, но я надеюсь, что кто-то может указать мне правильное направление

Обновление

ПокаЯ обнаружил, что (похоже, что), UIHint / Partials вообще не отображается, когда пользователь нажимает, чтобы добавить другой элемент.(В противном случае выбор будет заполнен элементами, и будет применен виджет JQuery)

enter image description here

1 Ответ

2 голосов
/ 14 марта 2012

Я бы порекомендовал вам удалить весь 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;
});
...