在通过 AJAX 发送之前存储客户数据（电话）的最佳方式答案

【问题标题】：Best way to store data (Phones) from Customer before send via AJAX在通过 AJAX 发送之前存储客户数据（电话）的最佳方式
【发布时间】：2021-03-04 23:52:21
【问题描述】：

我在存储 Employee 的控制器上开发了一个注册视图和操作。它正在工作。但现在，我想在一个请求中发送我的 N 部手机和员工数据。我正在使用 AJAX。

当我添加新手机时，我将手机列表存储在一个变量中，并通过 Ajax Post 发送所有内容（我的 Employee ViewModel 有很多手机）。

但是...在通过 ajax 发送之前，我应该如何存放我的手机？在javascript变量中？本地存储？与 PartialView 的会话？只能放在桌子上？你们怎么建议？

我也必须在我的更新视图中这样做。我应该使用 PartialView 吗？

【问题讨论】：

嗨@Dockerizandu，如果我的回复对你有帮助，你可以接受它作为答案，谢谢:)。

标签： javascript asp.net-mvc asp.net-core asp.net-mvc-4

【解决方案1】：

您可以将数据存储在 formData 中，然后使用 ajax 将其发送到控制器操作。

下面是一个简单的演示。

型号：

public class Employee
{
    public string Name { get; set; }
    public int Salary { get; set; }
    public List<int> Phones { get; set; }
}

查看：

@model Employee
@{
    ViewData["Title"] = "Create";
}

<h1>Add New Employee</h1>

<form method="post">
    <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" asp-for="Name">
    </div>
    <div class="form-group">
        <label>Salary</label>
        <input type="text" class="form-control" asp-for="Salary">
    </div>
    <div class="form-group">
        <label>Phone Number</label>
        <input type="text" name="Phones" class="form-control" >
    </div>
    <div>
        <a href="#" onclick="addPhone(this)">Add more Phone Numbers</a>
    </div>
    <button id="submit" type="submit" class="btn btn-primary">Submit</button>
</form>


@section scripts{ 
<script>
    function addPhone(e) {
        var x = $('body').find("input[name='Phones']").last().parent();
        var htmlstring = "<div class='form-group'><label>Phone Number</label><input type='text' name='Phones' class='form-control'></div>"
        $(x).append(htmlstring);
    }

    $("#submit").on("click", function (e) {
        e.preventDefault();
        var formData = new FormData();

        var name = $("#Name").val();
        var salary = $("#Salary").val();
    
        formData.append("Name", name);
        formData.append("Salary", salary);
        $("input[name='Phones']").each(function (i) {
            var phones = $(this).val();
            formData.append("Phones", phones);
        });

        $.ajax({
            method:"post",
            url:"/Employee/Create",
            data: formData,
            processData: false,
            contentType: false,
            success: function () {

            }
        })
    })
</script>
}

控制器：

[HttpPost]
public IActionResult Create(Employee employee)
{
    return View();
}

结果：

【讨论】：