ASP.NET MVC: modèle de liaison et demande Ajax

Question

J'ai un bouton:

<a id="2" class="modalInput specialbutton" href="/Employee/Delete/2" rel="#yesno"><img src="/Content/Images/application_delete.png" alt="Delete" /></a>

Javascript pour le bouton:

var buttons = $("#yesno button").click(function (e) {
                var yes = buttons.index(this) === 0;
                if (yes) {
                    $.ajax({
                        url: overlayElem.attr('href'),
                        success: function (data) {
                            $("#gridcontainer").html(data);
                        }
                    });
                }
            });

Action Supprimer:

public ActionResult Delete(int id)
{
    DeleteTeamEmployeeInput deleteTeamEmployeeInput = new DeleteTeamEmployeeInput { TeamEmployee = id };

    return Command<DeleteTeamEmployeeInput, TeamEmployee>(deleteTeamEmployeeInput,
        s => RedirectToAction<EmployeeController>(x => x.Index(1)),
        f => RedirectToAction<EmployeeController>(x => x.Index(1)));
}

Le problème est le paramètre id. Ce serait bien d'utiliser directement DeleteTeamEmployeeInput.

public ActionResult Delete(DeleteTeamEmployeeInput deleteTeamEmployeeInput )
{
    return Command<DeleteTeamEmployeeInput, TeamEmployee>(deleteTeamEmployeeInput,
        s => RedirectToAction<EmployeeController>(x => x.Index(1)),
        f => RedirectToAction<EmployeeController>(x => x.Index(1)));
}

Quand j'utilise l'objet complext, il est toujours nulle. Le type int simple, fonctionne très bien.

Comment utiliser un type complexe pour mon action de suppression?

Classe DeleteTeamEmployeeInput:

public class DeleteTeamEmployeeInput
{
    public int TeamEmployee { get; set; }
}

Bouton Supprimer:

public static string DeleteImageButton(this HtmlHelper helper, int id)
{
    string controller = GetControllerName(helper);
    string url = String.Format("/{0}/Delete/{1}", controller, id);

    return ImageButton(helper, url, "Delete", "/Content/Images/application_delete.png", "#yesno", "modalInput", id);
}

Answer 1

Vous certainement besoin d'annuler le résultat de l'action par défaut en retournant false à partir de votre rappel de clic ou votre demande d'AJAX peut-être même pas le temps d'exécuter avant d'être redirigé. En ce qui concerne l'envoi de l'objet entier (qui ne contient qu'un seul entier TeamEmployee propertry) est concerné, vous pouvez faire ceci:

// that selector seems strange as you don't have a button inside your anchor
// but an <img>. You probably want to double check selector
var buttons = $('#yesno button').click(function (e) {
    var yes = buttons.index(this) === 0;
    if (yes) {
        $.ajax({
            url: this.href,
            success: function (data) {
                $("#gridcontainer").html(data);
            }
        // that's what I was talking about canceling the default action
        });
        return false;
    }
});

et puis générer votre point d'ancrage pour y inclure ce paramètre:

<a href="<%: Url.Action("delete", "employee", new { TeamEmployee  = "2" }) %>" id="link2" class="modalInput specialbutton" rel="#yesno">
    <img src="<%: Url.Content("~/Content/Images/application_delete.png") %>" alt="Delete" />
</a>

Maintenant, vous pouvez en toute sécurité avoir:

public ActionResult Delete(DeleteTeamEmployeeInput deleteTeamEmployeeInput)
{
    ...
}

Remarque:. id="2" dans votre ancre est pas le nom d'identifiant valide