Bootstrap modal dialog return message in MVC

Question

I need some help on return success or error message in bootstrap modal dialog from Partial View in mvc.

When click the link in _LayoutAdmin view, partial view Impersonation.cshtml will load into modal dialog.

After input and click submit button, the popup box will close and post in controller. How to show the error message in modal dialog if user input data is not existed?

Any guidance is highly appreciate!

Screenshot:

_LayoutAdmin.cshtml:

<a href="@Url.Action("Impersonation", "UserRoles")" class="modal-link">
  Impersonation &nbsp;
   <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
</a>

<div id="modal-container" class="modal fade" tabindex="-1" role="dialog">
</div>

<script>

 $(function () {

                $('body').on('click', '.modal-link', function (e) {
                    e.preventDefault();
                    $(this).attr('data-target', '#modal-container');
                    $(this).attr('data-toggle', 'modal');
                });
                // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
                $('body').on('click', '.modal-close-btn', function () {
                    $('#modal-container').modal('hide');
                });
                //clear modal cache, so that new content can be loaded
                $('#modal-container').on('hidden.bs.modal', function () {
                    $(this).removeData('bs.modal');
                });
                $('#CancelModal').on('click', function () {
                    return false;
                });
        });

    </script>

(Partial View) Impersonation.csthml:

@model FAB_Portal.Models.FAB_View
@using (Html.BeginForm())
{ 
    <script type="text/javascript">

        $("a#impersonate").click(function () {
            var username = $('#UserName').val();
            $.ajax({
                type: "POST",
                url: "@Url.Action("Impersonation", "UserRoles")",
                data: { UserName: username },
                success: function (result) {
                    if (result.success) {
                        $('#modal-dialog').modal('hide');

                    } else {
                        $('#modal-body').html(result);
                    }
                }
            });
        });

    </script>

<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;Impersonation</h4>
        </div>

        <div class="modal-body">
            <div class="form-horizontal">
                @Html.Label("Impersonate", htmlAttributes: new { @class = "control-label col-md-4" })
                @Html.TextBox("UserName", null, htmlAttributes: new { @class = "form-control" })
                <text class="text-danger">@ViewBag.Error</text>
            </div>
        </div>

        <div class="modal-footer">
            @using (Html.BeginForm("Impersonation", "UserRoles", FormMethod.Post))
            {
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <a class="btn btn-danger btn-ok" id="impersonate" >Submit</a>
            }
        </div>
    </div>
</div>
}

UserRoles.Controller:

public ActionResult Impersonation()
{
    return PartialView("Impersonation");
}

[HttpPost]
public ActionResult Impersonation(FAB_View model)
{
    if (ModelState.IsValid)
    {
        UserRoleHelper userrolehelper = new UserRoleHelper();
        bool validuser = userrolehelper.CheckValidUser(model.UserName);
        if (validuser == false)
        {
            ViewBag.Error = "Don't have such user!";
            return PartialView("Impersonation");
        }
        userrolehelper.StartImpersonate(model.UserName);
    }        
    return PartialView("Impersonation");
}

Solution

Fix it myself by using below:

LayoutAdmin view:

<script>
 $(function () {

        $.ajaxSetup({ cache: false });

        $("#impersonate").on("click", function (e) {

            // hide dropdown if any
            $(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

            $('#myModalContent').load(this.href, function () {
                $('#myModal').modal({
                    /*backdrop: 'static',*/
                    keyboard: true
                }, 'show');
                bindForm(this);
            });
            return false;
        });
    });

    function bindForm(dialog) {

        $('form', dialog).submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,

                data: $(this).serialize(),
                success: function (result) {
                    if (result.success) {
                        $('#myModal').modal('hide');
                        //Refresh
                        location.reload();
                    } else {
                        $('#myModalContent').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        });
    }

</script>

Impersonation.cshtml:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Impersonation(FAB_View model)
        {
            if (ModelState.IsValid)
            {
                UserRoleHelper userrolehelper = new UserRoleHelper();
                var loggedonuser = userrolehelper.GetLoggedOnUser();
                var currentuser = userrolehelper.GetCurrentUser();

                bool validuser = userrolehelper.CheckValidUser(model.UserName);

                if (validuser == false)
                {
                    ViewBag.Error = "* Don't have such user!";
                    return PartialView("Impersonation", model);
                    //return Json(new { success = false });
                }
                else
                {
                    //userrolehelper.StartImpersonate(model.UserName);
                    return Json(new { success = true });
                }               
            }

            return PartialView("Impersonation", model);

        }

Comments

[Salman Zahid]

can you please insert alert(result); in success function and reply with the response you are getting

[Salman Zahid]

or provide me your project to fix it.