Wie Ajax-Formular verwenden, wenn das Formular dynamisch erstellt wird?

Question

Ich habe ein Formular in meinem aspx Markup.

Ich füge einige Felder dynamisch hinzu.

Ich übergebe sie an die Aktion eines Controllers.

Wie sollte ich sie auf der Serverseite lesen?

aktualisieren

1. Meine Form enthält n Textfelder.

2. Ich habe gedacht, ein Modell zu verwenden, die eine IEnumerable<FormItem>

in der Client-Seite enthalten werde ich es mit Ajax Formular ausfüllen werden.

Sinn machen?

Answer 1

ich habe gedacht, ein Modell zu verwenden, die eine IEnumerable

Ja, tolle Idee enthält.Also, wenn Sie die FormItem Klasse definiert haben (je nach Bedarf) Sie sind bereit zu rollen:

public class FormItem 
{ 
    public string Value { get; set; } 
} 

und dann:

<form id="myform" action="/" method="post"> 
    <!-- Those inputs could be added dynamically --> 
    <input type="text" name="[0].Value" /> 
    <input type="text" name="[1].Value" /> 
    <input type="text" name="[2].Value" /> 
    <input type="text" name="[3].Value" /> 

    <button type="submit">OK</button> 
</form> 

und schließlich AJAXify die Form:

$(function() { 
    $('#myform').submit(function() { 
     var form = $(this); 
     $.ajax({ 
      url: form.attr('action'), 
      type: form.attr('method'), 
      data: form.serialize(), 
      success: function(result) { 

      } 
     }); 
    }); 
}); 

Stellen Sie sicher, dass Sie Phil Haack's blog post über das erwartete Drahtformat für die Bindung an Listen auschecken.

Steve Sanderson blog post post über die Bearbeitung einer Liste variabler Länge ist auch ein Muss zu lesen.

Answer 2

Formulars enthält für den Benutzer ein Textfeld Unter der Annahme, eine E-Mail-Adresse einzugeben, und das Markup für Ihr Formular sieht wie folgt aus:

@using (Html.BeginForm("Index")) 
{ 
    <!-- pretend this field was dynamically created with javascript --> 
    <input id="email" type="email" name="email" /> 

    <button type="submit">Submit</button> 
} 

Der Wert innerhalb des email Textbox zugegriffen werden kann die Form Eigenschaft des Request Objekt:

public class HomeController : Controller 
{ 
    [HttpPost] 
    public ActionResult Index() 
    { 
     // Get the value of the input named `email` 
     var email = Request.Form["email"]; 

     /* Do cool stuff because you can */ 
    } 
} 

Oder könnten Sie Ihre Aktion-Methode, um akzeptiert zu einem String-Parameter mit dem gleichen Namen wie die Eingabe ändern:

public class HomeController : Controller 
{ 
    [HttpPost] 
    public ActionResult Index(string email) 
    { 
     // The default model binder will set the value of the `email` parameter to the 
     // value of the matching input from your form 

     /* Do cool stuff because you can */ 
    } 
} 

Es gibt andere Möglichkeiten, wie einen Parameter vom Typ akzeptieren FormCollection (siehe this example) oder mit Blick Modellklasse zu schaffen stark typisierte

Answer 3

Sie könnten jQuery verwenden, wenn Ihre Felder dynamisch erstellt werden dann Ich nehme an, Sie würden diese Felder als ein Array übergeben. Sie sollten jedem neuen Feld eine Klasse hinzufügen, damit Sie sie abrufen können.

<input class="dynamicInput" type="text"></input> 
<input class="dynamicInput" type="text"></input> 
<input class="dynamicInput" type="text"></input> 
<button id="submit">submit</button> 
<script type="text/javascript"> 
    $(function(){ 
     var myArray = []; 
     $('#submit').on('click', function(i,val){ 
      //It will go through any input with a class "dynamicInput" 
      $.each($('.dynamicInput'), function(){ 
       myArray.push($(this).val()); 
      }); 
      //We'll send our array to MyAction 
      $.post('/MyController/MyAction', myArray, function(data) { 
       //If your action returns a string you could handle it through "data" 
       console.log(data); 
      }); 

     }); 
    }); 
</script> 

Dann die Aktion dieses Array througn eine HTTP POST-Anfrage als JavaScript-Objekt, müssen Sie es auf eine C# Array deserialisiert wird, so dass Sie es in Ihrem Server-Seite umgehen kann:

[HttpPost] 
public ActionResult MyAction(FormCollection values) 
{ 
    var jsonArray = values["myArray"]; 
    var deserializer = new JavaScriptSerializer(); 
    var cSharpArray = deserializer.Deserialize<List<string>>(jsonArray); 


    //Here you will handle your array as you wish 


    //Finally you could pass a string to send a message to your form 
    return Content("Message to user"); 
}