August 24, 2018

Sreekanth B

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:

How Bootstrap Modal Dialog Return Message in Asp.Net MVC


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:
How Bootstrap Modal Dialog Return Message in Asp.Net MVC

Subscribe to get more Posts :

1 comments:

Write comments
Jal Pari
AUTHOR
September 1, 2018 at 9:34 PM delete

PK Domain is serving thousands of customers all over Pakistan with web hosting and other information technology facilities which make our company the well-reputed and competitive in the field of information technology. Visit www.pkdomain.com.pk to get information about cheap domain hosting prices.

Reply
avatar