ASP.NET MVC: Model Binding und Ajax anfordern

Question

Ich habe eine Schaltfläche:

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

Javascript für die Schaltfläche:

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);
                        }
                    });
                }
            });

Aktion löschen:

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)));
}

Das Problem ist die id Parameter. Es wäre schön, direkt DeleteTeamEmployeeInput zu verwenden.

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

Wenn ich das complext Objekt verwenden, ist es immer null. Der einfache int-Typ funktioniert.

Wie eine komplexe Art für meine Löschaktion verwenden kann?

Klasse DeleteTeamEmployeeInput:

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

Löschen-Taste:

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

You definitely need to cancel the default action result by returning false from your click callback or your AJAX request might not even have the time to execute before you get redirected. As far as sending the entire object (which contains only a single TeamEmployee integer propertry) is concerned you could do this:

// 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;
    }
});

and then generate your anchor so that it includes this parameter:

<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>

Now you can safely have:

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

Remark: id="2" in your anchor is not valid identifier name.