Question

我想为不同的用户类型创建登录页面。所有这些都需要uid，pwd，email。在表单上有一个用户类型的预先填充的下拉列表。根据用户的选择，我需要在同一页面上动态加载视图的后半部分。我能遵循一个例子吗？感谢。

Answer 1

幸运的是，我有这个。在下面的代码中，CreateForm div获取来自控制器操作的动态呈现视图。下拉列表选择更改时会触发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()）被路由到某些内容类型的控制器操作Create。以下是Create()内容类型的Section控制器操作代码：

    //
    // 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时从控制器操作返回它。这基本上可以是您想要的任何内容，但显然它必须包含<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

Answer 2

我个人会使用PartialViews，jQuery Load() functionality根据提供的数据加载这些部分视图。

mvc动态局部视图基于同一页面上的用户输入

2 个答案: