2015-12-04 1 views
0

J'ai une table dans une vue partielle qui contient une liste de clients où chaque ligne de la table représente un client. Maintenant, mon objectif est d'enrouler un formulaire autour de chacune des lignes et en cliquant sur la ligne, il va remplir un div avec les détails du client. Cependant, comme je suis assez novice dans l'utilisation de la syntaxe du rasoir, je ne suis pas sûr de la façon d'aborder cette question. Jusqu'à présent, j'ai le code suivant:ASP.net Ajax.BeginForm pour les lignes de table

<table class="customerResultsTable" border="1"> 
<thead class="customerResultsTableHead"> 
    <tr class="customerResultsTableRowHead"> 
     <td class="customerResultsTableCellHead">Company Name</td> 
    </tr> 
</thead> 
<tbody class="customerResultsTableBody"> 
    @{ 
     foreach (EntityDTO customer in Model.entities) 
     { 
      using (Ajax.BeginForm("showCustomer", "VF", new AjaxOptions { UpdateTargetId = "customerView" })) 
      { 
       <tr id="@customer.InternalCode" class="customerResultsTableRow" onclick="submit"> 
        <td class="customerResultsTableCell">@customer.Name</td> 
        <td>@Html.TextBoxFor(x => x.customerID, new { Value = customer.InternalCode })</td> 
       </tr> 
      } 
     } 
    } 
</tbody> 
</table> 
<div id="customerView"> 

</div> 

De toute évidence, cela ne fonctionne pas, donc je suis à la recherche de conseils.

Merci à l'avance

EDIT

Voici ma dernière tentative qui ne soumettre le formulaire cependant, le PartialView que mes déclarations de contrôleur ne retourne pas dans le customerView div. Je peux seulement supposer que c'est parce que le document.forms.submit ne reconnaît pas qu'il devrait être et ajax appel?

@using (Ajax.BeginForm("showCustomer", "VF", new { id="customerForm" }, new AjaxOptions { UpdateTargetId = "customerView" })) 
{ 
    <table class="customerResultsTable" border="1"> 
     <thead class="customerResultsTableHead"> 
      <tr class="customerResultsTableRowHead"> 
       <td class="customerResultsTableCellHead">Company Name</td> 
      </tr> 
     </thead> 
     <tbody class="customerResultsTableBody"> 
      @foreach (EntityDTO customer in Model.entities) 
      { 
       <tr class="customerResultsTableRow"> 
        <td class="customerResultsTableCell"><div id="@customer.InternalCode" onclick="document.forms['customerForm'].submit(this.id)">@customer.Name</div></td> 
       </tr> 
      } 
     </tbody> 
    </table> 
} 
<div id="customerView"> 

</div> 
+0

Je pense que cela peut être réalisé en utilisant une seule forme aussi bien. Vous pouvez utiliser un formulaire et mettre en boucle tous les éléments et vous pouvez définir un popup modal sur chaque lien via ajax. En outre, quel genre de div vous peupler? Utilisez-vous Javascript ou publiez-vous le formulaire? –

+0

Ainsi, au lieu d'avoir un formulaire sur chaque ligne de table, utilisez un formulaire sur la table entière et trace quelle sélection est faite? C'est ce que tu veux dire? La div se trouve juste en dessous de la table, le formulaire doit afficher le customerID à un contrôleur où une récupération de données sera effectuée. Les données seront ensuite renvoyées à une vue partielle qui sera placée à l'intérieur de la div customerView. J'espère que cela a du sens, @MattMurdock –

+0

Pourquoi avez-vous besoin d'un formulaire? Si vous voulez obtenir des détails basés sur un identifiant client, alors c'est un GET que vous pouvez faire avec '@ Ajax.ActionLink()' ou mieux, en utilisant la méthode 'jQuery.get()' –

Répondre

0

Avez-vous installé Microsoft.jQuery.Unobtrusive.Ajax? Vous devez également ajouter ces:

Dans BudleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
     "~/Scripts/jquery.unobtrusive-ajax*")); 

Dans _Layout.cshtml

@Scripts.Render("~/bundles/jqueryajax")