Asp net mvc 和 javascript 响应答案

【问题标题】：Asp net mvc and javascript responseAsp net mvc 和 javascript 响应
【发布时间】：2011-11-17 02:20:17
【问题描述】：

我有一个 javascript 需要做两件事： 1.发送数据库中要更新的数据 2. 在显示模式下更新我的 html 表单位置。 3. 更新我的表格行以反映更新后的数据。

我的 javascript 只做 1 和 2：

$(".form-commands .save").live("click", function () {
    var f = $(".form-edit");
    var sf = f.serialize();
    $.post(this.href,
        sf,
        function (response) {
            f.html(response);
        });
    // I need to do something here to update the html table row...
    return false;
});

我认为一个解决方案是调用另一个仅呈现表格行元素的操作。我该怎么做？

表格行是这样创建的：

<tr id="h62">
  <td>Ford</td>
  <td>Focus</td>
</tr>

其中 62 是该记录的“id”。

工作代码，但丑陋：

$(".form-commands .save").live("click", function () {
    var f = $(".form-edit");
    var sf = f.serialize();
    var handle = $(".form-edit #Handle")[0].value;
    var itemLink = this.attributes["edititem"].value;
    var row = $("#grid #h" + handle);

    $.post(this.href,
        sf,
        function (response) {
            $("#form-edit").html(response);
            $.get(itemLink,
                sf,
                function (response) {
                    row.replaceWith(response);
                });
        });

    return false;
});

【问题讨论】：

3. Update the row of my table to reflect updated data. 您指的是 HTML 表格？如果是这样，您能否显示 HTML 标记以及您想添加到表格中的内容。
是的，这是一个 html 表格。请看我上面的例子。

标签： javascript asp.net-mvc

【解决方案1】：

你需要做这样的事情：

$(".form-commands .save").live("click", function (evt) {
    //Capture the jQuery event object and call preventDefault() to stop the default click action
    evt.preventDefault();
    var f = $(".form-edit");
    var sf = f.serialize();
    $.post(this.href,
        sf,
        function (response) {
            f.html(response);
        });
    //UPDATE THE ROWS
    $('#h62 td:eq(0)').text(newVehicleMakeName);
    $('#h62 td:eq(1)').text(newVehicleModelName);
});

我不确定车辆数据来自您的代码。如果您从控制器传回它，那么您需要将此行移到您的成功回调中。

此外，您通常不应该返回 false，您应该将 jQuery 事件作为参数捕获并调用 preventDefault()。如果您的单击处理程序使用 return false 来阻止浏览器导航，则可能会导致解释器无法到达 return 语句，并且浏览器将继续执行锚标记的默认行为。这就是导致您的问题的原因，而不是因为您使用的是点击与提交。使用 event.preventDefault() 的好处是您可以将其添加为处理程序的第一行，从而保证锚点的默认行为不会触发。

【讨论】：

感谢您的提示。也许，我需要用新数据更新现有行，而不是创建新行。 Id 和其他字段在 f 变量（表单）中。
对不起，我不明白这是更新，我以为是添加。所以你想更新表格行中的现有数据？
我已经更新了我的答案，所以您现在可以更新现有的数据行

【解决方案2】：

好吧，我只是重新加载页面或调用 ajax 例程（以适用者为准）来重新加载数据，没有直接的方法可以做到这一点。实际上我不知道您使用的方法（f.html（response）），我仍然对该解决方案持怀疑态度:)

好吧，如果你真的只想更新那一行：

1) 您需要知道在您的 javascript 代码中更新行的 id。在本例中，此值为“h62”（不带引号）。

2) 为您的 TD 提供类名称，例如

<tr id="h62">
    <td class="brand">Ford</td>
    <td class="model">Focus</td>
</tr>

3) 使用 jquery 更新。假设您将行的 id 保存在名为“rowId”的变量中：

$('#'+rowId).find('.brand').html(response.brand);
$('#'+rowId).find('.model').html(response.model);

这将结束该过程。

【讨论】：