Envoyer Ajax Array pour contrôleur

Question

Au-dessus, je l'ai montré la mon interface utilisateur dynamique et la façon dont je mets les ids dynamiquement pour les domaines pertinents en fonction de la date.

donc j'ai besoin d'envoyer des données de thèses dans le contrôleur MVC comme un poste ajax tableau et ensuite choisir les choses à l'intérieur des controller.This devrait être passé quand je clique Enregistrer bouton

Ma méthode post est comme ci-dessous (sans plus de détails ci-dessus du tableau):

$("#clocked-details").find("#btnSave").die('click').live('click', function() { 

     var yearValue = $("#year").val(); 
     var monthValue = $("#month").val(); 

     $.ajax({ 
      url: "/Employees/UpdateEmployeeClockedHoursByProvider", 
      type: 'POST', 
      cache: false, 
      data: { employeeId: employeeId, year: yearValue, month: monthValue }, 
      success: function (result) { 

      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert(xhr.status); 
       alert(thrownError); 
       } 
      }); 
      return false; 
     }); 

Mon contrôleur est comme ci-dessous (sans tableau de jquery maupulation):

[HttpPost] 
public void UpdateEmployeeClockedHoursByProvider(Guid employeeId, int year, int month) 
     { 

     } 

interface utilisateur mise à jour

a été généré en utilisant le code mentionné ci-dessous:

<% foreach (var ec in Model) 
     {%> 
    <tr> 
     <td> 
      <%: ec.ClockedDate.ToString("yyyy-MM-dd") %> 
     </td> 
     <td> 
      <input type="number" id="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-hours" name="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-hours" 
       class="total-hours" placeholder="Hours" value="<%: ec.TotalHours %>" /> 
     </td> 
     <td> 
      <input type="number" id="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-minutes" name="<%: ec.ClockedDate.ToString("yyyy-MM-dd") %>-minutes" 
       class="total-minutes" placeholder="Minutes" value="<%: ec.TotalMinutes %>" /> 
     </td> 
    </tr> 
    <% }%> 

Mes questions:

1. Comment envoyer ci-dessus dynamiques 2 champs par ligne de données en utilisant ajax ?

2. Comment manipuler ce tableau à l'intérieur du contrôleur?

Answer 1

Vous pourriez commencer par définir un modèle de vue sur le serveur qui représentera les données que vous souhaitez récupérer:

public class MyViewModel 
{ 
    public Guid EmployeeId { get; set; } 
    public int Year { get; set; } 
    public int Month { get; set; } 

    public ItemViewModel[] Items { get; set; } 
} 

public class ItemViewModel 
{ 
    public int TotalHours { get; set; } 
    public int TotalMinutes { get; set; } 
} 

et alors votre action de contrôleur prendre ce modèle de vue comme argument:

[HttpPost] 
public ActionResult UpdateEmployeeClockedHoursByProvider(MyViewModel model) 
{ 
    ... 
} 

L'étape suivante consiste à fixer votre point de vue un peu parce que le droit vous semblez maintenant être hardcoding champs d'entrée au lieu d'utiliser des aides html et de définir et de mauvaises ids noms pour vos champs de saisie (en HTML l'attribut id et name ne peut pas commencer par un nombre).

Alors, voici comment vous pouvez générer la table:

<% using (Html.BeginForm("UpdateEmployeeClockedHoursByProvider", null, FormMethod.Post, new { id = "myForm" })) { %> 
    <table> 
     <thead> 
      <tr> 
       <th>Clocked Date</th> 
       <th>Total Hours</th> 
       <th>Total Minutes</th> 
      <tr> 
     </thead> 
     <tbody> 
      <% for (var i = 0; i < Model.Count; i++) { %> 
      <tr> 
       <td> 
        <%= Html.DisplayFor(x => x[i].ClockedDate) %> 
       </td> 
       <td> 
        <%= Html.TextBoxFor(
         x => x[i].TotalHours, 
         new { 
          type = "number", 
          placeholder = "Hours", 
          @class = "total-hours" 
         } 
        ) %> 
       </td> 
       <td> 
        <%= Html.TextBoxFor(
         x => x[i].TotalMinutes, 
         new { 
          type = "number", 
          placeholder = "Minutes", 
          @class = "total-minutes" 
         } 
        ) %> 
       </td>      
      </tr> 
     <% } %> 
     </tbody> 
    </table> 

    <button type="submit">Save</button> 
<% } %> 

et enfin vous pourriez avoir un fichier javascript qui abonner au gestionnaire .submit du formulaire et envoyer les valeurs au serveur:

$(document).on('#myForm', 'submit', function() { 
    var items = []; 
    $('table tbody tr').each(function() { 
     items.push({ 
      totalHours: $(this).find('td input.total-hours').val(), 
      totalMinutes: $(this).find('td input.total-minutes').val() 
     }); 
    }); 

    var data = { 
     employeeId: employeeId, // <!-- It's not very clear from your code where is this supposed to come from 
     year: $('#year').val(), 
     month: $('#month').val(), 
     items: items 
    }; 

    $.ajax({ 
     url: this.action, 
     type: this.method, 
     contentType: 'application/json', 
     data: JSON.stringify(data), 
     success: function (result) { 
      // TODO: here you could handle the response from the server 
      alert('Your request has been successfully processed.'); 
     }, 
     error: function (xhr, ajaxOptions, thrownError) { 
      alert(xhr.status); 
      alert(thrownError); 
     } 
    }); 

    return false; 
}); 

Dans cet exemple, remarquez comment j'ai utilisé la méthode .on() au lieu de .live() qui est obsolète et ne devrait plus être utilisée.

Answer 2

Cette réponse est pour vos requêtes n ° 1.

vous pouvez envoyer toutes les données de formulaire en utilisant form.serialize(). par exemple

$.ajax({ 
    ... 
    data: $('#yourformId').serialize(), 
    ... 
});