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

本文关键字：表单 Ajax 构建 动态 | 更新日期: 2023-09-27 18:29:56

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

我动态地添加了一些字段。

我把它们交给管理员处理。

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

更新

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

  2. 我曾考虑使用一个模型，该模型将包含IEnumerable<FormItem>

在客户端，我将使用Ajax表单进行填充。

有道理吗？

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

我想使用一个模型，它将包含一个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关于绑定到列表的预期有线格式的博客文章。

史蒂夫·桑德森关于编辑可变长度列表的博客文章也是必读之作。

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

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

可以使用Request对象的Form属性访问email文本框内的值：

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类型的参数（请参阅此示例），或者创建具有强类型的视图模型类

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

然后，您的操作将通过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");
}
相关文章：