Asp.net MultiView /check ActiveViewIndex With Javascript Or jQuery

问题

Why does the below alert always show me null?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Keyup._Default" %>

<!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></title>

<%--    <script src="JQuery/jquery-1.4.1.js" type="text/javascript"></script>--%>
            <script type="text/javascript">

                document.onkeyup = onkeyupOfDocument;

                function onkeyupOfDocument(evt) {
                    //var MultiView = $("*[id$='TextBox1']"); 
                    var MultiView = document.getElementById("MultiView1");
                    alert(MultiView);
                }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
            <asp:View ID="View1" runat="server">
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </asp:View>
            <asp:View ID="View2" runat="server">
            </asp:View>
        </asp:MultiView>
    </div>
    </form>
</body>
</html>

After solving null problem how can I check ActiveViewIndex with JavaScript or jQuery?

It seems

if(MultiView.ActiveViewIndex == 0)

is not true!!

Thanks in advance.

回答1:

after our page is completely loaded into the browser & viewing the source code , we can say it's not possible to CHANGE (Not CHECK) the ActiveViewIndex of Regular MultiView In asp.net with only javascrip or jquery. because there is no element out there with MultiView1 id -> just a div Existed.

we only can check the ActiveViewIndex of MultiView1 as Nathan has answered by below code :

var activeViewIndex = <%=MultiView1.ActiveViewIndex %>;

plz see the below link for more information (latest post):
MultiView Is A reach Element
therefore the below code has no meaning :

var MultiView = document.getElementById("<%=MultiView1.ClientID %>");

if you want to CHANGE (Not Check) the ActiveViewIndex in client side there is a trick -> plz look at the below codes :

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void butSubmit_Click(object sender, EventArgs e)
    {
        MultiView1.ActiveViewIndex = int.Parse(HiddenField1.Value);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Demo</title>

    <script language="javascript" type="text/ecmascript">
    function OnClientClick( ServerControID,IndexControlID, Index){
        var objDemo = document.getElementById(ServerControID);
        if(objDemo){
            document.getElementById(IndexControlID).value = Index;
            objDemo.click();                        
        }        
    }
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
                <asp:View ID="View1" runat="server">
                    <span style="color: #ff0000; background-color: #33ccff"><strong>Hi, I am View 1</strong></span></asp:View>
                <asp:View ID="View2" runat="server">
                    <strong><span style="color: background; background-color: #99ff00">Hi, I am View 2</span></strong></asp:View>
            </asp:MultiView></div>
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <input id="btnShow1" type="button" value="Show View 1" onclick="OnClientClick('butSubmit','HiddenField1','0')" />
        <input id="btnShow2" type="button" value="Show View 2" onclick="OnClientClick('butSubmit','HiddenField1','1')" />
        <div style="display: none">
            <asp:Button ID="butSubmit" runat="server" OnClick="butSubmit_Click" Text="Submit" /></div>
    </form>
</body>
</html>

and here is the source code of the upper codes after the page is loaded in ie 9 :

<!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 id="Head1"><title>
    Demo
</title>

    <script language="javascript" type="text/ecmascript">

        function OnClientClick(ServerControID, IndexControlID, Index) {
            var objDemo = document.getElementById(ServerControID);
            if (objDemo) {
                document.getElementById(IndexControlID).value = Index;
                objDemo.click();
            }
        }
    </script>

</head>
<body>
    <form method="post" action="WebForm3.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIODMxNDI3MTNkGAEFCk11bHRpVmlldzEPD2RmZJjYXp6H2AsOwVGwRlIRlk0x9agdyp/Kg++cmPNXKpTg" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKrwZG1BAKQo8KrDX7rF3izcHDs+E9bwpx3GnVGoIZVi2Gpv0IOOu9xXNMo" />
</div>
        <div>

                    <span style="color: #ff0000; background-color: #33ccff"><strong>Hi, I am View 1</strong></span></div>
        <input type="hidden" name="HiddenField1" id="HiddenField1" value="1" />
        <input id="btnShow1" type="button" value="Show View 1" onclick="OnClientClick('butSubmit','HiddenField1','0')" />
        <input id="btnShow2" type="button" value="Show View 2" onclick="OnClientClick('butSubmit','HiddenField1','1')" />
    </form>
</body>
</html>

回答2:

change

var MultiView = document.getElementById("MultiView1");

var MultiView = document.getElementById("<%=MultiView1.ClientID %>");

the reason the alert is always null is that there is no element on the client-side called MultiView1: that's the server-side id of the control.

to get the active view index to the client-side, use this:

var activeViewIndex = <%=MultiView1.ActiveViewIndex %>;

来源：https://stackoverflow.com/questions/3300628/asp-net-multiview-check-activeviewindex-with-javascript-or-jquery

标签

javascript

ASP.NET

null

multiview

activeview