Come aggiornare la proprietà ViewModel sottostante durante l'eliminazione di una foto usando un Ajax.ActionLink?

Question

La mia situazione è questa:

ho questo ViewModel:

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

     public Realty Realty { get; set; }

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

Passo questo RealtyViewModel al mio Edit.cshtml Visualizza. All'interno della vista Modifica chiamo un file Photos.cshtml Vista parziale. La vista parziale delle foto utilizza anche la stessa @model RealtyViewModel.

Ora, dentro il Photos.cshtml Vista parziale faccio una richiesta AJAX per eliminare una foto:

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

Eseguo questo codice:

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

Il problema è: la mia corrente realtyViewModel Che sono passato alla vista Modifica fa ancora riferimento alle foto che ho eliminato usando le chiamate AJAX. Quindi, quando provo a salvare un modello aggiornato, risparmia di nuovo tutto con i vecchi riferimenti alle foto che ho appena eliminato.

Come posso aggiornare il mio modello (rimuovi le foto eliminate da [ model.Realty.Photos ]) in modo che rifletta lo stato attuale della mia vista di modifica?

Nota: ora funziona perché sto usando il Session Obiettivo per archiviare gli ID delle foto eliminate, ma non è il modo in cui penso che dovrebbe essere. Ci deve essere una bella soluzione a questo che non mi viene in mente ...

Sarebbe una bella soluzione: dopo un'eliminazione del successo, la chiamata Ajax dovrebbe restituire l'ID foto cancellata in modo da poterlo rimuovere da [ model.Realty.Photos ]. Quindi, quando ho provato a salvare una realtà modificata, rifletterebbe correttamente le modifiche.

Answer 1

Dopo un Discussione sulla chat Sembra che tu abbia campi nascosti nel tuo DOM che devi rimuovere:

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

Ora potresti avere l'azione del controller restituire l'ID della foto che deve essere eliminato usando JSON, ad esempio anziché un risultato vuoto:

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

E sul cliente:

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

E anche dovresti usare il OnSuccess opzione invece di OnComplete Nelle opzioni di collegamento AJAX:

OnSuccess = "deletePhotoFromPage"

invece di:

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

OnComplete potrebbe essere invocato anche in caso di errore.