So aktualisieren Sie die zugrunde liegende AnsichtModel -Eigenschaft beim Löschen eines Fotos mit einem ajax.actionLink?

Question

Meine Situation ist Folgendes:

ich habe das ViewModel:

public class RealtyViewModel
{
     public RealtyViewModel()
     {
          Realty = new Realty();
          Photos = new Collection<File>();
     }

     public Realty Realty { get; set; }

     public Collection<File> Photos { get; set; }
}

Ich bestehe das RealtyViewModel zu meinem Edit.cshtml Aussicht. In der Bearbeitungsansicht nenne ich a Photos.cshtml Teilansicht. Die teilweise Ansicht der Fotos verwendet auch dasselbe @model RealtyViewModel.

Nun im Inneren der Photos.cshtml Teilweise Ansicht Ich mache eine AJAX -Anfrage, um ein Foto zu löschen:

@Ajax.ImageActionLink
(@Url.Content(Model.Photos[i].Path), @Localization.Delete, "640", "480",
"DeletePhoto", new {realtyId = Model.Realty.Id, photoId = Model.Photos[i].Id},
new AjaxOptions()
                 {
                      Confirm = @Localization.DeleteConfirmation,
                      HttpMethod = HttpVerbs.Post.ToString(),
                      OnComplete = string.Format("deletePhotoFromPage('{0}')",
                                                                  Model.Photos[i].Id),
                      OnSuccess = "LoadCycle",
                      UpdateTargetId = "myDiv",
                      InsertionMode = InsertionMode.Replace

                 }, new {data_photoId = Model.Photos[i].Id})

Ich führe diesen Code aus:

[HttpDelete]
public ActionResult DeletePhoto(string realtyId, string photoId)
{
    Realty realty = DocumentSession.Load<Realty>(realtyId);

    realty.Photos.Remove(photoId);

    File photo = DocumentSession.Load<File>(photoId);

    // Deletes the file in the database
    DocumentSession.Advanced.DatabaseCommands.Delete(photoId, null);

    // Deletes the file in the disk
    System.IO.File.Delete(Server.MapPath(photo.Path));

    return new EmptyResult();
}

Das Problem ist: Mein Strom realtyViewModel Dass ich an die Bearbeitungsansicht überging, verweist immer noch die Fotos, die ich mit den Ajax -Anrufen gelöscht habe. Wenn ich dann versuche, ein aktualisiertes Modell zu speichern, speichert es alles wieder, um die alten Verweise auf die Fotos zu halten, die ich gerade gelöscht habe.

Wie kann ich mein Modell aktualisieren (entfernen Sie die gelöschten Fotos von [[ model.Realty.Photos ]) so dass es den aktuellen Stand meiner Bearbeitungsansicht widerspiegelt?

Hinweis: Jetzt funktioniert es, weil ich die verwende Session Objekt, die IDs von gelöschten Fotos zu speichern, aber es ist nicht so, wie ich denke, dass es sein sollte. Es muss eine schöne Lösung dafür geben, die mir einfach nicht in den Sinn kommt ...

Eine schöne Lösung wäre: Nach einer Erfolgslöschung sollte der Ajax -Anruf die gelöschte Foto -ID zurückgeben, damit ich sie aus [[ model.Realty.Photos ]. Als ich dann versuchte, einen bearbeiteten Immobilien zu retten, würde es die Änderungen richtig widerspiegeln.

Answer 1

Nach einer Diskussion über den Chat Es scheint, dass Sie versteckte Felder in Ihrem DOM haben, die Sie entfernen müssen:

@for (int i = 0; i < Model.Realty.Photos.Count(); i++)
{
    @Html.HiddenFor(
        m => m.Realty.Photos[i], 
        new { data_photoid = Model.Realty.Photos[i] }
    )
}

Jetzt können Sie Ihre Controller -Aktion die ID des Fotos zurückgeben, die beispielsweise mit JSON gelöscht werden muss, anstatt ein leeres Ergebnis:

[HttpDelete]
public ActionResult DeletePhoto(string realtyId, string photoId)
{
    ... 
    return Json(new { photoId = photoId });
}

und auf dem Kunden:

function deletePhotoFromPage(result) { 
    ...
    $(':hidden[data-photoid="' + result.photoId + '"]').remove(); 
}

und Sie sollten auch die verwenden OnSuccess Option statt von OnComplete In Ihren AJAX -Linkoptionen:

OnSuccess = "deletePhotoFromPage"

Anstatt von:

OnComplete = string.Format("deletePhotoFromPage('{0}')", Model.Photos[i].Id),

OnComplete könnte auch im Fehlerfall aufgerufen werden.