Render Teilansicht mit Formular in Modal auf Html.ActionLink klicken

Question

Ich habe eine Seite mit Tabelle wo jede Zeile einen Link "Move" hat.

Beim Klicken auf den Link versuche ich den Controller GET Methode aufgerufen, die wiederum die _MoveReportPartial Ansicht in einem modalen rendern.

Sobald der Benutzer die Auswahl im Modal trifft, sollte die Schaltfläche zum Senden an die Post-Methode des Controllers gesendet werden.

Wenn ich das Klassenattribut (move-modal) von Html.ActionLink(...) lösche, wird die Datei js deaktiviert und ignoriert. Dann funktioniert es, indem Sie die _MoveReportPartial in einem neuen Fenster öffnen und dann konsequent auf die richtige Methode posten, wenn der Benutzer auf submit klickt.

Ich versuche, es im Modal zu öffnen, aber die js Ich habe funktioniert nicht und Routen an die POST Methode statt auf "Move" klicken.

EDIT Warum funktioniert das .load Aufruf der POST Methode anstelle der GET? Wie kann ich die js ändern? (Hinzugefügt event.preventDefault();, immer noch das gleiche Verhalten beobachtet wird)

Der Umzug Link auf dem Ursprung Ansicht wie folgt aussieht:

<div class="d20 actionLink"> 
    @Html.ActionLink("Move", "MoveReport", "ReportsWeb", new {id = item.ReportDefinitionId, newReport = false}, new {@class = "move-modal"}) 
</div> 

Ich habe eine js Datei:

$(function() { 
$('.move-modal').click(function() { 
    event.preventDefault(); 
    $('<div/>').appendTo('body').dialog({ 
     close: function (event, ui) { 
      dialog.remove(); 
     }, 
     modal: true 
    }).load(this.href, {}); 
}); 

});

Mein sieht ReportsWebController wie folgt aus:

[HttpGet] 
public ActionResult MoveReport(Guid id, bool newReport) 
{ 
    //some code 

    return PartialView("_MoveReportPartial", model); 
} 

[HttpPost] 
public ActionResult MoveReport(MoveReportModel Model) 
{ 
    try 
    { 
     //some code 
    } 
    catch (Exception exc) 
    { 
     InternetReportingTrace.Source.WriteError(exc); 
     throw; 
    } 
    return RedirectToAction("ListReports"); 
} 

und meine _MoveReportPartial wie folgt aussehen:

<div id="dialog-confirm"> 
<div align="center"> 
    <h2>Please Confirm</h2>   
</div> 

@using (Html.BeginForm("MoveReport", "ReportsWeb", FormMethod.Post)) 
{ 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true) 
    <div tabindex="-1" role="dialog"> 

     <div class="modal-content"> 
      <p>Report @Model.Report.Name with ID @Model.Report.ReportDefinitionId </p> 
      <p>Will be moved to:</p> 

      @for (int i = 0; i < Model.MoveOptions.Count; i++) 
      { 
       <div class="radio"> 
        <label><input type="radio" name="optradio">@Model.MoveOptions[i]</label> 
       </div> 
      } 
      <div> 
       <input type="submit" value="Move Report" /> 
      </div> 
     </div> 
    </div> 
} 

Answer 1

Ich glaube nicht, dass Sie das Standardverhalten der Action sind zu verhindern richtig.

Versuchen:

$('.move-modal').click(function (event) { 
    event.preventDefault(); 
    $('<div/>').appendTo('body').dialog({ 
    close: function (event, ui) { 
     dialog.remove(); 
    }, 
    modal: true 
    }).load(this.href, {}); 
}); 

Weil es ein jQuery-Handler ist, können Sie event.preventDefault() statt return false; verwenden. Wenn Ihr Click-Handler return false verwendet, um die Browsernavigation zu verhindern, wird die Möglichkeit eröffnet, dass der Interpreter die return-Anweisung nicht erreicht und der Browser das standardmäßige Verhalten des anchor-Tags vor diesem Zeitpunkt ausführt. Wenn Sie event.preventDefault() als erste Zeile im Handler verwenden, können Sie sicherstellen, dass das Standardnavigationsverhalten nicht ausgelöst wird.

Zweitens ist Ihre .load Methode Aufruf falsch.

ändern

.load(this.href, {}); 

zu

.load(this.href); 

Die Dokumentation in api.jquery.com/load states „die POST-Methode verwendet wird, wenn die Daten als ein Objekt zur Verfügung gestellt wird, andernfalls wird angenommen, GET . " Da Sie ein leeres Objekt senden, wird davon ausgegangen, dass Sie POST verwenden möchten. Das ist nicht nötig.