Asp.net MultiView /使用 Javascript 或 jQuery 检查 ActiveViewIndex答案

【问题标题】：Asp.net MultiView /check ActiveViewIndex With Javascript Or jQueryAsp.net MultiView /使用 Javascript 或 jQuery 检查 ActiveViewIndex
【发布时间】：2011-03-19 01:20:11
【问题描述】：

为什么下面的提示总是显示为空？

<%@ 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>

解决空问题后，如何使用 JavaScript 或 jQuery 检查ActiveViewIndex？

好像

if(MultiView.ActiveViewIndex == 0)

不是真的！！

提前致谢。

【问题讨论】：

标签： javascript asp.net null multiview activeview

【解决方案1】：

在我们的页面完全加载到浏览器并查看源代码后，我们可以说不可能更改 (Not CHECK) 仅使用 javascrip 或jQuery。因为没有带有 MultiView1 id 的元素 -> 只有一个 div Existed。

我们只能检查 MultiView1 的 ActiveViewIndex，因为 Nathan 已通过以下代码回答：

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

请参阅以下链接以获取更多信息（最新帖子）：
MultiView Is A reach Element
因此下面的代码没有意义：

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

如果你想改变（不检查）客户端的 ActiveViewIndex 有一个技巧 -> 请看下面的代码：

<%@ 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>

这里是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>

【讨论】：

在给出这个问题的答案期间，有人因为之前的写作而投票给我/我正在编辑我的答案/请投票给我/这不公平......
@LostLord：不要担心被否决，重要的是你得到了答案。排除所有您不需要给出答案的部分肯定会使答案更具可读性。
亲爱的@NickLarsen：我删除了对我的回答的接受，直到我确定我们不能用 Only JavaScript 更改 ActiveViewIndex 并且没有服务器端代码对上层答案的任何帮助！我很怀疑，因为 Nathan cmets。我们需要更多人来解决这个问题。
@LostLord，我的 cmets 并不表示这可以在没有服务器端交互的情况下完成 - 事实上，它不能 - 您的问题是如何获取客户端上的活动视图（是可行的）-您没有声明您需要更改视图。有道理？因此，总而言之 - 如果您的问题是“我如何使用 javascript 更改活动视图？”，那么答案是“仅通过回调服务器”。
@Nathan 我再次检查了你的代码，我真的为我的坚持道歉 / document.getElementById("");返回 null & activeViewIndex = ;完美运行/我告诉你这段代码有错误，因为在 vs 2010 中它下面有一个小绿色标记/但是你的答案与我的 Q 有关，而我的答案是另一个问题

【解决方案2】：

改变

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

到

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

警报始终为 null 的原因是 client-side 上没有名为 MultiView1 的元素：这是控件的 server-side id。 p>

要获取客户端的活动视图索引，请使用：

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

【讨论】：

感谢您回答这个问题！稍等/我正在测试它
你错了兄弟 - 我在添加 ScriptManager 后这样测试你的代码 -> function pageLoad() { var MultiView = document.getElementById("");警报（多视图）； } 仍然返回 null...（我们使用 ClientID 因为主页面和内容页面 - 但这里渲染后没有 MultiView，只是一个 div）请给我们解释一下！！！
document.getElementById("");渲染为？
我列出的代码在正常情况下是正确的，听起来你的多视图/服务器端有问题。
你的多视图渲染了吗？请在浏览器中查看源代码并将其添加到问题中。