¿Cómo usar bootstrap modal para editar los datos de la tabla en MVC?

Después de de nuestra larga recopilación de información pudimos solucionar este atascamiento que suelen tener muchos lectores. Te regalamos la respuesta y nuestro deseo es serte de mucha apoyo.

Solución:

De hecho, hay 2 posibilidades: con o sin AJAX. Si desea hacer eso sin AJAX, puede suscribirse al evento de clic del enlace Editar y luego copiar los valores de la tabla al modal y finalmente mostrar el modal.

Así que empieza por darle un poco de clase a tu enlace de edición:

Edit

a los que podrías suscribirte:

$('a.edit').on('click', function() 
    var myModal = $('#myModal');

    // now get the values from the table
    var firstName = $(this).closest('tr').find('td.firstName').html();
    var lastName = $(this).closest('tr').find('td.lastName').html();
    ....

    // and set them in the modal:
    $('.firstName', myModal).val(firstName);
    $('.lastNameName', myModal).val(lastName);
    ....

    // and finally show the modal
    myModal.modal( show: true );

    return false;
);

Esto supone que ha dado las clases de CSS adecuadas al

elementos y los campos de entrada en su modal.

---

Si quisiera usar AJAX, podría generar el enlace así:

@Html.ActionLink("Edit", "Edit", "Employees", new  id = employee.Id , new  @class = "btn edit" )

y luego se suscribe al evento de clic de este botón y activa la solicitud AJAX:

$('a.edit').on('click', function() 
    $.ajax(
        url: this.href,
        type: 'GET',
        cache: false,
        success: function(result) 
            $('#myModal').html(result).find('.modal').modal(
                show: true
            );
        
    );

    return false;
);

tendrá un marcador de posición simple para el modal en su vista principal que albergará los detalles:

los acción del controlador que será golpeado debe obtener el registro del empleado usando la identificación y pasarlo a una vista parcial:

public ActionResult Edit(int id)

    Employee employee = repository.Get(id);
    EmployeeViewModel model = Mapper.Map(employee);
    return PartialView(model);

y finalmente el parcial correspondiente:

@model EmployeeViewModel


    

        ×
        
Edit Employee
    
    

        

            @Html.LabelFor(x => x.FirstName)
            @Html.EditorFor(x => x.FirstName)
        
        

            @Html.LabelFor(x => x.LastName)
            @Html.EditorFor(x => x.LastName)
        
        ...
    
    

        Close
        Save changes
    

Obviamente, también deberá envolver los campos de entrada en un Html.BeginForm que le permitirá enviar los datos actualizados del empleado al servidor. También podría ser necesario AJAXificar este formulario si desea permanecer en la misma página.

Recuerda mostrar este escrito si te fue de ayuda.

---

---

Utiliza Nuestro Buscador