Question

I have a view that displays a list of user roles (e.g., administrator, operator, etc) and an “Add” button that pops up a modal window, allowing the user to add a new role.

In my controller, I have this as my HttpPost method

    [HttpPost]
    public ActionResult Create(RoleModel model)
    {

        if (ModelState.IsValid)
        {
            var role = new RoleDto
                {
                    Name = model.Name,
                    Description = model.Description
                };

            var roleAdded = _rolePermissionsRepository.AddRole(role);
            if (roleAdded != null)
            {
                //CLOSE WINDOW
            }
            else
            {
                //PRINT ERROR MSG TO WINDOW
            }
        }
        return View();
    }

If the add to the DB is successful, I would like to close the modal window, and then refresh the list on my main index page.

If there’s some error while persisting to the DB, the modal window should remain open, and show some error.

How do I achieve that?

This is what I’m using on my Index page to pop up the window

    $("#open").click(function (e) {
        wnd.center();
        wnd.open();
    });

Answer 1

You should return a JsonResult to tell the browser what happened.

[HttpPost]
public ActionResult Create(RoleModel model)
{

    if (ModelState.IsValid)
    {
        var role = new RoleDto
            {
                Name = model.Name,
                Description = model.Description
            };

        var roleAdded = _rolePermissionsRepository.AddRole(role);
        if (roleAdded != null)
        {
            //CLOSE WINDOW
            return Json(new { success = true });
        }
        else
        {
            return Json(new { error = "Error! Can't Save Data!" });
        }
    }

    return Json(new { error = "Generic Error Message!" });
}

Here is the javascript that should run in your wnd page, you show the error message if there is any, otherwise you close the window.

$('form').submit(function(e) {
    e.preventDefault();
    $.post(this.action, $(this).serialize(), function(response) {
        if(response.error) {
            alert(response.error);
        }
        else {
            wnd.close();
        }
    }, 'json');
});