Envoyer des données à partir de Jquery Dialog et MVC

Question

J'ai un dialogue modal Jquery, Ma question est quelle est la meilleure façon d'envoyer ces données à l'automate, et d'afficher un message dans la boîte de dialogue. Je n'arrive pas à trouver et de bons exemples de cela.

Answer 1

Avec JQuery, vous pouvez obtenir le Form plugin, et soumettre votre formulaire facilement avec l'Ajax comme ceci:

$('#myform').ajaxForm({ 
     url: '/mycontroller/myaction/myid', 
     datatype: 'json', 
     success: function(responseJson) { 
        alert ('success! response was:' + responseJson); 
       } 
    }); 

Answer 2

$.post('site/controller/action', $('#myForm').serialize(), function (data) { 
    alert('form submitted'); 
}, 'json'); 

Answer 3

contrôles de collecte de données Mettre dans une forme comme ceci:

<div id="AddTaskDiv"> 
    <form id="AddTaskForm" method="post" action=""> 
    <%= Html.Hidden("AddTaskProjectId") %> 
    <%= Html.Hidden("AddTaskTemplateName") %> 
     <fieldset> 
      <p><label for="TaskId">Task ID</label></p> 
      <p> 
       <label for="AddTaskLevel">Level:</label> 
       <%= Html.TextBox("AddTaskLevel", "", new{@maxlength= "3", @size="3"})%> 
       <%= Html.ValidationMessage("AddTaskLevel", "*")%> 

       <label for="AddTaskMajorLevel">Major ID:</label> 
       <%= Html.TextBox("AddTaskMajorLevel", "", new { @maxlength = "3", @size = "3" })%> 
       <%= Html.ValidationMessage("AddTaskMajorLevel", "*")%> 

       <label for="AddTaskMinorLevel">Minor ID:</label> 
       <%= Html.TextBox("AddTaskMinorLevel", "", new { @maxlength = "3", @size = "3" })%> 
       <%= Html.ValidationMessage("AddTaskMinorLevel", "*")%> 
      </p> 
      <p> 
       <label for="AddTaskDescription">Description:</label> 
       <%= Html.TextBox("AddTaskDescription", "", new { @maxlength = "32", @size = "32" })%> 
       <%= Html.ValidationMessage("AddTaskDescription", "*")%> 
      </p> 
      <p> 
       <label for="AddTaskResponsibleRole">ResponsibleRole:</label> 
       <%= Html.TextBox("AddTaskResponsibleRole")%> 
       <%= Html.ValidationMessage("AddTaskResponsibleRole", "*")%> 
      </p> 
      <p> 
       <label for="AddTaskDurationInDays">DurationInDays:</label> 
       <%= Html.TextBox("AddTaskDurationInDays", "", new { @maxlength = "3", @size = "3" })%> 
       <%= Html.ValidationMessage("AddTaskDurationInDays", "*")%> 
      </p> 
      <p> 
       <label for="AddTaskType">Task Type:</label> 
       <%= Html.DropDownList("AddTaskType", (SelectList)ViewData["TaskTypes"])%> 
      </p> 
     </fieldset> 
    </form> 
</div> 

Ensuite, ajoutez le Javascript suivant: Note Ouvrir la fonction Ajouter a une Sérialisation. Cela assemble les données Json. Maintenant, descendez et regardez le DTO puis le contrôleur.

<script type="text/javascript"> 
    AddTaskHandler = function() { 
     var SuccessHandler; 

     // Open the dialog    
     Open = function(successHandler, projectId, templateName) { 
     SuccessHandler = successHandler; 
     $('#AddTaskProjectId').val(projectId); 
     $('#AddTaskTemplateName').val(templateName); 

     $('#AddTaskDiv').dialog('open'); 
    } 

    // Initialize the add Task Dialog 
    Init = function() { 
     $('#AddTaskDiv').dialog({ 
      autoOpen: false, 
      modal: true, 
      height: 400, 
      width: 535, 
      buttons: 
      { 
       Cancel: function() { $(this).dialog("close"); }, 
       Add: function() { 
        var mydialog = $(this); 
        var formData = $('#AddTaskForm').serializeArray(); 

        $.post(
         "/Template/AddTask", formData, 
         function(data) { 
          if(data.Status == false) { alert(data.Message); } 
          else { 
           SuccessHandler(data); 
           mydialog.dialog("close"); 
          } 
        }, "json"); 
       } 
      } 
     }); 
    }; 

     return { Init: Init, Open: Open }; 
    }(); 

    $(document).ready(function() { 
     AddTaskHandler.Init(); 
    }); 

</script> 

Créer une DTO: noms de propriété Note ar identiques pour former les noms de contrôle:

public class TaskDto 
{ 
    public string AddTaskProjectId { get; set; } 
    public string AddTaskDescription { get; set; } 
    public string AddTaskDurationInDays { get; set; } 
    public string AddTaskLevel { get; set; } 
    public string AddTaskTemplateId { get; set; } 
    public string AddTaskTemplateName { get; set; } 
    public string AddTaskMajorLevel { get; set; } 
    public string AddTaskMinorLevel { get; set; } 
    public string AddTaskResponsibleRole { get; set; } 
    public string AddTaskActive { get; set; } 
    public string AddTaskType { get; set; } 
} 

Votre contrôleur MVC:

public ActionResult AddTask(TaskDto taskDto) 
{ 
    // Code here 
} 

Et thats it.

Donc, je place la boîte de dialogue dans mon site maître en le rendant là tout le temps, prêt. Il s'initialise.

Puis quand j'en ai besoin j'appelle l'ouverture et puis le repos est fait.