1

変更を加えたので：asp.net mvcajaxactionlinkをjquery/ajaxステートメントとして書き直し ます。次のコードでは、これら3つのリンクのいずれかをクリックしたときにスムーズなフェードイン/フェードアウトアニメーションが提供されなくなりました。 

        function OnBeginStuff() {
            $("#StuffPanel").fadeTo("slow", 0.50);
        }
        function OnCompleteStuff() {
            $("#StuffPanel").fadeTo("slow", 1.00);
        }

        $(document).ready(function () {

            $('.mainLink', $('#NavigationPanel')).click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('href'),
                    beforeSend: OnBeginStuff,
                    complete: OnCompleteStuff,
                    success: function (html) {
                        $('#StuffPanel').html(html);
                    }
                });
            });
        });
    </script>    
</head>
<body>
    <div id="NavigationPanel">
        @Html.ActionLink("1", "Index", "One", null, new { @class = "mainLink" })
        @Html.ActionLink("2", "Index", "Two", null, new { @class = "mainLink"  })
        @Html.ActionLink("3", "Index", "Three", null, new { @class = "mainLink" })    
    </div>
    <div id="StuffPanel">
        @RenderBody()
    </div>
</body>
</html>
4

1 に答える 1

1

クリック機能をバインドするために#NavigationPanelとの両方を使用している理由はありますか。 これを試して.mainLink

$('.mainLink').click(function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr('href'),
                    beforeSend: OnBeginStuff,
                    complete: OnCompleteStuff,
                    success: function (html) {
                        $('#StuffPanel').html(html);
                    }
                });
            });

または、両方のセレクターを使用する必要がある場合は、この行をクリック イベント ハンドラーに追加します。 e.stopPropagation();これにより、イベントのバブリングが停止され、 andとe.preventDefault();への単一の呼び出しのみが送信されます。ajaxOnBeginStuffOnCompleteStuff

于 2012-05-01T09:56:59.233 に答える