div與更新面板之間的轉換

以下是這種情況：我在aspx頁面上有多個div控件。我正在使用更新面板來避免頁面刷新。 div包含像按鈕，文本框控件：div與更新面板之間的轉換

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate>    
     <div id="divEnvironment" runat="server" visible="true"> 
      <asp:Button ID="btnCred" runat="server" OnClick="btnCred_Click" Text="Proceed" Width="100px" /> 
     </div> 
    </ContentTemplate> 
     <Triggers>   
      <asp:AsyncPostBackTrigger ControlID="btnCred" EventName="Click" />    
     </Triggers> 
</asp:UpdatePanel> 

<asp:UpdatePanel ID="UpdatePanel2" runat="server"> 
    <ContentTemplate>    
     <div id="divConfig" runat="server" visible="false"> 
      <asp:TextBox ID="txtDoamin" runat="server" Width="430px"></asp:TextBox> 
     </div> 
    </ContentTemplate> 
</asp:UpdatePanel>

在按一下按鈕，我必須提交數據（服務器回傳）以及切換div標籤的知名度，顯示下一格：

protected void btnCred_Click(object sender, EventArgs e) 
{  
    SubmitData(); 

    divEnvironment.Visible = false;    
    divConfig.Visible = true;   
}

其工作正常，但我試圖實現的是divs之間的轉換應該平穩（具有延遲的轉換效果）。我試過這個：

div { 
     transition: visible 2s; 
    }

但它沒有奏效。其實問題是更新面板。它工作沒有他們，但與更新面板，CSS效果似乎並沒有工作。請建議最好的方法來做到這一點。謝謝。

來源

2017-05-10 Megha S

怎麼樣能見度：可見; 不透明度：1; 過渡：不透明度2s線性; –

其實問題是更新面板。它工作沒有他們，但與更新面板，CSS效果似乎並沒有工作。 –

「可見」無法使用，你應該使用的可見性和透明度，使動畫

讓你的按鈕是HTML

後期使用方法提交

化妝的CSS是這樣的：

.active { 
    visibility: visible; 
    opacity:1; 
} 

#divEnvironment { 
    visibility: hidden; 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
} 

#divConfig { 
    visibility: hidden; 
    opacity:0; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
} 

and then if you add "active" class to each one with jquery you can see fade effect 
but if you want to use slide animations you can use for example : 
transform: translateY(-20%); 

add active class with jquery for example: 
$(btn).click(function(){ $("#divConfig").removeClass("active"); $("#divEnvironment").addClass("active") });

來源

2017-05-10 20:45:54 Houtan

非常感謝您的回答。 div轉換正在完美運行。但是我的POST方法無法調用代碼隱藏功能。 –

另外，我們如何在代碼隱藏的WebMethod中調用頁面的控件，如文本框，標籤等？ –

@Houtan - 這是我使用的POST方法：

function btnCred_Click() { 
    $.ajax({ 
     type: "POST", 
     url: "Transition.aspx/btnCred_Click", 
     data: "{}", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      alert(msg.d); 
     }, 
     error: function (msg) { 
      alert('Error'); 
     } 
    }); 
    return false; 
}

它返回錯誤。

來源

2017-05-11 14:41:22

你應該張貼這樣的：

var Result = 0; 
$.ajax(
{ url: "pathToPage/Transition.aspx/methodName", 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    type: "POST", 
    async: false, 
    data: "{'id':'" + $("#txtId").val() + "','name':'" + $("#txtName").val() + "'}", 
    success: function (data) { 
     Result = data.d; 
    }, 
    error: function() { Result = "error posting data to server"; } 
}); 
return Result;

來源

2017-05-11 22:35:27 Houtan

div與更新面板之間的轉換

回答

相關問題