jquery - usar - ASP MVC3: uso de vista parcial para agregar nuevos elementos HTML a la página

usar jquery en asp net mvc

Question

Actualmente estoy usando una llamada Ajax en mi vista ASP MVC3 para agregar un nuevo elemento de lista a la página. La vista realiza la llamada Ajax, que llama a un controlador acción ViewResult , que devuelve la vista parcial. El Ajax se configura para llamar al .append(html) en el elemento <div> del que se originó la llamada.

El problema es que en lugar de anexar la nueva fila, la vista completa desaparece y solo se muestra el parcial.

Aquí está el código en la vista. Esta vista usa un modelo de vista con un objeto de lista de un modelo separado. Esta parte del código llama a la vista parcial para mostrar cada uno de los elementos en el objeto de la lista.

@model Monet.ViewModel.BankListViewModel
@using (Html.BeginForm())
{
    <fieldset>
        <legend>Stat(s) Fixed</legend>
        <table>
        <th>State Code</th>
        <th>Agent ID</th>
        <th></th>
            <div class="fixedRows">
                @foreach(var item in Model.Fixed)
                {
                    if (!String.IsNullOrWhiteSpace(item.AgentId))
                    {

                            @Html.Partial("FixedPartialView", item) 

                    }      
                }
            </div>
        </table>
        <br />
        @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
    </fieldset>
}

Aquí está la addFixed Ajax addFixed

$("#addFixed").click(function () {
    $.ajax({
        url: this.href,
        cache: false,
        success: function (html) { $("#fixedRows").append(html); }
    });
    return false;
});

y esta es la acción del controlador ViewResult que las llamadas Ajax

    public ViewResult BlankFixedRow()
    {
        SelectList tmpList = new SelectList(new[] { "AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NA", "NM", "NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "US", "VT", "VI", "VA", "WA", "WV", "WI", "WY" });
        ViewBag.StateCodeList = tmpList;

        return View("FixedPartialView", new BankListAgentId());
    }

Finalmente, esta es la vista parcial.

@model Monet.Models.BankListAgentId


@using (Html.BeginCollectionItem("Fixed"))
{
    <tr id="[email protected]">
        <td>
            @Html.DropDownListFor(model => model.StateCode,
                (SelectList)ViewBag.StateCodeList, Model.StateCode)
        </td>
        <td>
            @Html.EditorFor(model => model.AgentId)
            @Html.ValidationMessageFor(model => model.AgentId)
        </td>
        <td>
        <a href="#" onclick="$(''#[email protected]'').parent().remove();" style="float:right;">Delete</a></td>
    </tr>
}

Cuando se selecciona Add another enlace, la página pasa de tener este aspecto

a esto

Según los comentarios a continuación, aquí está el HTML de la página:

<input type="hidden" name="Fixed.index" autocomplete="off" value="6dd1b028-14f7-4400-95d1-a803c2521b68" />
        <tr id="item-">
            <td>
                <select id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__StateCode" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].StateCode"><option>AL</option>
<option>AK</option>
<option>AS</option>
<option>AZ</option>

.
.
. <-removed list of all 50 states for clarity
</select>
            </td>
            <td>
                <input class="text-box single-line" id="Fixed_6dd1b028-14f7-4400-95d1-a803c2521b68__AgentId" name="Fixed[6dd1b028-14f7-4400-95d1-a803c2521b68].AgentId" type="text" value="" />

            </td>
            <td>
                <a href="#" class="deleteRow">delete</a>
            </td>

        </tr>
                    </section>

EDITAR

Después de leer los comentarios a continuación, cambié la etiqueta de la tabla a <table id="fixedRows"> , sin embargo, esto <table id="fixedRows"> el mismo resultado. Luego cambié el atributo de success de la llamada Ajax para incluir un poco de HTML básico como tal

success: function (html) { $("#fixedRows").append("<tr><td>New</td></tr>"); }

pero de nuevo, obtuve el mismo resultado. Después de establecer un punto de interrupción tanto en Visual Studio como en el depurador de Chrome, pude ver que nunca se llamaba al Ajax. En su lugar, se realiza la llamada a la acción del controlador, y la vista parcial se carga por sí misma, en lugar de adjuntarse a <table id="fixedRows"> .

Sin embargo, sigue trabajando para evitar esto, si alguien tiene alguna idea. ¡Gracias!

Answer 1

Así que la razón por la que esto estaba sucediendo terminó siendo bastante simple. Debido al ActionLink que se estaba utilizando, la acción del controlador se activaría antes de jQuery. Esto provocaba que la vista parcial borrara toda la vista de Edit . Al vincular el jQuery a un hipervínculo dentro de un bloque $(document).ready , jQuery funcionaba como siempre. A continuación se muestra la etiqueta y el jQuery actualizado

<a href="#" class="addFixed">Add Another</a>

jQuery:

$(document).ready(function () {

    $(".addFixed").click(function () {
        //alert(''test'');
        event.preventDefault();        
        $.ajax({
            url: ''@Url.Action("BlankFixedRow", "BankListMaster")'',
            cache: false,
            success: function (html) { $("#fixedRows").append(html); }
        });
    });

    $("#addVariable").click(function () {
        event.preventDefault();
        $.ajax({
            url: ''@Url.Action("BlankFixedRow", "BankListMaster")'',
            cache: false,
            success: function (html) { $("#variableRows").append(html); }
        });
    });

});

Answer 2

Creo que su uso de divs dentro de sus etiquetas <table> es confuso jQuery.append .

Pruebe lo siguiente en su lugar:

<fieldset>
    <legend>Stat(s) Fixed</legend>
    <table id="fixedRows">
        <tr>
            <th>State Code</th>
            <th>Agent ID</th>
        </tr>
        @foreach(var item in Model.Fixed)
        {
            if (!String.IsNullOrWhiteSpace(item.AgentId))
            {
                @Html.Partial("FixedPartialView", item) 
            }      
        }
    </table>
    <br />
    @Html.ActionLink("Add another", "BlankFixedRow", null, new { id = "addFixed"})
</fieldset>

Tenga en cuenta, también, que he utilizado id="fixedRows" lugar de class="fixedRows" ya que esto es lo que está especificando en su jQuery.

Comparar:

• Broken: http://jsfiddle.net/83EAT/1/
• Trabajando: http://jsfiddle.net/hT34k/3/

Answer 3

Intento evitar hacer llamadas AJAX en vistas parciales. AJAX requiere que recuerde el estado de la última página para volver a mostrar la información. Dicho esto, puede volver al controlador y llamar a la vista parcial y hacer que la llamada del servidor muestre el parcial en tándem con su vista:

 @Html.Partial("FixedPartialView", new BankListAgentId(){/*Construct the View Model Here here. assign the properties to your view model */  AgentId = /*however your creating this*/})

No creo que AJAX sea el camino a seguir con este problema.

Answer 4

La única forma en que esto podría ocurrir con el código que tiene es si no reemplaza el contenido de la página con ese simple bit de HTML, sino que lo carga directamente en la pestaña del navegador. Que su enlace de acción hará por defecto.

1. Asegúrese de que su controlador de clic para ese enlace "Agregar otro" utiliza event.preventDefault() o simplemente devuelve falso; Si no previene la acción predeterminada del enlace, su código AJAX lo hará, y luego el navegador cargará el enlace de forma normal, haciendo que parezca que no funcionó.

2. Asegúrese de que no haya errores de JavaScript en la página. Si el JS deja de funcionar, el comportamiento predeterminado, de nuevo, tomará el control y obtendrá el resultado que ve.