javascript - ajax 调用成功后更改 @Html.DisplayFor 项目

Question

所以标题几乎说明了我正在尝试做的事情，我很确定我的路径是正确的，或者至少我是这么认为的。但在我重新加载整个 View 之前，该值不会更新

html:

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.AktivBalance)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.BarBalance)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.HasAllInclusive)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            <span class="changeaktbalance">
                @Html.DisplayFor(modelItem => item.AktivBalance)
            </span>
            <br />
            <input style="width: 42%;" type="text" name="aktivAmount" class="viewedittext" />
            <br />
            <input type="button" value="Indsæt" class="vieweditaddaktiv" data-childid="@item.ChildId" />
            <input type="button" value="Fratræk" class="vieweditsubaktiv" data-childid="@item.ChildId" />
            <br />
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.BarBalance)   
            <br />         
            <input style="width: 42%;" type="text" name="aktivAmount" class="viewedittext" />
             <br />
             <input type="button" value="Indsæt" class="vieweditaddbar" data-childid="@item.ChildId" />
             <input type="button" value="Fratræk" class="vieweditsubbar" data-childid="@item.ChildId" />            
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.HasAllInclusive)
        </td>
        <td>
            @Html.ActionLink("Rediger", "Edit", new { id=item.ChildId }) |
            @Html.ActionLink("Detaljer", "Details", new { id=item.ChildId }) |
            @Html.ActionLink("Slet", "Delete", new { id=item.ChildId })
        </td>
    </tr>
}

</table>

脚本:

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    // document ready
    $(document).ready(function() {


        $(document.body).on("click", ".vieweditaddaktiv", function () {
            // test for at se om den får fat i de rigtige værdier, hvilket den gør.
            //alert("amount = " + $(this).parent().children(".viewedittext").val() + " id = " + $(this).data("childid") + ".");

            // værdierns sti bruges til at lave data variablen der skal videresendes. (ifølge vs bruger jeg nu de rette naming conventions i controlleren)
            var data = {
                Amount: $(this).parent().children(".viewedittext").val(),
                Id: $(this).data("childid")
            };

            // Jeg kan ikke sætte breakpoint og teste koden, der sker bare ingenting? Hvorfor virker intet herfra?
            $.ajax({
                type: 'POST',
                url: "@Url.Action("AddAktiv", "Default1")", // kalder på metoden der returnerer Json resultatet i controlleren.
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function(returnedData) {
                    //alert(returnedData);
                    $(this).parent().children(".changeaktbalance").html(returnedData);

                },
                error: function() {
                    alert("An unexpected error has occured.");
                }
            });



        }); // End of vieweditaddaktiv.



    }); // End of document ready function.


</script>

我只需要按钮的父目录中的特定 displayfor 来触发脚本，因此我需要更改 ajax 调用成功场景中的代码，但我不确定如何更改？

Answer 1

jquery.ajax 成功处理程序中的

this 指向当前请求的 ajax 设置对象。如果您想用它来引用其他任何内容 - 请使用 context 选项:

$.ajax({
    context: this,
    // rest of your code goes here

这样您在成功处理程序中使用的选择器应该可以工作