1

我有视图包含salesmain和salesub详细信息

@using (Html.BeginForm())
{
<TABLE >
<tr>
<td>
<label id="lblBuyerName" style="color: white">BuyerName</label>
</td>
<td>
<input type="text" name="txtBuyerName" id="BuyerName" style="width: 250px;"/>
</td>

</tr>
<tr>
<td>
<label id="lblDate">Date</label>
</td>
<td>
<input type="text" name="txtDate" id="tDate" style="width: 100px; height: 15px;" />
</td>

</tr>

</TABLE>

<div style="background-color: lightsteelblue; min-height: 125px; min-width: 50px; border-bottom: ActiveBorder; padding-right: 500px;">
<TABLE id="dataTable" border="3" style="padding-left: 49px; margin-left: 10px;">
<tr>
<td>
SELECT
</td>
<td>
REGION
</td>
<td>
QUANTITY
</td>
<td>
RATE
</td>
<td>
AMOUNT
</td>
<td>
TAX PERCENTAGE
</td>
<td>
TAX AMOUNT
</td>


</tr>
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> @Html.DropDownList("country", new SelectList(ViewBag.ListOfDisciplines, "Value", "Text", Model)) </TD>
<TD> <INPUT type="text" name="Quantity" id="Quantity"/> </TD>
<td>
<input type="text" name="Rate" id="Rate" />
</td>
<td>
<input type="text" name="Amount" id="Amount" style="width: 100px; color: green" readonly="true"/>
</td>
<td>
<input type="text" name="TaxPer" id="TaxPer" style="width: 100px; color: green" readonly="true"/>
</td>
<td>
<input type="text" name="TaxAmt" id="TaxAmt" style="width: 100px; color: green" readonly="true"/>
</td>
</TR>
</TABLE>
<input type="button" value="Add Row" onclick=" addRow('dataTable') " style="border-left-width: 1px; margin-left: 10px;"/>
<input type="button" value="Delete Row" onclick=" deleteRow('dataTable') " />
<br />
<div style="font: italic small-caps bold 20px georgia, garamond, serif;">
<table >
<tr>
<td style="margin-left: 1px; padding-left: 1px;">Grand_Total:</td>
<td><input type="text" readonly="true" name="grand_total" id="grand_total" style="width: 100px; color: green"/></td>
<td>All_Tax:</td><td> <input type="text" readonly="true" name="All_totalTax" id="All_totalTax" style="width: 100px; color: green" /></td>
<td>All_Total:</td><td> <input type="text" name="All_total" readonly="true" id="All_total" style="width: 100px; color: green" /></td>
</tr>
</table>
</div>
</div>
<div>
<input type="submit" id="btnSaveALL" value="Save Record" style="border-left-width: 1px; margin-left: 10px;"/>
</div>
}

我的 Ajax 函数是

<script language="javascript" type="text/javascript">
          $(document).ready(function () {
                    $(function () {
                        $("#tDate ").datepicker();
                    });

                    $("#btnSaveALL").click(function () {

                        $.ajax({
                            type: "POST",
                            url: "Sales/ShowTable",
                            success: function (response) {
                                alert('Document Saved.');
                            }
                        });
                    });
                });
    </script>

控制器动作方法是：

[HttpPost]
public ActionResult ShowTable()
{
    return View();
}

txtBuyerName, txtDate, grand_total, All_total,All_totalTax列都属于salesmain该类。

country, Quantity, Rate, Amount, TaxPer,TaxAmt列都属于salessubs该类

我想使用 jQuery json 将所有数据发布到控制器。那么jQuery ajax 函数和控制器方法代码应该是什么呢？

先感谢您...

4

1 回答 1

0

您可以首先编写一个视图模型来表示您要提交的数据（您可能需要根据您的具体要求调整各种属性的数据类型）：

public class SalesViewModel
{
    public string Country { get; set; }
    public int Quantity { get; set; }
    public decimal Rate { get; set; }
    public int Amount { get; set; }
    public decimal TaxPer { get; set; }
    public decimal TaxAmt { get; set; }
}

public class MyViewModel
{
    public string BuyerName { get; set; }
    public DateTime Date { get; set; }
    public decimal AllTotal { get; set; }
    public decimal AllTotalTax { get; set; }
    public SalesViewModel[] Sales { get; set; }
}

接着：

<script type="text/javascript">
    $(function () {
        $('#tDate').datepicker();

        $('form').submit(function () {
            var sales = [];
            $('#dataTable tr').each(function() {
                sales.push({
                    country: $('td select', this).val(),
                    quantity: $('td input[name="Quantity"]', this).val(),
                    rate: $('td input[name="Rate"]', this).val(),
                    amount: $('td input[name="Amount"]', this).val(),
                    taxPer: $('td input[name="TaxPer"]', this).val(),
                    taxAmt: $('td input[name="TaxAmt"]', this).val(),
                });
            });
            var model = { 
                buyerName: $('#BuyerName').val(),
                date: $('#tDate').val(),
                allTotal: $('#All_total').val(),
                allTotalTax: $('#All_totalTax').val(),
                sales: sales
            };
            $.ajax({
                url: this.action,
                type: this.method,
                contentType: 'application/json',
                data: model,
                success: function (response) {
                    alert('Document Saved.');
                }
            });

            return false;
        });
    });
</script>

现在您的控制器操作可以将视图模型作为参数：

[HttpPost]
public ActionResult ShowTable(MyViewModel model)
{
    ...
}

据说你的 HTML 很糟糕。您有重复的 ID，这是不允许的。此外，进一步的改进步骤是使用此视图模型作为视图模型，并使用强类型帮助器生成输入字段，Html.EditorFor而不是像您那样对它们进行硬编码。这将使您大大简化 AJAX 调用，因为您不再需要在输入字段的名称和视图模型的属性名称之间进行映射。默认模型绑定器将能够按照约定绑定它们：

<script type="text/javascript">
    $(function () {
        $('#tDate').datepicker();

        $('form').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (response) {
                    alert('Document Saved.');
                }
            });

            return false;
        });
    });
</script>
于 2013-04-19T10:29:38.340 回答