Annuler le formulaire MVC soumettre

Question

Je soumets un formulaire en utilisant AJAX. Les champs sont dans une vue partielle qui est envoyée à une action du contrôleur. La vue partielle est dans un div qui apparaît lorsqu'un bouton sur le formulaire principal est cliqué. Si l'utilisateur remplit le formulaire et clique sur le bouton Envoyer, la mise à jour est effectuée dans l'action du contrôleur et tout va bien. Toutefois, si l'utilisateur change d'avis, je souhaite ajouter un bouton d'annulation pour masquer le formulaire. Ajouter le bouton et masquer le formulaire fonctionne comme prévu, mais l'appel à la méthode d'action du contrôleur se produit toujours. J'ai essayé d'utiliser

e.preventDefault(); 

mais cela n'a pas fonctionné.

J'ai essayé d'utiliser une seconde méthode JQuery attachée à l'ID d'annulation, mais je n'arrive pas à faire fonctionner cela.

Mon JQuery ressemble à ceci:

$('#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(); 
}); 

Et voici ma méthode d'action:

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

et soumettre & boutons Annuler ici:

<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> 

Quelqu'un at-il des suggestions pourrait obtenir que cela fonctionne comme j'espère?

Answer 1

Étant donné que votre formulaire est en cours de chargement dynamique après la première page a été rendu, vous devez utiliser event delegation en utilisant .on() pour ajouter un écouteur à un ancêtre qui existe lorsque la page est rendue

Au lieu de

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

utilisation

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

mais remplacez document avec l'ancêtre le plus proche qui existe quand la page est d'abord générée.