asp.net - form - crud ajax asp net mvc

Cómo renderizo un elemento de forma parcial usando AJAX

Question

Tengo un formulario que reúne secciones de una forma más grande. Por ejemplo:

Html.RenderPartial("Partials/MealPreference", Model);

Me gustaría agregar secciones dinámicamente al formulario. Dada la naturaleza de mis vistas parciales, también debo pasar el modelo. En eso, estoy fallando miserablemente.

El marcado en mi página que contiene:

<div id="additionalPreference"></div>

<input type="button" value="Add Additional Preference" id="addPreference" />


<script>
    $(document).ready(function () {
        $(''#addPreference'').click(function () {

            $.ajax({
                type: "POST",
                url: ''@Html("AddPreference", "Main")'',
            success: function (html) {
                $(html).appendTo(''#additionalPreference'');
                console.log(html);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert("Error");
            },
            complete: function () {
                console.log("End");
            }
        });
    });
});
</script>

Mi acción de controlador:

[HttpPost]
public ActionResult AddPreference(FormViewModel model)
{
    if (ModelState.IsValid)
    {
        return PartialView("Partials/AdditionalPreference", model);
    }
    else
    {
        return PartialView("Partials/LoadFailed");
    }
}

El modelo nunca es válido. ¿Cómo paso el modelo de la página que contiene a la acción del controlador? Esto parece ser algo simple de hacer (ciertamente estaría en formularios web) pero me he estado ahogando con esto por 3 horas.

Answer 1

Debe agregar las propiedades del modelo para el controlador al que está llamando en la solicitud de ajax. En este caso, su controlador AddPreference tiene un parámetro de tipo FormViewModel . Supongo que la información de FormViewModel se almacena en la página. Debe pasarlos en la propiedad de data para la solicitud de Ajax.

Si publica sus propiedades de FormViewModel podría ayudarlo más. Bascialmente necesitas lo siguiente:

$ (''# addPreference''). click (función () {

    $.ajax({
        type: "POST",
        url: ''@Html("AddPreference", "Main")'',
        data: {id: "123asd", Prop1: myProp1},
        success: function (html) {
            $(html).appendTo(''#additionalPreference'');
            console.log(html);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("Error");
        },
        complete: function () {
            console.log("End");
        }
    });

Publique más información de su modelo y la vista que está haciendo la solicitud de AJAX y puedo ayudarlo más.

Answer 2

Para una llamada ajax debes construir el modelo:

$.ajax({
    type: "POST",
    url: ''@Url.Action("AddPreference", "Main")'',
    data: {
        Field1: ''field1'',
        Field2: ''field2''
    },
    success: function (html) {
         $(html).appendTo(''#additionalPreference'');
         console.log(html);
    },
    error: function (xhr, ajaxOptions, thrownError) {
         alert("Error");
    },
    complete: function () {
         console.log("End");
});

Asegúrese de que los nombres en la sección de datos de la llamada ajax coincidan exactamente con los nombres en su modelo y que aparezcan en su controlador lleno.

actualizar:

Desde que escribí esta respuesta aprendí más acerca de cómo enviar información al controlador a través de ajax. Como comentó Rick Dailey, puede enviar el modelo enviado al formulario de vuelta al controlador a través de:

@Html.Raw(Json.Encode(Model))

He descubierto sobre serializar y utilizamos:

$(''form'').serialize() 

Para enviar los campos en el formulario de vuelta al controlador. Una manera rápida y fácil de enviar toda la información de vuelta similar a una publicación posterior sin tener que crear manualmente el modelo.