How Bootstrap Modal Dialog Return Message in Asp.Net MVC

How to 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?

Screenshot:

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>

View.cshtml:

[HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult View(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);

        }


Try this Modify (Partial View) View.csthml:


 @model FAB_Portal.Models.FAB_View
  @using (Html.BeginForm("Impersonation", "UserRoles", FormMethod.Post,new { @id="form" }))
                {

    <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">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <a class="btn btn-danger btn-ok" id="impersonate" data-dismiss="modal">Submit</a>

            </div>
        </div>
    </div>
    }
    <script type="text/javascript">

            $("a#impersonate").click(function () {

                $.ajax({
                    type: "POST",
                    url: "@Url.Action("Impersonation", "UserRoles")",
                    data:   $('#form').serialize(),
                    success: function (result) {
                        if (result == "success") {
                            $('#dialogDiv').modal('hide');

                        } else {
                            $('#dialogContent').html(result);
                        }
                    }
                });
            });

        </script>

UserRoles.Controller:


  [HttpPost]
public ActionResult View(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 Content("error");
        }
        userrolehelper.StartImpersonate(model.UserName);
    }       
    return Content("success");
}

Finally Output: