Reusable Modal Dialogs

// STEP 1
public class DeleteConfirmationViewModel
{
    /// <summary>
    /// Action to perform after user confirms "Delete".
    /// </summary>
    public string PostDeleteAction { get; set; }

    /// <summary>
    /// [OPTIONAL] Controller to look for Post Delete action.
    /// This controller has implementation of Post Delete action
    /// </summary>
    public string PostDeleteController { get; set; }

    /// <summary>
    /// While executing POST Delete action, we need id of entity to delete.
    /// </summary>
    public int DeleteEntityId { get; set; }

    /// <summary>
    /// Delete Confirmation dialog header text. For example
    /// For text like "Delete Estimated Effort", Header Text is "Estimated Effort"
    /// </summary>
    public string HeaderText { get; set; }
}

// STEP 2: Add HTTPGET and HTTPPOST methods in TestController class
public class TestController
{
    [HttpGet]
    public ActionResult DeleteItem(int itemId = 0)
    {

        // Create new instance of DeleteConfirmationViewModel and pass it to _DeleteConfirmation Dialog (Reusable)
        DeleteConfirmationViewModel deleteConfirmationViewModel = new DeleteConfirmationViewModel
        {
            DeleteEntityId = itemId,
            HeaderText = "Test Item",
            PostDeleteAction = "DeleteItem",
            PostDeleteController = "Test"
            // This method is in MyController class
        };
        return PartialView("_DeleteConfirmation", deleteConfirmationViewModel);
    }

    [HttpPost]
    public ActionResult DeleteItem(DeleteConfirmationViewModel deleteConfirmationViewModel)
    {
        // Get item which we need to delete from EntityFramework
        Item item = db.Items.Find(deleteConfirmationViewModel.DeleteEntityId);

        if (item == null)
        {
            return HttpNotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                db.Items.Remove(item);
                db.SaveChanges();
                return Json(new { success = true });
            }
            catch (Exception e)
            {
                ModelState.AddModelError("", e.Message);
            }
        }
        return PartialView("_DeleteConfirmation", deleteConfirmationViewModel);
    }
}

// STEP 3: Add View in View/Shared folder with filename: _DeleteConfirmation.cshtml

@model LMSPriorTool.ViewModels.DeleteConfirmationViewModel

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Delete @Html.DisplayFor(x => x.HeaderText)</h3>
</div>

@using (Html.BeginForm(Model.PostDeleteAction, Model.PostDeleteController, FormMethod.Post, new { @class = "modal-form form-horizontal" }))
{
    @Html.ValidationSummary()
    <!-- Added hidden field so that these values persist when calling POST Action. Otherwise
    POST action will have all these properties as null -->
    @Html.HiddenFor( x => x.DeleteEntityId)
    @Html.HiddenFor( x => x.PostDeleteAction)
    @Html.HiddenFor( x => x.PostDeleteController)
    @Html.HiddenFor( x => x.HeaderText) <!-- Though not required in post action but may be in case of error useful-->
    <div class="modal-body">
        <div class="row-fluid">
            <div class="control-group">
                Do you want to delete this entry?
            </div>
        </div>
    </div>

    <div class="modal-footer">
        <button class="btn btn-danger" type="submit"><i class="icon-trash icon-white"></i> Delete</button>
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
    </div>
}


// STEP 4: In your shared layout file present in "Views/Shared" folder add this:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="@Styles.Url("~/content/css")" rel="Stylesheet" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <div class="row">
                    @Html.ActionLink("Delete", "DeleteItem", "Test",
                        new { itemId = 1 },
                        new { id = "btndelete", @class = "btn btn-danger modal-link" })
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Dialog Content -->
    <div id="dialogDiv" class="modal hide fade in">
        <div id="dialogContent">
        </div>
    </div>
    <!-- Javascript: Placed at the end of the document -->
    @*@Scripts.Render("~/bundles/jquery")*@
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/knockout")
    @Scripts.Render("~/js")
    @RenderSection("scripts", required: false)
</body>
</html>


// STEP 6: Update your project javascript file
Test.js

$(function () {
    $('.modal-link').click(function () {
        $('#dialogContent').load(this.href, function () {
            $('#dialogDiv').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) {
                    $('#dialogDiv').modal('hide');
                    // Refresh:
                    location.reload();
                } else {
                    $('#dialogContent').html(result);
                    bindForm();
                }
            }
        });
        return false;
    });
}


// Step 7: Updated your bundle config file (AppData)
// This is a verbose config file that I currently have

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                    "~/Content/themes/base/jquery.ui.core.css",
                    "~/Content/themes/base/jquery.ui.resizable.css",
                    "~/Content/themes/base/jquery.ui.selectable.css",
                    "~/Content/themes/base/jquery.ui.accordion.css",
                    "~/Content/themes/base/jquery.ui.autocomplete.css",
                    "~/Content/themes/base/jquery.ui.button.css",
                    "~/Content/themes/base/jquery.ui.dialog.css",
                    "~/Content/themes/base/jquery.ui.slider.css",
                    "~/Content/themes/base/jquery.ui.tabs.css",
                    "~/Content/themes/base/jquery.ui.datepicker.css",
                    "~/Content/themes/base/jquery.ui.progressbar.css",
                    "~/Content/themes/base/jquery.ui.theme.css"));

        bundles.Add(new ScriptBundle("~/bundles/knockout").Include("~/Scripts/knockout-2.1.0.js"));
        bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-responsive.css",
            "~/Content/LMSStyle.css",
            "~/Content/bootstrap-rowlink.css"
            ));

        bundles.Add(new ScriptBundle("~/js").Include(
            "~/Scripts/bootstrap.js",
            "~/Scripts/bootstrap-rowlink.js",
            "~/Scripts/Test.js"
            ));
    }
}