将 ScriptPath 添加到 <asp:scriptmanager 会刷新页面。如何阻止页面刷新？

Question

我在更新面板中使用下拉菜单，问题是，从下拉菜单中选择值时页面会刷新。最初更新面板工作正常，直到我将 ScripPath 添加到 asp:scriptmanager。

即使现在，如果我从 scriptmanager 中删除 ScriptPath，页面也不会刷新并且行为符合预期。

我添加 ScriptPath 的原因是，我想在每次下拉列表中更改值时执行 abc.js。正如预期的那样，abc.js 会针对我的下拉列表中的每个选定值执行，但我不希望刷新页面。

那么，如何在将脚本路径添加到 asp:scriptmanager 后停止页面刷新？

以下是我的 .aspx 源代码。

<asp:ScriptManager ScriptPath="abc.js"  runat="server"></asp:ScriptManager> 

 <asp:UpdatePanel ID="UP_Social_Ddl" runat="server">
                        <ContentTemplate>
                            <div class="styled-select">
                                <asp:Label runat="server" ID="Label2" Font-Size="Small" ToolTip="Social : 'ON' will post your activity on this page to your FaceBook Wall." Text="Social :" Style="vertical-align: top;" />
                                <asp:DropDownList ID="ddlSocialSwitch" runat="server" AutoPostBack="true" Style="vertical-align: top;" ToolTip="Social : ON will post your activity on this page to your FaceBook Wall." OnSelectedIndexChanged="ddlSocialSwitch_SelectedIndexChanged">
                                </asp:DropDownList>
                                &nbsp;<a valign="bottom" onclick="logout_fb" href="#" id="auth-logoutlink"><img valign="bottom" src="facebookLogOutButton.png"/></a>
                                <asp:Label ID="lbl" Visible="false" runat="server"></asp:Label>
                            </div>
                        </ContentTemplate>
                    </asp:UpdatePanel>

JS

//Get values from hidden field
var appid = document.getElementById("appid").value;
var message = document.getElementById("message").value;
var link = document.getElementById("link").value;
var name = document.getElementById("name").value;
var picture = document.getElementById("picture").value;
var description = document.getElementById("description").value;

var Authenticated = "";
// Load the SDK Asynchronously
(function (d) {
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
} (document));

//Init the SDK upon load
window.fbAsyncInit = function () {
    FB.init({
        appId: appid, // App ID
        channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML 
    });
    // listen for and handle auth.statusChange events
    FB.Event.subscribe('auth.statusChange', function (response) {
        if (response.authResponse) {
            // user has auth'd your app and is logged into Facebook
            var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
            FB.api('/me', function (me) {
                document.getElementById('auth-displayname').innerHTML = me.name;
                document.getElementById('profileImg').src = uid;
            })
            document.getElementById('auth-loggedout').style.display = 'none';
            document.getElementById('auth-loggedin').style.display = 'block';

            var e = document.getElementById("FB_ddlSocialSwitch");
            var Social_switch = e.options[e.selectedIndex].value;

            if (Social_switch == "on") {
                alert(Social_switch);
            } 

            //_______________________________________________Post to FB_______________________________________________________
            //    var opts = {
            //        message: 'A good reference for APIs',
            //        link: window.location.href,
            //        name: 'API Reference',
            //        picture: 'http://www.demo.lookmywebpage.com/publish-on-facebook-wall/Google-Twitter-Facebook.jpg',
            //        description: 'Demo Facebook Post'
            //    };
            //  
            //    FB.api('/me/feed', 'post', opts, function (response) {
            //        if (!response || response.error) {
            //            alert('Posting error occured');
            //        }
            //        else {
            //            alert('Success - Post ID: ' + response.id);
            //        }
            //    });
            //________________________________________________________________________________________________________________

        } else {
            // user has not auth'd your app, or is not logged into Facebook
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('auth-loggedin').style.display = 'none';
        }

    });
    $("#auth-logoutlink").click(function () {
        FB.logout(function () {
            window.location.reload();
        });
    });
} 

Answer 1

考虑不使用“ScriptPath”。改为在每个单独的 ScriptReference 上设置 Path 属性。

ScriptPath：已过时。获取或设置用于构建 ASP.NET Ajax 和自定义脚本文件路径的位置的根路径。

例如。

  <asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 runat="server">
             <Scripts>
                <asp:ScriptReference Path="~/abc.js" />
             </Scripts>
            </asp:ScriptManager>

Answer 2

你做的不对。 将您的 js 脚本静态保存在页面上。

<asp:ScriptManager ID="ScriptManager1" 
                                 EnablePartialRendering="True"
                                 runat="server">
  <Scripts>
   <asp:ScriptReference Path="~/abc.js" />
  </Scripts>
</asp:ScriptManager>

在 javascript 中监听 onChange 事件。
jQuery 让这一切变得简单：

$("#<%=ddlSocialSwitch.ClientID%>").change(function(e) {
      //handle the change
});

OnSelectedIndexChanged是服务端函数，执行js需要监听onchange事件。

Answer 3

您可以从下拉列表控件中删除 AutoPostback 属性。这将停止回发并只执行 javascript。不要忘记将 javascript 事件处理程序添加到下拉列表的 onchange 事件中。您可能可以删除更新面板，除非您需要它来执行部分页面回发，根据您的描述，这听起来不像您这样做。

最好的问候。