Question

I am trying to implement an admin feature on my site that allows an admin to impersonate a user by inputting their username (to see what they see).

Right now I have this setup as a jQueryUi dialog in the _LogOn partial view in the _Layout master view since this will be on every page. However, I am not sure what to do at this point due to some issues I’ve never dealt with before.

1) I need to run a check to see if the inputted username exists, if it doesn’t it should display a message in the dialog’s form.

2) I need to reload the entire page (so what is being displayed changes due to the new user updates) after submitting.

3) The box should appear open again after the page reloads. After the dialog form is submitted.

So I don’t know how to implement this because partials have no controllers, nor do I know how to make a jquery box reappear based on if the submit came from that specific form nor how to get an error message up when the partial isn’t based on a model. Then I thought about making the form AJAX, but I am not sure how to do that either since the entire page eventually has to be reloaded to update the display.

The addition to _LogOn partial besides the default code:

if (SessionUtil.IsSiteAdmin)
{
    <button id="impersonate" style="position: relative; right: 20px; float: left; top: -30px;">Impersonate</button>
    <div id="impersonate-user" title="Admin User Impersonation">
        @using (Html.BeginForm())
        {
            <p>Currently Impersonating: 
                @if (SessionUtil.User.Id != SessionUtil.UserAbsolute.Id)
                {
                    <text>
                    @SessionUtil.User.FirstName @SessionUtil.User.LastName (@SessionUtil.User.NetId)
                    </text>
                }
                else
                {
                    <text>None</text>
                }
            </p>
            <p>@Html.ActionLink("Stop Impersonating", "StopImpersonating", "Shared", new { area = "", @class = "ui-button ui-widget ui-state-default ui-corner-all" })</p>
            <div>
                <div id="ValidationSummary">
                @Html.ValidationSummary(true)
                </div>
                <fieldset>
                    <div class="editor-label">
                        @Html.Label("Username to Impersonate")
                    </div>
                    <div class="editor-field">
                        @Html.TextBox("Username")
                    </div>

                    <p>
                        <input type="submit" value="Impersonate"/>
                    </p>
                </fieldset>
            </div>
        }
    </div>
}

The JS:

 <script type="text/javascript">
        $("#impersonate-user").dialog({
            autoOpen: false,
            modal: false,
            width: 400,
            height: 505,
            closeOnEscape: true,
            resizable: false,
            draggable: true
        });
        $("#impersonate")
            .button()
            .click(function () {
                $("#impersonate-user").dialog("open");
                $('.ui-dialog :button, .ui-dialog a').blur();
            });
    </script>

Can someone tell me how to do this? Thanks.

Answer 1

I would recommend using ajax to do the name lookup and show an error message if it’s not found. No need to reload the page for a failure.

It looks like you’re using jQuery, so for #1 and #2:

$.ajax({
     url: actionUrl,
     data: { username: username },
     success: function() {
         window.location = window.location // I think this will refresh the page
     },
     error: function(error) {
         alert('username not found');  // do what you have to do
     }
});

What I would do for your case is have an action that you call with the above Ajax. If the username exists, it sets some flags in session, e.g.: Session["IsImpersonating"] = true and then you could have a block in your page that checks the session, and shows the dialog again:

@if ((bool)Session["IsImpersonating"]) // null check omitted
{
     <script>
           $(function() {
                 $("#myDialog").dialog();
           });
     </script>
}

FYI, to run an action with a partial, I think you just have to do the following:

@Html.Action("MyAction", "MyController")

This will make a call back to the server, just as if you did a regular page load, and plop the HTML for whatever view it returns onto the page.

Hope this helps.