代码之家 › 专栏 › 技术社区 › Mark Redman

ASP.NET MVC&JQuery对话框:在没有完整Postaback的情况下,如何向下拉列表/选择列表添加项?

jquery-ui-dialog asp.net-mvc jquery

Mark Redman · 技术社区 · 16 年前

我是MVC新手,掌握了基本的模型,但仍然使用回发等方式来做每件事。

我想要构建的UI的一个方面是有一个带有按钮的项目下拉列表,用于将项目添加到数据库并刷新列表。用webforms实现这一点是直接的,因为所有东西都包装在更新面板中,但是使用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>

我想我需要把它放到一个用户控件/部分视图中(它们是相同的东西吗?)另外,对于强类型视图,如何将模型或SelectList属性传递给用户控件,或者不是这样?

也不确定对话框中是否应该有窗体?或者如何通过Ajax发回。

一些示例在页面中显示了很多Ajax代码,比如: $.ajax({...}); 我假设使用jquery执行此操作的代码比使用ASP.NET WebForms的代码多,但是在页面上执行“查看源代码”只需要更多的代码?

感谢您的评论。

1 回复 | 直到 16 年前

Darin Dimitrov 16 年前

您可以使用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刷新下拉列表,则 附加作业 操作应返回包含第一个窗体的部分视图,这意味着您需要将其代码放入单独的 ascx 控制要包括在主视图中的。

剩下的就是用 jQuery form 插件:

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