ASP.NET MVC: Transmission des données de View to Controller (Ajax vs jQuery)

Question

Cette question a déjà été posée, mais aucune de celles que j'ai passées en revue ne donne une solution claire ou complète. J'espère que vous pouvez m'aider ici.
Je souhaite transmettre les données saisies par le client (un champ de texte de saisie) au serveur à l'aide d'AjaxHelper. S'il y a une solution plus élégante, répondez avec le code qui correspond à mon échantillon.
J'ai également essayé d'utiliser le Ajax.BeginForm() sans succès. Gardez à l'esprit qu'il y a deux boutons ici. Celui qui ajoute dynamiquement ce que l'utilisateur entre sous le champ de saisie. Et le second bouton est juste un simple message non-ajax au contrôleur.
Les éléments sont ajoutés dynamiquement en utilisant Ajax.ActionLink() et une vue partielle "_NewRow.cshtml" pour définir le balisage.

Voici mon Index.cshtml:

@model MyAccount 
@using (Html.BeginForm()) 
{ 
    @Html.ValidationSummary(excludePropertyErrors: true) 
<fieldset> 
    <div class="form-element cf"> 
     <div class="form-label"> 
      <span>Approvers:</span> 
     </div> 
     <div class="form-input cf"> 
      @Html.TextBox("accountName", string.Empty, new { @class = "input-search-person" }) 
      @Ajax.ActionLink("Add", "AddRecipient", "Test", 
       new 
       { 
        accountName = "Value from Input here." 
       }, 
       new AjaxOptions 
       { 
        UpdateTargetId = "recipientList", 
        HttpMethod = "POST", 
        InsertionMode = InsertionMode.InsertAfter 
       }) 
      <div style="display: block; margin-top: 5px"> 
       <div id="recipientList"> 
       </div> 
      </div> 
     </div> 
    </div> 
</fieldset> 
<input type="submit" class="btn green rounded" id="Submit" name="Submit" value="Submit" /> 
} 

Voici mon TestController.cs:

public class TestController : Controller 
{ 
    public PartialViewResult AddRecipient(string accountName) 
    { 
     MyAccount acct = new MyAccount(); 
     acct.LastName = accountName; 
     acct.Email = "some email"; 
     return PartialView("_NewRow", acct); 
    } 

    [HttpGet] 
    public ActionResult Index() 
    { 
     return View(); 
    } 

    [HttpPost] 
    public ActionResult Index(IEnumerable<string> accountList, string accountName) 
    { 
     if (Request.IsAjaxRequest()) 
     { 
      MyAccount acct = new MyAccount(); 
      acct.LastName = accountName; 
      acct.Email = "some email"; 
      return PartialView("_NewRow", accountName); 
     } 

     if (ModelState.IsValid) 
     { 
      RedirectToAction("AnotherAction", "AnotherController"); 
     } 

     return View(); 
    } 

} 

Voici mon Vue partielle "_NewRow.cshtml":

@model MyAccount 
@using (Html.BeginCollectionItem("recipients")) 
{ 
    @Html.HiddenFor(model => model.LastName) 
    @Html.HiddenFor(model => model.Email) 
<span>@Model.LastName<span>(@Model.Email)</span></span> 
} 

Et voici ma modèle simple MyAccount.cs:

[Serializable] 
[DataContract] 
public class MyAccount 
{ 
    [DataMember] 
    public virtual string LastName { get; set; } 
    [DataMember] 
    public virtual string Email { get; set; } 
} 

Votre aide serait grandement appréciée. Merci!

Answer 1

changer votre lien d'action à un bouton HTML régulier

<button type="button" id="textButton">Add</button> 

Puis, avec un peu de jQuery vous sont fait

$('#textButton').click(function(){ 
    var recipName = $('.input-search-person').val(); 

    $.post('/Test/AddRecipient', 
      { accountName: recipName}, 
      function(data){ 
       $('#recipientList').append(data); 
      }); 

});