使用Javascript MVC 3 ASP.NET在主视图中收集的付款的动态部分视图

Question

我是javascript和mvc3的新手，仅供您参考。

我一直在尝试在一种视图中找出多种付款模式而又没有弄乱JavaScript的麻烦。

我正在尝试做的是：

创建一个父模型，以便所有子模型都具有来自父模型的一个或两个属性。

使用javascript以便从服务器获取数据以收集和发布数据，而不会彼此混淆视图上的其他付款。

如果有一种更简单的方法来收取多笔款项并将其返回给控制，请给我一个链接或一些信息以进行研究...谢谢！

在主视图中，我要做的是显示第一个部分视图和两个按钮（发布，添加新付款），发布按钮将付款提交到服务器，新付款添加另一个部分视图付款模型。

我遇到的问题是使局部视图可与javascript一起使用，而该javascript仅针对首次付款。 我已经查了几天这个问题了，找不到一个好的答案。 对我来说唯一有意义的答案是更改部分视图上所有元素的ID，并让我的javascript引用更新的ID，但我不知道如何动态更改ID以使javascript随其更改。

如果您有任何遗漏，我深表歉意。

付款局部视图：

@model SBTools.Models.Payment

@*AJAX TO RETRIEVE BILLING COMPANY LIST DATA*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            url: '@Url.Content("~/AddPayments/GetBillingCompanies")',
            type: 'POST',
            data: {},
            success: function (data) {
                var items = "<option>Select Billing Company</option>";
                $.each(data, function (i, item) {
                    var val = item.OCN;
                    var txt = item.OCNDescription;
                    items += "<option value=" + val + ">" + val + " " + txt + "</option>";
                });
                $('#OCN').html(items);
            }
        });
    });
</script>

@*AJAX TO RETRIEVE CARRIERNAME LIST
    PARAM1: Billing Company OCN*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#OCN').on("change", function () {
            var OCN = $('#OCN').val();
            var connectionString = $('#connectionString').val();

            $.ajax({
                url: '@Url.Content("~/AddPayments/GetConnectionString")',
                type: 'POST',
                data: { OCN: OCN },
                success: function (data) {
                    $('#connectionString').val(data);
                    connectionString = data;
                    $.ajax({
                        url: '@Url.Content("~/AddPayments/GetGLAccounts")',
                        type: 'POST',
                        data: { connectionString: connectionString, OCN: OCN },
                        success: function (data) {
                            var items = "";
                            $.each(data, function (i, item) {
                                items += "<option value=" + item.ID + "/" + item.AccountNumber + ">GL:" + item.AccountNumber +
                                    " &#160;&#160;&#160" + item.AccountName + "</option>";
                            });
                            $('#GLAccount').html(items);
                        }
                    });
                }
            });

            $.ajax({
                url: '@Url.Content("~/AddPayments/GetCarriers")',
                type: 'POST',
                data: { OCN: OCN },
                success: function (data) {
                    var items = "<option>Select a Carrier</option>";
                    $.each(data, function (i, item) {
                        if (item.CIC) {
                            items += "<option value=" + item.CarrierId + ">" + item.CIC + " CIC &#160;" + item.CarrierName + "</option>";
                        } else if (item.OCN) {
                            items += "<option value=" + item.CarrierId + ">" + item.OCN + " OCN &#160;" + item.CarrierName + "</option>";
                        }
                    });
                    $('#CarrierName').html(items);
                }
            });
        });
    });
</script>


@*AJAX TO RETRIEVE BAN/INVOICE/AMOUNT DATA
    PARAM1: Billing company ocn
    PARAM2: Carrier ID*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#CarrierName').on("change", function () {
            var isZeroBalanceShowing = false;
            if ($('#isZeroBalanceShowing').prop("checked"))
                isZeroBalanceShowing = true;
            var carrierID = $('#CarrierName').val();
            var ocn = $('#OCN').val();
            var connectionString = $('#connectionString').val();

            $.ajax({
                url: '@Url.Content("~/AddPayments/GetAccount")',
                type: 'POST',
                data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
                success: function (data) {
                    var items = "";
                    $.each(data, function (i, item) {
                        var inv = item.Invoice;
                        var ban = item.BAN;
                        var initAmnt = item.InitAmount;
                        var amnt = item.Amount;
                        var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
                        var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();

                        items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
                    });
                    $('#BAN').html(items);
                }
            });
        });
    });
</script>

@*AJAX TO SHOW ZERO BALANCES IN INVOICE DROPDOWN*@
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#isZeroBalanceShowing').click(function () {
            var isZeroBalanceShowing = false;
            if ($('#isZeroBalanceShowing').prop("checked"))
                isZeroBalanceShowing = true;
            if ($('#CarrierName').val() != null) {
                var carrierID = $('#CarrierName').val();
                var ocn = $('#OCN').val();
                var connectionString = $('#connectionString').val();

                $.ajax({
                    url: '@Url.Content("~/AddPayments/GetAccount")',
                    type: 'POST',
                    data: { ocn: ocn, carrierID: carrierID, connectionString: connectionString, isZeroBalanceShowing: isZeroBalanceShowing },
                    success: function (data) {
                        var items = "";
                        $.each(data, function (i, item) {
                            var inv = item.Invoice;
                            var ban = item.BAN;
                            var amnt = item.Amount;
                            var initAmnt = item.InitAmount;
                            var temp = new Date(parseInt(item.BillDisplayDate.replace('/Date(', '')));
                            var date = temp.getMonth() + 1 + '/' + temp.getDate() + '/' + temp.getFullYear();

                            items += "<option value=" + inv + "/" + ban + ">" + inv + " : $" + initAmnt + " : " + date + " : $" + amnt + "</option>";
                        });
                        $('#BAN').html(items);
                    }
                });
            }
        });
    });
</script>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        var amnt = "";
        $('#Amount').blur(function () {
            if ($('#Amount').val().toString().charAt(0) === '$') {
                amnt = $('#Amount').val();
                amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
            } else {
                amnt = parseFloat($('#Amount').val()).toFixed(2);
            }
            $('#Amount').val(amnt);
        });
        $('#Deposit').blur(function () {
            if ($('#Deposit').val().toString().charAt(0) === '$') {
                amnt = $('#Deposit').val();
                amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
            } else {
                amnt = parseFloat($('#Deposit').val()).toFixed(2);
            }
            $('#Deposit').val(amnt);
        });
        $('#CheckAmount').blur(function () {
            if ($('#CheckAmount').val().toString().charAt(0) === '$') {
                amnt = $('#CheckAmount').val();
                amnt = parseFloat(amnt.substring(1, amnt.length)).toFixed(2);
            } else {
                amnt = parseFloat($('#CheckAmount').val()).toFixed(2);
            }
            $('#CheckAmount').val(amnt);
        });
    });
</script>

@*DATEPICKER FOR DATE RECIEVED*@
<script>
    $.datepicker.setDefaults({
        constrainInput: true,
        dateFormat: 'yyyy/mm/dd',
        gotoCurrent: true,
        hideIfNoPrevNext: true,
        minDate: '-3m',
        maxDate: 0,
        showOn: 'both'
    });

    @*DATEPICKER FOR CHECKDATE*@

    // To date - default to today's date
    $(document).ready(function () {
        $('#Date').datepicker({
            maxDate: '0',
            defaultDate: new Date(),
            onSelect: function (dateStr) {
                $('#CheckDate').datepicker('option', 'maxDate', $(this).datepicker('getDate') || 0);
            }
        });
    });

    $(document).ready(function () {
        $('#CheckDate').datepicker({
            maxDate: '0',
            defaultDate: new Date(),
            onSelect: function (dateStr) {
                $('#Date').datepicker("option", "maxDate", '+0m +0w');
            }
        });
    });
</script>

<h3>Payment @Html.DisplayFor(x => x.AccountID):</h3>
    @Html.HiddenFor(x => x.AccountID, new { id = "ID" })
    @Html.HiddenFor(x => x.connectionString, new { id = "connectionString" })

<table id="tblAcct" class="display">
            <tr class="spacer" />

            <tr>
                <td>Billling Company (First**):@Html.ValidationMessageFor(model => model.OCN, " *Select a Value")</td>
                <td>Carrier Company (Second**):@Html.ValidationMessageFor(model => model.CarrierName, " *Select a Value")</td>
                <td>Deposit Amount:@Html.ValidationMessageFor(model => model.Deposit, " *Enter a Value") </td>
            </tr>
            <tr>

                @*OCN*@
                <td>
                    <select required id="OCN" name="OCN" style="width: 200px;" tabindex="0" ></select></td>

                @*CarrierName*@
                <td>
                    <select required id="CarrierName" name="CarrierName" style="width: 200px;"></select></td>

                @*DEPOSIT*@
                <td>$@Html.TextBoxFor(a => a.Deposit, new { style = "width:200px;" })</td>

            </tr>

            <tr class="spacer" />

            <tr>
                <td>Check Date:</td>
                <td>Check Amount:@Html.ValidationMessageFor(model => model.CheckAmount, " *Enter a Value")</td>
                <td>Check Number:@Html.ValidationMessageFor(model => model.CheckNumber, " *Enter a Value")</td>
            </tr>
            <tr>
                @*CHECKDATE*@
                <td>@Html.EditorFor(model => model.CheckDate, new { id = "CheckDate" })
                    @Html.ValidationMessageFor(model => model.CheckDate, "mm/dd/yyyy")</td>

                @*CHECKAMOUNT*@
                <td>$@Html.TextBoxFor(a => a.CheckAmount, new { style = "width:200px;" })</td>

                @*CHECKNUMBER*@
                <td>@Html.TextBoxFor(a => a.CheckNumber, new { style = "width:200px;" })</td>
            </tr>
        </table>
<table id="tblAcctInvoice" class="display">
    <tr class="spacer" />

    <tr>
        <td>Invoice:&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                     @Html.CheckBoxFor(model => model.isZeroBalanceShowing, new { id = "isZeroBalanceShowing" }) Zero Balances
                     @Html.ValidationMessageFor(model => model.Invoice, " *Select a Value")</td>
        <td>Payment Date:</td>
        <td>Payment Amount:@Html.ValidationMessageFor(model => model.Amount, " *Enter a Value")</td>
        <td>GL Account:@Html.ValidationMessageFor(model => model.GLAccount, " *Select a Value")</td>
    </tr>
    <tr>
        @*BAN*@
        <td>
            <select required id="BAN" name="Invoice" style="width: 351px;"></select></td>
        @*PAYMENT DATE*@
        <td>
            <div class="Date">
                @Html.EditorFor(model => model.Date, new { id = "Date" })
                @Html.ValidationMessageFor(model => model.Date, "mm/dd/yyyy")
            </div>
        </td>

        @*PAYMENT AMOUNT*@
        <td>
            <div class="currency">
                $@Html.TextBoxFor(a => a.Amount, new { style = "width:150px;", id = "Amount" })
            </div>
        </td>

        @*GLACCOUNT*@
        <td>
            <select required id="GLAccount" name="GLAccount" style="width: 200px;"></select></td>
    </tr>
</table>

<table id="tblAcctComment" class="display">
    <tr>
        <td>Comments:&#160;&#160;&#160;&#160;&#160;&#160;&#160;
                @*ISSERVICEBUREAU*@
            @Html.CheckBoxFor(a => a.isServiceBureauCollection, new { @checked = "checked" }) Service Bureau Collection:</td>

    </tr>
    <tr>
        <td>
            @Html.TextAreaFor(a => a.Comment, new { style = "width:99%; height: 20px;" })
        </td>
    </tr>
</table>

Answer 1

发生这种情况是因为您正在页面中动态加载html（局部视图），并且添加到页面的新html元素未与任何javascript事件绑定。 jQuery始终仅对HTML dom中加载的那些元素起作用。 为了使您的页面正常工作，您必须在成功回调中调用该部分页面的所有jquery事件。