Abbrechen MVC-Formular senden

Question

Ich überweise ein Formular mit AJAX. Die Felder sind in einer Teilansicht, die an eine Controller-Aktion gesendet werden. Die Teilansicht befindet sich in einem Div, das angezeigt wird, wenn auf eine Schaltfläche im Hauptformular geklickt wird. Wenn der Benutzer das Formular ausfüllt und auf die Senden-Schaltfläche klickt, wird das Update in der Controller-Aktion durchgeführt und alles ist gut. Wenn der Benutzer jedoch seine Meinung ändert, möchte ich eine Schaltfläche zum Abbrechen hinzufügen, um das Formular auszublenden. Das Hinzufügen der Schaltfläche und das Ausblenden des Formulars funktionieren wie erwartet, aber der Aufruf der Controller-Aktionsmethode erfolgt weiterhin. Ich habe versucht mit

e.preventDefault(); 

aber das hat nicht funktioniert.

Ich habe versucht, eine zweite JQuery-Methode an die Cancel-ID angefügt, aber ich kann das nicht funktionieren.

Mein JQuery sieht wie folgt aus:

$('#VisitorModal').on('submit', '#visitorform', function (e) { 
    var data = $(this).serialize(); 
    var url = '@Url.Action("CreateVisitor", "Meetings")'; 
    var text = $('#title').val() + ' ' + $('#firstname').val() + ' ' + $('#surname').val() + ' (' + $('#company').val() + ')'; // a value from the form that you want as the option text 
    $.post(url, data, function (response) { 
     if (response) { 
      $('#VisitorID').append($('<option></option>').val(response).text(text)).val(response); 
     } else { 
      dialog.hide(); 
     } 
    }).fail(function() { 
     dialog.hide(); 
    }); 
    dialog.hide(); 
    e.preventDefault(); 
    //return false; // cancel the default submit 
}); 

$('#cancel').on('click', function() { 
    dialog.hide(); 
}); 

Und hier ist meine Aktionsmethode:

[HttpPost] 
public JsonResult CreateVisitor(AppointmentViewModel model) 
{ 
    var visitor = new Visitor() 
    { 
     Title = model.VisitorTitle, 
     FirstName = model.VisitorFirstName, 
     LastName = model.VisitorSurname, 
     Company = model.VisitorCompany 
    }; 
    db.Visitors.Add(visitor); 
    db.SaveChanges(); 
    return Json(visitor.id); 
} 

und senden & Tasten Abbrechen hier:

<div class="form-group"> 
    <div class="col-md-offset-2 col-md-5"> 
     <input type="submit" value="Create" class="btn btn-success" id="submit" /> 
     <input type="button" value="Cancel" class="btn btn-warning" id="cancel" /> 
    </div> 
</div> 

Hat jemand irgendwelche Vorschläge, die Könnte das so funktionieren wie ich hoffe?

Answer 1

Da Ihr Formular dynamisch nach der ersten Seite gerendert wurde geladen wird, müssen Sie event delegation verwenden, indem .on() unter Verwendung eines Zuhörers zu einem Vorfahren hinzuzufügen, die vorhanden ist, wenn die Seite

Statt

gemacht wird

$('#cancel').on('click', function() { 
    dialog.hide(); 
}); 

Verwendung

$(document).on('click', '#cancel', function() { 
    dialog.hide(); 
}); 

aber ersetzen document mit dem nächsten Vorfahren, die besteht, wenn Die Seite wird zuerst generiert.