使用 JavaScript 将项目添加到 Model.List<item>

Question

我的模型具有显示在屏幕上的字段，以及显示在屏幕网格中的列表。我有一个添加按钮，它显示一个模式弹出窗口（没有回发），允许用户输入几个字段，然后单击“保存”。目前，我使用 JSON 回调到我的控制器来保存数据。然后我重新加载屏幕，新项目出现在网格中，因为它已保存到数据库中，并且模型重新加载。

问题是，如果用户对模型中的主要细节进行了任何更改，它们就会丢失，因为所有 JSON 调用所做的只是将新项目保存到数据库中，然后重定向到重新加载的主屏幕。

我需要做的是以某种方式将弹出窗口中的新项目添加到主模型，然后重新加载网格，根本不保存到数据库，也没有回发。

我用于从视图发布数据的 javascript 如下所示：

<script type="text/javascript">
    $(document).ready(function () {
        $('.btnSubmitNewCard').click(function () {
            var data = { cardNumber: $('.txtNewCardNumber').val(), cardHolder: $('.txtNewCardHolder').val(), expiryMonth: $('.txtNewExpiryMonth').val(), expiryYear: $('.txtNewExpiryYear').val(), active: $('.txtNewActive').val(), accountId: $('.Id').val() };

            $.ajax({
                url: '@Url.Action("SaveBankCard", "BankAccount")',
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(data),
                cache: false,
                async: true,
                success: function (result) {
                    if (result.Success == 'true') {
                        window.location = '@Url.Action("EditBankAccount", "BankAccount", new { bankAccountId = Model.Id })';
                        } else {
                            alert(result.Message);
                        }
                    },
                error: function () {
                    alert("Oh no");
                }

            });
        });
    });
</script> 

然后处理这个的控制器方法看起来像这样：

public JsonResult SaveBankCard(string cardNumber, string cardHolder, int expiryMonth, int expiryYear, string active, int accountId)
{
    var card = new AccountCardDto
    {
        Id = 0,
        AccountId = accountId,
        Active = active == "on",
        CardHolderName = cardHolder,
        CardNumber = cardNumber,
        ExpiryDate = new DateTime(2000 + expiryYear, expiryMonth, 1)
    };

    var id = new BankAccountService().SaveCard(card);

    var result = new { Success = "true", Message = "Saved", NewId = id };
    var r = new JsonResult
    {
        Data = result
    };

    return r;
}

因此，数据保存在控制器中，然后 Javascript 重定向以加载整个屏幕。可以将其更改为将数据保存到模型的列表客户端，然后通过我屏幕上的一个保存按钮保存具有更改和添加的整个模型吗？是否可以添加到 Model 的 List 客户端？

Answer 1

试试这样的 json 脚本

$('#ddlCompany').change(function () {
            //var URL = $('#Enrollform').data('fetchproduct');
            $.getJSON('/EnrollmentForm/fetchproduct/' + $('#ddlCompany').val(), function (data) {
                var items = '<option>Select a Product</option>';
                $.each(data, function (i, product) {
                    items += "<option value='" + product.Value + "'>" + product.Text + "_" + product.Value + "</option>";
                });
                $('#ddlProduct').html(items);
            });
        });