C# 使用ajax添加局部视图时，如何将局部视图列表绑定到模型

我是MVC新手，我试图理解整个模型是如何绑定到视图的。我了解如何使用局部视图显示任何复杂对象，但无法理解如何使用视图创建模型对象

我们有一张卡，可以在移动中添加多笔交易

本质上，我试图实现的是添加事务的视图。单击Add transactions（添加事务）按钮时，会将部分视图添加到主页上的div标记中。当我点击save时，所有这些事务都必须添加到AcctCardTransaction模型中，然后发送到控制器。我无法添加页面的UI，因为网站不允许我添加它。我所要做的只是显示一个绑定到模型的局部视图，并创建一个事务列表，以便使用模型保存到表中

[！[添加卡和交易][1][1]

这是卡交易的模型

public class AcctCardTransaction
{
    public int? LastFourAcctNumber { get; set; }
    public int LastFourDigCard { get; set; }
    public List<Transaction> AssociatedTransactions { get; set; }
}

下面是将一个事务添加到屏幕上的部分视图

@model UI.Data.Models.Claim.Transactions.Transaction

@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<div class="row">
    <div class="col-md-1">
        <br />
        @Html.CheckBoxFor(model => model.isSelected)
    </div>
    <div class="col-md-2">
        @Html.LabelFor(model => model.Amount) <label>:</label>
        @Html.EditorFor(model => model.Amount)
    </div>

    <div class="col-md-2">
        @Html.LabelFor(model => model.TransDateTime)
        @Html.EditorFor(model => model.TransDateTime)
        @Html.ValidationMessageFor(model => model.TransDateTime)
    </div>


    <div class="col-md-2">
        @Html.LabelFor(model => model.Location)
        @Html.EditorFor(model => model.Location)
        @Html.ValidationMessageFor(model => model.Location)

    </div>

    <div class="col-md-2">
        @Html.LabelFor(model => model.Desc1)

        @Html.EditorFor(model => model.Desc1)
        @Html.ValidationMessageFor(model => model.Desc1)

    </div>
    <div class="col-md-1">
        <br />
        <a href="#" onclick="$(this).parent().parent().remove();" style="float:right;">Delete</a>
    </div>      
</div>

---

我尝试了很多方法来寻找这个问题的答案，但无法理解其他人在谈论什么，我看到了很多关于如何使用对象列表显示现有模型的帖子，但我想在这里创建，而不仅仅是显示。

您为两个视图提供了两个不同的模型，并希望它们以某种方式绑定到一个

模型，并在发布时返回单个模型。这没有任何意义

…但我无法理解如何使用视图创建模型的对象

此外，您正在使用自定义javascript呈现局部视图。因此，您必须编写一个JS方法来查找表单，并从所有添加的局部视图（事务）构建模型，然后将其发布到服务器

$('button.submitTransaction').click(function (e) {

    // Sample to find all div containing all added transactions type
    var form = $('#AddTransactions').find('form');

    // validate the form
    var v = $(form).valid();

    if (v === true) {

        var transactionsContainer = $('#AddTransactions').find('row');

        // Loop through the transaction div container
        // Find your model properties from fields

        var transactions = [];
        // Fill transaction related information in the array
        // e.g. Find Amount's value and other properties in a Row with in the loop

        var transaction = { 
            'Amount': Amount, 
            'TransDateTime': TransDateTime,
            'Location': Location,
            'Desc1': Desc1
        }

        transactions.push(transaction);

        // user your actual post url here 
        // Data would be automatically deserialized to the model i.e. AcctCardTransaction
        var jqreq = $.post('/Prepaid',
            {
                'LastFourAcctNumber': lastFourAccNo,
                'LastFourDigCard': lastFourDigCard,
                'Description': description,
                'AssociatedTransactions': transactions
            });

        jqxhrjqreq.done(function (data) {
            if (data === true) {
                alert('Success!!');
            } else {
                onError(null);
            }
        });

        jqreq.fail(function (e) {
            onError(e);
        });
    }
    return false;
});

您为这两个视图提供了两个不同的模型，并希望它们以某种方式绑定到一个
模型
，并在发布时返回单个模型。这没有任何意义

…但我无法理解如何使用视图创建模型的对象

此外，您正在使用自定义javascript呈现局部视图。因此，您必须编写一个JS方法来查找表单，并从所有添加的局部视图（事务）构建模型，然后将其发布到服务器

$('button.submitTransaction').click(function (e) {

    // Sample to find all div containing all added transactions type
    var form = $('#AddTransactions').find('form');

    // validate the form
    var v = $(form).valid();

    if (v === true) {

        var transactionsContainer = $('#AddTransactions').find('row');

        // Loop through the transaction div container
        // Find your model properties from fields

        var transactions = [];
        // Fill transaction related information in the array
        // e.g. Find Amount's value and other properties in a Row with in the loop

        var transaction = { 
            'Amount': Amount, 
            'TransDateTime': TransDateTime,
            'Location': Location,
            'Desc1': Desc1
        }

        transactions.push(transaction);

        // user your actual post url here 
        // Data would be automatically deserialized to the model i.e. AcctCardTransaction
        var jqreq = $.post('/Prepaid',
            {
                'LastFourAcctNumber': lastFourAccNo,
                'LastFourDigCard': lastFourDigCard,
                'Description': description,
                'AssociatedTransactions': transactions
            });

        jqxhrjqreq.done(function (data) {
            if (data === true) {
                alert('Success!!');
            } else {
                onError(null);
            }
        });

        jqreq.fail(function (e) {
            onError(e);
        });
    }
    return false;
});

您当前的实现只是添加具有重复的
name
属性（没有索引器，因此无法绑定到集合）和重复的
id
属性（无效的html）的元素。您可以使用
BeginCollectionItem
helper，或者使用纯客户端解决方案来动态添加和删除集合项，如前所述，您当前的实现只是添加具有重复
name
属性的元素（没有索引器，因此无法绑定到集合）和重复的
id
属性（无效的html）。您可以使用
BeginCollectionItem
helper，或者使用纯客户端解决方案来动态添加和删除集合项，正如我所说的，我是MVC的新手，因此我试图了解它是如何工作的，我认为模型在发送到客户端后仍然存在。我一定会试试这种方法！正如我所说，我是MVC新手，所以我试图了解它是如何工作的，我认为模型在发送到客户机后仍然存在。我一定会试试这种方法！
[HttpGet]
public ActionResult AddTransactions()
{
    AcctCardTransaction acctCardtran = new AcctCardTransaction();
    return View(acctCardtran);
}

[HttpPost]  
public ActionResult AddTransactions(AcctCardTransaction cardTrans)
{
    return View();
}

public ActionResult AddOneTransaction()
{
    Transaction nTran = new Transaction();
   return PartialView("~/Views/Shared/Partials/_addTransaction.cshtml",nTran);
}

$('button.submitTransaction').click(function (e) {

    // Sample to find all div containing all added transactions type
    var form = $('#AddTransactions').find('form');

    // validate the form
    var v = $(form).valid();

    if (v === true) {

        var transactionsContainer = $('#AddTransactions').find('row');

        // Loop through the transaction div container
        // Find your model properties from fields

        var transactions = [];
        // Fill transaction related information in the array
        // e.g. Find Amount's value and other properties in a Row with in the loop

        var transaction = { 
            'Amount': Amount, 
            'TransDateTime': TransDateTime,
            'Location': Location,
            'Desc1': Desc1
        }

        transactions.push(transaction);

        // user your actual post url here 
        // Data would be automatically deserialized to the model i.e. AcctCardTransaction
        var jqreq = $.post('/Prepaid',
            {
                'LastFourAcctNumber': lastFourAccNo,
                'LastFourDigCard': lastFourDigCard,
                'Description': description,
                'AssociatedTransactions': transactions
            });

        jqxhrjqreq.done(function (data) {
            if (data === true) {
                alert('Success!!');
            } else {
                onError(null);
            }
        });

        jqreq.fail(function (e) {
            onError(e);
        });
    }
    return false;
});