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

Question

我在updatepanel内部使用下拉菜单，问题在于页面刷新时从我的下拉列表中选择值。最初更新面板工作正常，直到我添加到asp：scriptmanager的ScripPath。

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

我添加ScriptPath的原因是，我希望每次在下拉列表中更改值时执行abc.js。正如所料，abc.js是为我的下拉列表中的每个选定值执行的，但我不希望页面被刷新。

那么，即使添加scriptpath到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事件中。您可能会删除更新面板，除非您需要它执行部分页面回发，从您的描述中，这听起来不像您。

最好的问候。