【ASP.NET コントロール】MultiViewコントロール （応用編）

ASP.NET

MultiViewコントロールあれこれ

ユーザ側からMultiViewを切り替えられるようにするには

【Point】
 * 『<div style="display: none">』で、Buttonをくくっている点（ButtonのVisible=Falseではダメ）
 * 代わりに、<input>タグで使う

サンプルコード

WebForm1.aspx (デザイン部)

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="VBTestSite.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ユーザ側からMultiViewを切り替えられるようにする</title>
    <script language="javascript" type="text/ecmascript">
        function OnClickFromClient(serverControlID, indexControlID, index) {
            var serverControlObject = document.getElementById(serverControlID);
            if (serverControlObject) {
                document.getElementById(indexControlID).value = index;
                serverControlObject.click();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
            <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                <asp:View ID="View1" runat="server">
                    <asp:Label ID="Label1" runat="server" Text="Label">マルチView1</asp:Label>
                    <div>
                    <input id="btnShow2" type="button" value="マルチView2へ"
                     onclick="OnClickFromClient('btnMultiViewSwitch', 'HiddenField1', '1')" />
                    </div>
                </asp:View>
                <asp:View ID="View2" runat="server">
                    <asp:Label ID="Label2" runat="server" Text="Label">マルチView2</asp:Label>
                    <div>
                    <input id="btnShow1" type="button" value="マルチView1へ"
                     onclick="OnClickFromClient('btnMultiViewSwitch', 'HiddenField1', '0')" />
                    </div>
                </asp:View>
            </asp:MultiView>
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <div style="display: none">
            <asp:Button ID="btnMultiViewSwitch" runat="server"
             OnClick="btnMultiViewSwitch_Click" Text="Submit" />
        </div>
    </form>
</body>
</html>

WebForm1.aspx.vb (コードビハインド部分)

Protected Sub btnMultiViewSwitch_Click(sender As Object, e As EventArgs) Handles btnMultiViewSwitch.Click
    ' MultiView1のIndexを切り替える
    MultiView1.ActiveViewIndex = Convert.ToInt32(HiddenField1.Value)
End Sub

参考文献

http://forums.asp.net/p/1162970/1927231.aspx