Agregado, edición y eliminación de registros en ventanas modales en aplicaciones MVC

Consideremos el siguiente escenario:

1. Aplicación MVC con administración de catálogos
2. Lista de elementos en una vista
3. Agregado, edición y eliminación de registros usando ventanas modales

Como de costumbre, veamos el escenario de implementación en un video:

Clase javascript modalform.js

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    // busca los elementos el atributo data-modal y le suscribe el evento click
    $('a[data-modal]').on('click', function (e) {
        // Abre la ventana modal con el formulario solicitado
        openmodal(this.href);
        return false;
    });
    $('#modalGenerica').on('hidden.bs.modal', function () {
        $('#contentModal').html('');
    })
});
function openmodal(url) {
    // Hace una petición get y carga el formulario en la ventana modal
    $('#contentModal').load(url, function () {
        $('#modalGenerica').modal({
            keyboard: true
        }, 'show');
        // Suscribe el evento submit
        bindForm(this);
    });
}
function bindForm(dialog) {
    // Suscribe el formulario en la ventana modal con el evento submit
    $('form', dialog).submit(function () {
        if ($(this).valid()) {
            // Realiza una petición ajax
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // Si la petición es satisfactoria, se recarga la página actual
                    if (result.success) {
                        window.location = window.location;
                    } else {
                        $('#contentModal').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        } else {
            return false;
        }
    });
}

Prerrequisitos

1. Bootstrapt (conjunto de estilos o archivo CSS)
2. jQuery (en nuestro caso versión 1.10.2)
3. jQuery Validate
4. jQuery Validate Unobstrusive
5. Bootstrap.js (para trabajar con las ventanas modales) 

Puntos Importantes

1. El controlador para Index regresa una vista parcial. Esto por que es una ventana que hace uso del layout y se carga dentro de la página principal.
2. Create, Edit y Delete devuelven una vista parcial. Si regresáramos una vista normal, se cargaría junto con el layout dentro de la ventana modal.
3. Create, Edit y Delete (POST Actions) regresa un Json(new { success = true }). Esto lo espera modalform para recargar la vista principal, del listado.
4. Se debe incluir en layout.cshtml una ventana modal genérica, que será donde se carguen las vistas parciales.

<div id='modalGenerica' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='contentModal'></div>
        </div>
    </div>
</div>

Usamos un archivo XML como fuente de datos para ahorrar el que tengan que descargar algún backup de base de datos y lo tengan que cargar en algún motor de base de datos que puede o no tengan instalado y configurado.

La solución la pueden descargar desde este link: Descarga