Question

我在updatepanel中使用了一个下拉列表，问题是，从我的下拉列表中选择值时，页面会刷新。最初更新面板工作正常，直到我将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上设置路径属性。

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事件处理程序添加到dropdownlist的onchange事件中。您可以删除更新面板，除非您需要它来执行部分页面回发，这从您的描述中听起来并不像您那样。

最诚挚的问候。

添加ScriptPath到

3 个答案: