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

本文关键字：视图 列表 绑定 模型 添加部 ajax 当用 | 更新日期: 2023-09-27 18:11:50

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

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

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

[![Add Card # and Transactions][1]][1]

这是Card Transactions的模型

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]

下面是添加card#和transaction的视图

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

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

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

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

…但是我不能够理解如何使用视图创建模型的对象。

你也正在使用自定义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;
});
相关文章：