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

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

1 个答案: