使用ajax添加部分视图时如何将部分视图列表绑定到模型

Question

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

我们有一张卡，可以随时随地添加多笔交易。

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

[![添加卡号和交易][1]][1]

这是卡交易的模型

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

交易：

public class Transaction
{
    public bool isSelected { get; set; }
    public int Amount { get; set; }
    public DateTime TransDateTime { get; set; }
    public string Location { get; set; }
    public string Desc1 { get; set; }
    public string Desc2 { get; set; }
    public string Desc3 { 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>

[![在此处输入图片描述][1]][1]

这是添加卡号和交易的视图

@model AcctCardTransaction 
@{
    ViewBag.Title = "Add Transactions";
}
@using (Html.BeginForm("AddTransactions", "Prepaid"))
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnAddTran").click(function () {
                $.ajax({
                    url: '/Prepaid/AddOneTransaction',
                    contentType: 'application/html; charset=utf-8',
                    type: 'GET',
                    dataType: 'html'

                }).success(function (result) {
                    $('#addTransDiv').append(result);

                })
                        .error(function (xhr, status) {
                            alert(status);
                        });
            });
        });
    </script>

    <div class="form-inline bottom-left">
        <div class="row">
            @Html.Label("Last 4 digits of the card")
            @Html.EditorFor(model => model.LastFourDigCard)
            @Html.ValidationMessageFor(model => model.LastFourDigCard)

          @*   @Html.Partial(  "~/Views/Shared/Partials/_addTransaction.cshtml")*@


            <input id="btnAddTran" value="Add Transaction" class="btn btn-default pull-right" />
        </div>
    </div>
    <br />

    <div class="row" id="addTransDiv">
        <hr />
    </div>

    <input type="submit" value="save" class="btn btn-default pull-right" />    
}

这是我的简单控制器。 AddoneTransaction 是将一个事务部分视图添加到视图的操作。在我的 httpPost AddTransactions 操作中，模型对象不返回任何事务。

这是我的确切问题。如何将这些部分视图作为列表返回的交易模型对象绑定到主模型对象卡交易，然后从那里将其返回给控制器？

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

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

Answer 1

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

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

您还使用自定义 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;
});