堆棧內存溢出
  簡體   English   中英

Bootstrap JavaScript打破了ASP.NET回發

[英]Bootstrap JavaScript breaks ASP.NET postback

 原文  2015-08-20 14:00:59  1   1    javascript/ c#/ asp.net/ twitter-bootstrap/ kentico

問題描述

好像將bootstrap.js注冊到我的頁面一樣，阻止了我所有的服務器控件（例如asp:LinkButtons和asp:Buttons ）觸發回發。

我的主頁上有以下C＃腳本。 如果用戶不在Kentico的“設計”模式下，它只會注冊jQuery 1.11.1和Bootstrap.js。 否則，它將僅加載jQuery 1.7.1。

如果我不包含bootstrap.js，我的asp:LinkButtons和asp:Buttons發將正常發生。 否則，根本不會發生任何動作。 有什么想法會發生什么嗎？

我沒有在瀏覽器中看到任何控制台錯誤，並且我絕對可以肯定的是，包括Bootstrap.js某種程度上是導致這種行為的原因，即使不是全部。 一切都可以找到是否未包含在內（當然，除了引導jQuery模塊之外）。 

<script runat="server">
  protected void Page_Load(object sender, EventArgs e)
  {
    // Check for null document
    if(CMSContext.CurrentDocument != null)
    {
      if(CMS.PortalEngine.PortalContext.ViewMode.ToString() == "Design")
      {
        CMS.GlobalHelper.ScriptHelper.RegisterJQuery(this.Page);
      }
      else
      {
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"jquery","<script src=\"//code.jquery.com/jquery-1.11.2.min.js\"><" + "/script>",false);
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"bootstrap","<script src=\"/getmedia/453e9ad5-e05c-4fb2-b134-4d9cbd00c917/bootstrap-min.aspx\"><" + "/script>",false);
      }
    }
  }
</script>

該bootstrap.min.js文件只是v3.3.2的默認bootstrap.min.js文件

前碼 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="IssuesSettings.ascx.cs" Inherits="CustomCode_Dashboard_Issues_Issues" %>
<div class="col-xs-12">
    <div class="gap"></div>
    <div class="btn-group" data-toggle="buttons">
        <asp:LinkButton runat="server" ID="ButtonCompletedProjects" CssClass="btn btn-default btn-xs" OnClick="ButtonCompletedProjectsClicked">Show Completed Projects</asp:LinkButton>
        <asp:LinkButton runat="server" ID="ButtonClosedIssues" CssClass="btn btn-default btn-xs" OnClick="ButtonClosedIssuesClicked">Show Closed Issues</asp:LinkButton>
    </div>
</div>

后面的代碼 

public partial class CustomCode_Dashboard_Issues_Issues : System.Web.UI.UserControl
{
    // cookie name constants
    private const string CookieClosedIssuesName = "Dashboard-Issues-ShowClosedIssues";
    private const string CookieCompletedProjectsName = "Dashboard-Issues-ShowCompletedProjects";

    // boolean switches

    private bool _showClosedIssues;
    private bool _showCompletedProjects;

    protected void Page_Load(object sender, EventArgs e)
    {
        SetShowClosedIssues();
        SetShowCompletedProjects();
        SetButtonStyles();
    }

    private void SetButtonStyles()
    {
        if (_showClosedIssues)
        {
            ButtonClosedIssues.CssClass += " active";
        }
        else
        {
            ButtonClosedIssues.CssClass += " inactive";
        }

        if (_showCompletedProjects)
        {
            ButtonCompletedProjects.CssClass += " active";
        }
        else
        {
            ButtonCompletedProjects.CssClass += " inactive";
        }
    }

    private void SetShowCompletedProjects()
    {
        if (Request.Cookies[CookieCompletedProjectsName] != null)
        {
            _showCompletedProjects = Convert.ToBoolean(Request.Cookies[CookieCompletedProjectsName].Value);
        }
        else
        {
            _showCompletedProjects = false;
        }
    }

    private void SetShowClosedIssues()
    {
        if (Request.Cookies[CookieClosedIssuesName] != null)
        {
            _showClosedIssues = Convert.ToBoolean(Request.Cookies[CookieClosedIssuesName].Value);
        }
        else
        {
            _showClosedIssues = false;
        }
    }

    protected void CLICKER(object sender, EventArgs e)
    {
        Response.Write("stuff");
    }

    protected void ButtonClosedIssuesClicked(Object sender, EventArgs e)
    {
        Response.Write("TEST");
        // if we're turning this off
        if (_showClosedIssues)
        {
            HttpCookie cookie = Request.Cookies[CookieClosedIssuesName];

            cookie.Name = CookieClosedIssuesName;
            cookie.Domain = ".domain.com";
            cookie.Value = "False";

            Response.Cookies.Set(cookie);
        }
        // if we're turning this on
        else
        {
            HttpCookie cookie;

            if (Request.Cookies[CookieClosedIssuesName] != null)
            {
                cookie = Request.Cookies[CookieClosedIssuesName];

                cookie.Name = CookieClosedIssuesName;
                cookie.Domain = ".domain.com";
                cookie.Expires = DateTime.MaxValue;
                cookie.Value = "True";

                Response.Cookies.Set(cookie);
            }
            else
            {
                cookie = new HttpCookie(CookieClosedIssuesName);

                cookie.Name = CookieClosedIssuesName;
                cookie.Domain = ".domain.com";
                cookie.Expires = DateTime.MaxValue;
                cookie.Value = "True";

                Response.Cookies.Set(cookie);
            }
        }

        Response.Redirect(CMSContext.CurrentDocument.AbsoluteURL);
    }

    protected void ButtonCompletedProjectsClicked(Object sender, EventArgs e)
    {
        // if we're turning this off
        if (_showCompletedProjects)
        {
            HttpCookie cookie = Request.Cookies[CookieCompletedProjectsName];

            cookie.Name = CookieCompletedProjectsName;
            cookie.Domain = ".domain.com";
            cookie.Value = "False";

            Response.Cookies.Set(cookie);

            // change style of button
            ButtonCompletedProjects.CssClass.Replace("active","inactive");
        }
        // if we're turning this on
        else
        {
            HttpCookie cookie;

            if (Request.Cookies[CookieCompletedProjectsName] != null)
            {
                cookie = Request.Cookies[CookieCompletedProjectsName];

                cookie.Name = CookieCompletedProjectsName;
                cookie.Domain = ".domain.com";
                cookie.Expires = DateTime.MaxValue;
                cookie.Value = "True";

                Response.Cookies.Set(cookie);

                ButtonCompletedProjects.CssClass.Replace("inactive", "active");
            }
            else
            {
                cookie = new HttpCookie(CookieCompletedProjectsName);

                cookie.Name = CookieCompletedProjectsName;
                cookie.Domain = ".domain.com";
                cookie.Expires = DateTime.MaxValue;
                cookie.Value = "True";

                Response.Cookies.Set(cookie);

            }
        }

        Response.Redirect(CMSContext.CurrentDocument.AbsoluteURL);
    }



}

1 個解決方案

解決方案1
 1 已采納  2015-09-03 16:22:52

問題是button.js插件在具有data-toggle="buttons"數據屬性的元素上調用preventDefault() ，而<asp:LinkButton>服務器控件將其'_doPostBack'函數調用置於href=""呈現的錨標記的屬性。 因此，button.js插件可防止發生回發。

我只是從引導文檔中復制/粘貼了標記，所以我碰巧在我的<div class="btn-group">具有該屬性： 

<div class="btn-group" data-toggle="buttons">
    <asp:LinkButton runat="server" ID="ButtonCompletedProjects" CssClass="btn btn-default btn-xs" OnClick="ButtonCompletedProjectsClicked">Show Completed Projects</asp:LinkButton>
    <asp:LinkButton runat="server" ID="ButtonClosedIssues" CssClass="btn btn-default btn-xs" OnClick="ButtonClosedIssuesClicked">Show Closed Issues</asp:LinkButton>
</div>

服務器控件呈現以下標記： 

<div class="btn-group" data-toggle="buttons">
    <a id="p_lt_ctl01_pageplaceholder_p_lt_ctl02_IssuesSettings_userControlElem_ButtonCompletedProjects" class="btn btn-default btn-xs" href="javascript:__doPostBack('p$lt$ctl01$pageplaceholder$p$lt$ctl02$IssuesSettings$userControlElem$ButtonCompletedProjects','')">Show Completed Projects</a>
    <a id="p_lt_ctl01_pageplaceholder_p_lt_ctl02_IssuesSettings_userControlElem_ButtonClosedIssues" class="btn btn-default btn-xs" href="javascript:__doPostBack('p$lt$ctl01$pageplaceholder$p$lt$ctl02$IssuesSettings$userControlElem$ButtonClosedIssues','')">Show Closed Issues</a>
</div>

注意_doPostBack在兩個錨元素的href屬性中的方式。 現在，檢查一下button.js插件，您將看到以下幾行： 

// BUTTON DATA-API
// ===============

$(document)
  .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() // here's the issue
  })
  .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
  })

在第9行（從// BUTTON DATA-API開始），您將看到在if語句的末尾調用e.preventDefault() 。 這將防止錨標記執行其默認行為，即調用_doPostBack函數。

如果遇到此問題並且不需要按鈕插件，只需從腳本中刪除該插件即可。 如果確實需要按鈕插件並且遇到此問題，則需要編寫一些邏輯來處理此問題。 我修改了第9行的if語句，以首先檢查'.​​btn-asp'類，如果是這種情況，則繼續默認行為，否則將繼續執行按鈕插件的邏輯： 

if(!($e.target).hasClass(".btn-asp")){
    if (!($(e.target).is('input[type="radio"]') || $(e.target).is('input[type="checkbox"]'))) e.preventDefault() // here's the issue
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 ASP.net Javascript Postback 使用 JavaScript 的 ASP.NET 回發 ASP.NET Javascript和回發 asp.net回傳和javascript / jquery CSS中的JavaScript在回發時丟失（ASP.NET） ASP.NET CheckBox使用JavaScript禁用回發 JavaScript（asp.net）的神秘回發問題 asp.net和javascript中的回發和驗證 在 javascript 中允許和防止回發在 asp.net 回發前的ASP.NET TreeView javascript
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM