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

Я новичок в 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, который выглядит так:

<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 (это одно и то же?) Также со строго типизированным представлением, как мне передать модель или только свойство SelectList в UserControl, или это не так?

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

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

Ваши комментарии оценены.


jquery asp.net-mvc jquery-ui-dialog
person Mark Redman    schedule 25.03.2010    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете либо использовать 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 form:

$(function() {
    $('#addjobcontainer form').ajaxForm({
        success: function(html) {
            $('#selectjobcontainer').html(html);
        }
    });
});
person Darin Dimitrov    schedule 25.03.2010