两个类似的UpdatePanels,但只有一个工作

时间:2018-08-09 10:57:17

标签: javascript c# asp.net

我在页面上有两个UpdatePanel,它们通过JavaScript虚假点击得到更新。

UpdatePanels:

<div style="width: 100%; background-color: darkcyan; overflow: hidden;">
        <button id="langButton" class="langButtons" type="button" style="float: right" onclick="changeLang(event)">English</button>
        <img id="logoimg" alt="logo" src="assets/logo.png" height="75" style="float: left" />
    </div>
<div id="mainDirDis" style="overflow: hidden;">
        <asp:ScriptManager EnablePageMethods="true" ID="MainSM" runat="server" ScriptMode="Release" LoadScriptsBeforeUI="true">
        </asp:ScriptManager>
        <div id="tabsCon" style="overflow: hidden; overflow-x: scroll;">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                <ContentTemplate>
                    <asp:Button runat="server" ID="ChangeLangButtonTrigger" Text="" Style="display: none;" OnClick="ChangeLangButtonTrigger_Click" />
                    <div id="tabsDiv">
                        <asp:Repeater ID="tabsRepeater" runat="server" ItemType="System.string">
                            <ItemTemplate>
                                <div class="tab">
                                    <button class="tablinks" onclick="openCity(event, '<%#Item%>')"><%#Item%></button>
                                </div>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>

            <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                <ContentTemplate>
                    <asp:Button runat="server" ID="ChangeItemsButton" Text="" Style="display: none;" OnClick="ChangeItemsButton_Click" />
                    <div id="theTabcontent" class="tabcontent">
                        <asp:Repeater ID="tabContentRepeater" runat="server" ItemType="GISServiceReference.LandMarkClass">
                            <ItemTemplate>
                                <h3><%#Item.Id%></h3>
                                <p><%#Item.LandmarkText%></p>
                            </ItemTemplate>
                        </asp:Repeater>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>

        <div id="map" class="map"></div>
    </div>

JavaScript:

function openCity(evt, placeName) {
        var i, tablinks;
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        evt.currentTarget.className += " active";
        SetCatName(placeName);
        document.getElementById("ChangeItemsButton").click();
    }

    function SetCatName(catName) {
        PageMethods.SetCat(catName);
    }

    function changeLang(evt) {
        if (document.getElementById("langButton").innerText.startsWith("English")) {
            document.getElementById("langButton").innerText = "عربي";
            document.getElementById("langButton").style = "float:left";
            document.getElementById("logoimg").style = "float:right";
            document.dir = "ltr";
            document.lang = "en";
        }
        else {
            document.getElementById("langButton").innerText = "English";
            document.getElementById("langButton").style = "float:right";
            document.getElementById("logoimg").style = "float:left";
            document.dir = "rtl";
            document.lang = "ar";
        }

        document.getElementById("ChangeLangButtonTrigger").click();
    }

点击事件会触发事件背后的代码

protected void ChangeLangButtonTrigger_Click(object sender, EventArgs e)
{
    string theNewLang = "";
    if (Session["currentLang"].ToString().Equals("ar"))
    {
        Session["currentLang"] = "en";
        theNewLang = "en";
    }
    else
    {
        Session["currentLang"] = "ar";
        theNewLang = "ar";
    }
    ChangeLang(theNewLang);
}

private void ChangeLang(string lang)
{
    GISServiceReference.GISServiceClient gisservice = new GISServiceReference.GISServiceClient();
    List<string> result = gisservice.GetCatsData(lang).ToList<string>();
    tabsRepeater.DataSource = result;
    tabsRepeater.DataBind();
    UpdatePanel1.Update();
    ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "checkDir", "checkDir();", true);
}

protected void ChangeItemsButton_Click(object sender, EventArgs e)
{
    GISServiceReference.GISServiceClient gisservice = new GISServiceReference.GISServiceClient();
    List<GISServiceReference.LandMarkClass> result = gisservice.GetConsData(Session["currentLang"].ToString(), Session["catName"].ToString()).ToList();
    tabContentRepeater.DataSource = result;
    tabContentRepeater.DataBind();
    UpdatePanel2.Update();
    ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "checkDir", "checkDir();", true);
}

[System.Web.Services.WebMethod]
public static string SetCat(string catName)
{
    Page objp = new Page();
    objp.Session["catName"] = catName;
    return catName;
}

第一个更新面板由langButton触发并调用changeLang函数 第二个更新面板由tabsRepeater创建的按钮触发,并调用openCity函数

在两种情况下,数据都是从Web服务返回的。 如果我回写了整页的帖子,但是如果我使用当前代码“ UpdatePanel2.Update();”,则数据将显示在第二个更新面板中。不会导致UpdatePanel2更新。

只有第一个UpdatePanel可以工作并更新其内容,而第二个则不能。两者以相同的方式编码,并且几乎具有相同的编码。那么,为什么只有第一个作品有效,所以我错过了什么。

我已经尝试了所有我能想到的,但是没有用,Web编程不是我的强项。请告诉我该怎么办。

1 个答案:

答案 0 :(得分:0)

我已将第二个按钮代码移至Page_Load事件

if (!Page.IsPostBack)
    {
        Session["currentLang"] = "ar";
        ChangeLang("ar");
    }
    else
    {
        GISServiceReference.GISServiceClient gisservice = new GISServiceReference.GISServiceClient();
        List<GISServiceReference.LandMarkClass> result = gisservice.GetConsData(Session["currentLang"].ToString(), Session["catName"].ToString()).ToList();
        tabContentRepeater.DataSource = result;
        tabContentRepeater.DataBind();
        ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "checkDir", "checkDir();", true);
        UpdatePanel2.Update();
    }

这确实解决了问题,但是并没有解释为什么第一个updatepanel不需要这个。