asp.net - 使用ajax成功在表中添加新行

Question

我有这样的 jquery Ajax 函数：

    $("#Prices").dialog({
        autoOpen: false,
        autoResize: true, buttons: {
            "OK": function () {                     




            $.ajax({
            type: "POST",
            dataType: "json",
            url: "/Home/RecordingRates",
            data: {
                currencyID: $("#currencyId").val()                 
            },
            success: function (data) {
                if (data == "success") {                   
                  // poulate a table

                }
                else {
                    jQuery("#dialog-user-login").dialog('option', 'position', 'center');
                    jQuery("#dialog-user-login").dialog("open");
                }
               }
            }); 
           }
        }
        ,
        open: function () {
           $('.ui-dialog-buttonset').find('button:contains("OK")').focus();
            $('.ui-dialog-buttonset').find('button:contains("OK")').addClass('customokbutton');
        }
    });

我想从 RecordingRates 控制器操作返回的数据中填充一个表，如下所示：

   public JsonResult RecordingRates(int currencyId) {
            string result = "success";
            using (IDefaultRateChartManager defaultRateChartManager = new ManagerFactory().GetDefaultRateChartManager()) {
                List<DefaultRateChart> defaultRateCharts = defaultRateChartManager.GetAll().Where(rc => rc.Currency.Id == currencyId && (!rc.NumberPrefix.StartsWith("#") || rc.NumberPrefix.StartsWith("Default")) && rc.AccountCredit == "Credit").ToList();
                ViewBag.defaultRateCharts = defaultRateCharts;
            }
            return Json(result);
        }

和表是这样的：

 <table>
                                                <tr>
                                                    <td>
                                                        head 1
                                                    </td>
                                                    <td>
                                                        head 2
                                                    </td>
                                                </tr>
                                            </table>

我想针对 viewbag.defaultRateCharts 中的项目添加一个新行

请建议我如何更改 ajax 调用、控制器操作和 html。

Answer 1

如果我理解正确，您希望在 HTML 表格中显示您的数据。

我认为你应该看看一个 Jquery 模板库。

我个人使用handlebars-1.0.0.beta.6.js

数据绑定部分很简单，看起来像

success: function (data) {
                    var result = yourTemplate(data);
                    $("#yourHTMLTableContainer").appendTo(result);
                }

<script id="YourHandleBarTemplate" type="text/x-handlebars-template">
    {{#d}}
    <tr class="xxx" onclick="GetDetails('{{YourID}}')">
        <td>{{PropertyToDisplayInHead1}}</td>
        <td>{{PropertyToDisplayInHead2}}</td>
    </tr>
    {{/d}}
</script>

在我的 DOM Load 中，我编译了模板，看起来像这样

YourTemplate = null; 
$(document).ready(function () {
    YourTemplate = Handlebars.compile($("#YourHandleBarTemplate").html());
});

编辑：我意识到我使用了该库的测试版，我的项目大约有 1 年的历史，我没有对其进行返工，但我很确定模式与新版本或其他类似版本几乎相同模板库。