如何在表單動態構建時使用Ajax表單？

Question

我在我的aspx標記中有一個表單。

我給它添加了一些動態的字段。

我將它們提交給控制器的操作。

我應該如何在服務器端讀取它們？

更新

1. 我的表單包含n文本框。

2. 我曾經想過用一個模型將在客戶端包含 IEnumerable<FormItem>

我會用Ajax表格吧。

有意義嗎？

Answer 1

我曾經想過用一個模型將包含一個IEnumerable

是啊，偉大的想法。所以，一旦你（根據您的需要）定義的FormItem類，你都已經準備好了：

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

然後：

<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> 

最後AJAXify形式：

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

      } 
     }); 
    }); 
}); 

請確保您結帳Phil Haack's blog post有關綁定到列表的預期連線格式。

Steve Sanderson的blog post post關於編輯可變長度列表也是必讀。

Answer 2

假設你的表單包含該用戶的文本框輸入一個電子郵件地址，併爲您的形式標記看起來是這樣的：

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

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

的email文本內的值可以通過訪問在Request對象的Form屬性：

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 */ 
    } 
} 

或者，你可以修改你的操作方法，以接受一個字符串參數具有相同的名稱作爲輸入：

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 */ 
    } 
} 

還有其他的方法，比如接受FormCollection類型（見this example）的參數，或創建一個視圖模型類的強類型

Answer 3

你可以使用jQuery，如果你的領域被動態創建然後我想你會以數組形式傳遞這些字段。 您應該爲每個新字段添加一個類，以便您可以獲取它們。

<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> 

那麼你的行動會得到這個數組througn HTTP POST請求的JavaScript對象，你需要將其反序列化到C＃數組，所以你可以在你的服務器端處理：

[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"); 
}