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

和表格是这样的：

我想针对viewbag.defaultRateCharts

中的项目添加新行

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

Answer 1

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

我认为你应该看一下Jquery Templating库。

我个人使用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岁，我没有修改它，但我很确定该模式与新版本大致相同或其他类似的模板库。

使用ajax success在表中添加新行

1 个答案: