jQuery的阿贾克斯后偏后视图刷新 [英] Partial View Refreshes after Jquery Ajax Post

问题描述

在我的C＃应用​​程序MVC4我有两个部分美景工作。局部视图1位于与ID Partial_Analysis一个div，局部视图2是与ID Display_Average一个div。每个视图包含一个数据表datatables.net。当行被局部视图中的一个表中选择一个jquery ajax的柱子是导致局部视图2基于该行选择了在局部视图1中所做的更新数据表中显示结果刷新。

 ＆LT;脚本类型=文/ JavaScript的字符集=utf-8＆GT;
    $（文件）。就绪（函数（）{
        $（'。rowselection'）。点击（函数（五）{
            VAR TDATA = $（'＃Form1中'）序列化（）。
            $阿贾克斯（{
                键入：POST，
                数据：TDATA，
                网址：首页/ PartialAverage
                成功：函数（结果）{成功（结果）; }
            }）;
        }）;        函数成功（结果）{
            $（＃Display_Average）HTML（结果）;
        }
    }）;
＆LT; / SCRIPT＆GT;
 

当点击一个特定的按钮，局部视图1被刷新。

 ＆LT;脚本类型=文/ JavaScript的字符集=utf-8＆GT;
    $（文件）。就绪（函数（）{
        $（'＃ChangeName'）。点击（函数（五）{
            VAR TDATA = $（'＃Form1中'）序列化（）。
            。VAR origname = $（'＃NameDiv'）找到（'输入[名称=名称]'）第（）VAL（）。
            。VAR NEWNAME = $（'＃NameDiv'）找到（'输入[名称=updatedName]'）第（）VAL（）。
            $阿贾克斯（{
                键入：POST，
                数据：{
                    mCollection：TDATA，
                    名称：origname，
                    updatedName：NEWNAME
                }，                网址：首页/ ChangeName
                成功：函数（结果）{成功（结果）; }
            }）;
        }）;
        函数成功（结果）{
            $（＃Partial_Analysis）HTML（结果）。
        }
    }）;
＆LT; / SCRIPT＆GT;
 

一旦此刷新局部视图1，我希望第二个局部视图也刷新。我已经试过这导致一个无限循环。

 ＆LT;脚本类型=文/ JavaScript的字符集=utf-8＆GT;
    $（文件）。就绪（函数（）{
        $（'＃Partial_Analysis'）。的ajaxSuccess（函数（五）{
            VAR TDATA = $（'＃Form1中'）序列化（）。
            $阿贾克斯（{
                键入：POST，
                数据：{
                    mCollection：TDATA，
                }，                网址：首页/ PartialAverage
                成功：函数（结果）{成功（结果）; }
            }）;
        }）;
        函数成功（结果）{
            $（＃Display_Average）HTML（结果）;
        }
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

的ajaxSuccess 是一个全球性的处理每当收到一个AJAX调用的响应时调用。表演在它的另一个ajax调用肯定会导致无限循环。

在这里也许最好的选择是在成功更新第二个表第一局部视图的处理程序：

 函数成功（结果）{
    $（＃Partial_Analysis）HTML（结果）。    reloadDisplayAverage（）;
}功能reloadDisplayAverage（）{
    VAR TDATA = $（'＃Form1中'）序列化（）。
    $阿贾克斯（{
        键入：POST，
        数据：{
            mCollection：TDATA，
        }，
        网址：首页/ PartialAverage
        成功：函数（结果）{成功（结果）; }
    }）;    函数成功（结果）{
        $（＃Display_Average）HTML（结果）;
    }
}
 

In my c# MVC4 application I am working with two partial views. Partial View 1 is located in a div with the id Partial_Analysis, Partial View 2 is in a div with the id Display_Average. Each view contains a datatables.net datatable. When a row is selected within the table in partial view one, a jquery ajax post is made that causes partial view 2 to refresh with an updated datatable showing results based off of the row selection that was made in partial view 1.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('.rowselection').click(function (e) {
            var tdata = $('#form1').serialize();
            $.ajax({
                type: "POST",
                data: tdata,
                url: "Home/PartialAverage",
                success: function (result) { success(result); }
            });
        });

        function success(result) {
            $("#Display_Average").html(result);
        }
    });
</script>

When a specific button is clicked, partial view 1 is refreshed.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#ChangeName').click(function (e) {
            var tdata = $('#form1').serialize();
            var origname = $('#NameDiv').find('input[name="Name"]').first().val();
            var newname = $('#NameDiv').find('input[name="updatedName"]').first().val();
            $.ajax({
                type: "POST",
                data: {
                    mCollection: tdata,
                    Name: origname,
                    updatedName: newname
                },

                url: "Home/ChangeName",
                success: function (result) { success(result); }
            });
        });


        function success(result) {
            $("#Partial_Analysis").html(result);
        }
    });
</script>

Upon this refresh of partial view 1, I want the second partial view to refresh also. I have tried this which causes an infinite loop.

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#Partial_Analysis').ajaxSuccess(function (e) {
            var tdata = $('#form1').serialize();
            $.ajax({
                type: "POST",
                data: {
                    mCollection: tdata,
                },

                url: "Home/PartialAverage",
                success: function (result) { success(result); }
            });
        });


        function success(result) {
            $("#Display_Average").html(result);
        }
    });
</script>

解决方案

ajaxSuccess is a global handler which is called whenever a response for an ajax call is received. Performing another ajax call in it will definitely cause an infinite loop.

Probably the best option here is to update second table in the success handler of the first partial view:

function success(result) {
    $("#Partial_Analysis").html(result);

    reloadDisplayAverage();
}

function reloadDisplayAverage() {   
    var tdata = $('#form1').serialize();
    $.ajax({
        type: "POST",
        data: {
            mCollection: tdata,
        },
        url: "Home/PartialAverage",
        success: function (result) { success(result); }
    });

    function success(result) {
        $("#Display_Average").html(result);
    }
}

这篇关于jQuery的阿贾克斯后偏后视图刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！