javascript - 使用 JavaScript 将项目添加到 Model.List

Question

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

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

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

我用于从 View 中发布数据的 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> 

然后处理这个的 Controller 方法看起来像这样:

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

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

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