asp.net mvc ajax.beginform wird als html.beginform gesendet

Question

Ich habe eine Teilansicht, von der ich einen modalen Dialog mit aktualisierten Daten anzeigen möchte. Ein Benutzer, der auf das div klickt, würde sowohl die Anzeige des modalen als auch des Ajax-Aufrufs auslösen, damit der Inhalt des Modals aktualisiert wird.

<div class="nMmenuItem" >  
 
    @using (Ajax.BeginForm("editItem","nMrestaurant",new { id = Model.ID }, 
 
     new AjaxOptions 
 
     { 
 
      HttpMethod = "get", 
 
      InsertionMode = InsertionMode.Replace, 
 
      UpdateTargetId = "myModalDocument" 
 
     }, new { id = "ajaxEditItem" })) 
 
    { 
 
     <div data-toggle="modal" data-target="#myModal" 
 
      onclick="$('form#ajaxEditItem').submit();">    
 
      <div class="text-center"> 
 
       @Model.name 
 
      </div> 
 
     </div>   
 
    } 
 
</div>

Ich habe einen Platzhalter für den modalen innerhalb der übergeordneten Ansicht:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document" id="myModalDocument"> 
 
     @Html.Partial("_editItem", new nMvMmenuItem()) 
 
    </div> 
 
</div>

Doch während die Controller-Aktion erwartet eine AjaxResquest, die Steuerung wertet Request.IsAjaxRequest() als false aus.

public async Task<ActionResult> editItem(int? id) 
    { 
     if (Request.IsAjaxRequest()) 
     {     
      return PartialView("_editItem", await db.nMmenuItems.FindAsync(id)); 
     } 
     return View(); 
    } 

Dies aktualisiert die gesamte Ansicht und verhindert, dass das Modal funktioniert.

ich die folgenden Skripte in der _Layout.cshtml Seite am Bündelungs:

"~/Scripts/jquery-{version}.js", 
"~/Scripts/jquery-ui-{version}.js", 
"~/Scripts/jquery.unobstrusive*", 
"~/Scripts/jquery.validate", 
"~/Scripts/bootstrap.js", 
"~/Scripts/respond.js" 

Vielen Dank für Ihre Hilfe!

Answer 1

Ich fand, dass das Anhängen von submit() an das onclick -Ereignis des Formulars eine AJAX-Anforderung nicht ausführen würde. Meine Lösung ist somit Ajax.SubmitForm und stattdessen beschäftigen sich mit dem Click-Ereignis in meinem js zu entfernen:

Die aktualisierte Ansicht sieht wie folgt aus:

<div class="nMmenuItem"> 
<form method="get" action="@Url.Action("editItem","nMrestaurant",new { id = Model.ID })" 
     data-nM-ajax="true" data-nM-target="#myModalContent"> 
    <div>    
     <div class="text-center"> 
      @Model.name 
     </div>    
    </div> 
</form> 

In den js I bindet die Formular-Vorlage zu dem Click-Ereignis des übergeordneten div:

$('.nMmenuItem').click(ajaxFormSubmit); 

und die Funktion, die das Formular Vorlage behandelt und öffnet die resultierende modale di alog:

var ajaxFormSubmit = function() {   

    var $form = $(this).children('form:first'); 

    var options = { 
     url: $form.attr("action"), 
     type: $form.attr("method"), 
     data: $form.serialize() 
    }; 

    $.ajax(options).done(function (data) { 
     var $target = $($form.attr("data-nM-target"));      
     $target.replaceWith(data); 
     $("#myModal").modal(dialogOpts); 
    }); 

    return false; 

}; 

Answer 2

Überprüfen Sie, ob Sie die unauffällige Ajax-Client-Skripte installiert haben - Ihr Bündel Muster sieht aus wie es sie abholen, wenn sie da sind, aber ich glaube nicht, dass sie in dem Standardprojekt installiert:

Install-Package Microsoft.jQuery.Unobtrusive.Ajax 

Während das Ajax.BeginForm im Standard-MVC-Projekt enthalten ist, sind die Client-Skripts nicht und diese sind verantwortlich für das Laden des Inhalts, ohne die gesamte Seite zu aktualisieren.