Question

我的aspx标记中有一个表单。

我动态添加了一些字段。

我将它们提交给控制者的行动。

我应该如何在服务器端阅读它们？

更新

我的表单包含n个文本框。
我曾想过要使用一个包含一个的模型 IEnumerable<FormItem>

在客户端，我将用Ajax表单填充它。

有意义吗？

Answer 1

假设您的表单包含一个文本框供用户输入电子邮件地址，表单的标记如下所示：

@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对象的Form属性访问Request文本框内的值：

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 2

您可以使用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>

然后你的动作将把这个数组作为JavaScript对象通过http post请求获得，你需要将它反序列化为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");
}

Answer 3

我曾想过使用一个包含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>

最后AJAX化表格：

$(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也是必读的。

在动态构建表单时如何使用Ajax表单？

3 个答案: