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();
    });

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();
    });

• c#
• javascript
• asp-mvc
• modal-dialog

• What's wnd? Is it a jQuery UI dialog or what? – deerchao Commented Nov 19, 2012 at 13:13
• I'm using kendo UI for my modal pop, but I believe the concept should be similar? – Null Reference Commented Nov 19, 2012 at 13:17

1 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');
});