asp.net диалоговое окно mvc & jquery: какой подход я выберу, чтобы добавить элементы в выпадающий список / список выбора без полной обратной передачи? - PullRequest
Новая
       6

asp.net диалоговое окно mvc & jquery: какой подход я выберу, чтобы добавить элементы в выпадающий список / список выбора без полной обратной передачи?

0 голосов
/ 25 марта 2010

Я новичок в MVC и понимаю основную модель, но все еще делаю все с обратной передачей и т. Д.

Одним из аспектов пользовательского интерфейса, который я хочу создать, является наличие выпадающего списка элементов с кнопкой для добавления элемента в базу данных и обновления списка. Достичь этого с помощью WebForms было просто, так как все было упаковано в UpdatePanels, но каков наилучший подход для достижения этого с помощью MVC?

Часть разметки для списка и кнопки выглядит следующим образом: 

<table>
    <tr>
        <td><%=Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList, "(select job title)", new { @class = "data-entry-field" })%></td>
        <td>&nbsp;</td>
        <td><a id="AddJobTitleDialogLink" href="javascript: addJobTitleDialog();" title="Add Job Title"><img id="AddJobTitleButtonImage" src="/Content/Images/Icons/16x16/PlusGrey.png" border="0" /></a></td>
    </tr>
</table>

Диалог - это стандартное диалоговое окно jquery Ui, которое выглядит следующим образом: 

<div id="SingleTextEntryDialog" style="display:none">
        <table>
            <tr>
                <td>Name:</td>
                <td><input id="SingleTextEntryDialogText" type="text" size="25" /></td>
            </tr>
        </table>
    </div>

Я предполагаю, что мне нужно поместить это в UserControl / PartialView (это одно и то же?) Также со строго типизированным View, как я могу передать Model или свойство SelectList в UserControl или это не так

Не уверены, должна ли быть форма в диалоговом окне div? или как это будет отправлять обратно через ajax.

В некоторых примерах много кода ajax на странице, например: $.ajax({...}); Я предполагаю, что выполнение этого с использованием jquery - это больше кода, чем веб-формы asp.net, но есть еще больше кода, чтобы увидеть выполнение «Просмотр исходного кода» на странице?

Ваши комментарии приветствуются.

1 Ответ

1 голос
/ 25 марта 2010

Вы можете использовать AJAX или выполнить полную перезагрузку страницы после нажатия кнопки. В некоторых случаях на вашей странице может быть две формы: первая форма будет содержать раскрывающийся список, позволяющий пользователю выбрать элемент, а вторая форма будет содержать поле ввода и кнопку добавления. Обе формы будут публиковать различные действия на вашем контроллере.

Если вы решите не использовать AJAX, вот как вы можете это сделать. Добавьте форму, содержащую выбор должности: 

<div id="selectjobcontainer">
<% using (Html.BeginForm("selectjob", "home")) { %>
    <%= Html.DropDownList("JobTitleSelectList", Model.JobTitleSelectList) %>
    <input type="submit" value="Select job title" />
<% } %>
</div>

Добавьте еще одну форму, которая позволит пользователю добавлять название должности в список: 

<div id="addjobcontainer">
<% using (Html.BeginForm("addjob", "home")) { %>
    <%= Html.TextBox("JobTitle") %>
    <input type="submit" value="add job title" />
<% } %>
</div>

Действие AddJob должно добавить название задания в модель и отобразить то же представление, которое обновит раскрывающийся список заданий.

Если вы решите обновить раскрывающийся список с помощью AJAX, действие AddJob должно вернуть частичное представление, содержащее первую форму, то есть вам нужно поместить его код в отдельный элемент управления ascx, который вы включите в основной вид.

Осталось лишь настроить вторую форму, используя jQuery форму плагин: 

$(function() {
    $('#addjobcontainer form').ajaxForm({
        success: function(html) {
            $('#selectjobcontainer').html(html);
        }
    });
});
...