mvc dynamic partial view based on user input on the same page

Question

i want to create a login page for different user type. All of them need uid, pwd, email. On the form there is a prepopulated dropdownlist for user type. Based on the user's choice, I need to render dynamically load the second half of the view on the same page. Is there an example that I can follow? Thanks.

Not sure who flagged this as offensive, but could you comment as to why? It may be poorly worded, it may have been a "drive-by" question, but it surely isn't offensive. — user7116, Feb 04 '11 at 17:51

score 2 · Answer 1 · answered Feb 03 '11 at 22:33

Luckily for you, I have this. In the code below the CreateForm div gets the dynamically rendered view that comes from the controller action. The AJAX call is trigged when dropdown list selection changes. I've left some other stuff in like wiring up the TinyMCE dynamically and localized resource string loading, etc.

The main view:

<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 call (loadCreate() in the above JS) gets routed to the controller action Create for certain Content Type. Below is the code of Create() controller action for Section content type:

    //
    // 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
    }

Here is the Section's content type Create view (Views/Section/Create.aspx):

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

And the Section-CreateEditForm.ascx control, which we also need because we render it as a part of RenderPartial() call and also return it from the controller action when the request is AJAX. This can essentially be anything you want but obviously it has to contain <form> tag and pay attention to the form POST action URL construction.

<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

score 1 · Answer 2 · edited May 23 '17 at 12:04

1

I personally would make use of PartialViews, and jQuery Load() functionality to load those partial views based on the data supplied.

edited May 23 '17 at 12:04

Community

1
1

answered Feb 04 '11 at 09:58

stoic

4,700
13
58
88

mvc dynamic partial view based on user input on the same page

2 Answers2