asp.net-mvc - mvc 动态局部 View 基于用户在同一页面上的输入

Question

我想为不同的用户类型创建一个登录页面。他们都需要uid、pwd、email。在表单上有一个针对用户类型的预填充下拉列表。根据用户的选择，我需要在同一页面上动态加载 View 的后半部分。有我可以遵循的例子吗？谢谢。

Answer 1

幸运的是，我有这个。在下面的代码中， CreateForm div 获取来自 Controller 操作的动态呈现的 View 。当下拉列表选择更改时触发 AJAX 调用。我已经留下了一些其他的东西，比如动态连接 TinyMCE 和本地化资源字符串加载等。

主要观点:

<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">

        var ddlContentTypes;

        $(document).ready(function () {
            ddlContentTypes = $("#ContentTypes");
            ddlContentTypes.bind("change", loadCreate);
            loadCreate();
        });

        function loadCreate() {
            var typeId = $("#ContentTypes option:selected").val();
        <% if (Request.QueryString["modal"] != null && !string.IsNullOrEmpty(Request.QueryString["modal"]))
     {%>
            $.get('~/' + typeId + '/Create?modal=true', function (data) {
            <%
     } else
     {%>
                $.get('~/' + typeId + '/Create', function (data) {
<%
     }%>
                $("#CreateForm").html(data);
                    $("fieldset textarea").each(function () {
                        tinyMCE.execCommand('mceAddControl', false, this.id);
                    });
            });
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        <%=Resources.Localize.Routes_WidgetsCreate%></h2>
    <p>
        <% Html.RenderPartial("ContentTypeSelector"); %></p>
    <div id="CreateForm">
    </div>
</asp:Content>

Ajax 调用(上述 JS 中的 loadCreate())被路由到 Controller Action Create 以针对特定的内容类型。以下是 Create()的代码 Section 的 Controller 操作内容类型:

    //
    // GET: /Section/Create
    [CanReturnModalView]
    [Authorize(Roles = "Administrators")]
    public ActionResult Create()
    {
        if (Request.IsAjaxRequest())
            return PartialView("Section-CreateEditForm", new SectionViewModel()); // return ascx

        return View(new SectionViewModel()); // return plain aspx
    }

这是 Section的内容类型 Create查看 (Views/Section/Create.aspx) :

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Administration.Master" Inherits="System.Web.Mvc.ViewPage" %>
<!-- render user control -->
<% Html.RenderPartial("Section-CreateEditForm"); %>

和 Section-CreateEditForm.ascx控件，我们也需要它，因为我们将它渲染为 RenderPartial() 的一部分当请求是 AJAX 时，调用并从 Controller 操作返回它。这基本上可以是你想要的任何东西，但显然它必须包含 <form>标记并注意表单 POST 操作 URL 构造。

<h2>
<%=Resources.Localize.EditingContentTitle %></h2>
<%= Html.ValidationSummary(Resources.Localize.Validation_EditFailure) %>
<form id="Section-CreateEditForm" action="<%=Url.Action(Url.RequestContext.RouteData.GetRequiredString("action"), Url.RequestContext.RouteData.GetRequiredString("controller")) %>" enctype="multipart/form-data" method="post">
<fieldset>
    <legend>
        <%=Resources.Localize.EditFields %></legend>
    <div class="editor-label">
        <%= Html.LabelFor(model => model.Title, Resources.Localize.Section_Title)%>
    </div>
    <div class="editor-field">
        <%= Html.TextBoxFor(model => model.Title) %>
        <%= Html.ValidationMessageFor(model => model.Title) %>
    </div>
    <div class="editor-label">
        <%=Resources.Localize.Section_Image%>
    </div>
    <div class="editor-field">
        <input type="file" name="file" id="file" />
    </div>
    <p>
        <input type="submit" value="<%=Resources.Localize.save %>" />
    </p>
</fieldset>
</form>

HTH