MultiView And JavaScript (or jquery) Working

SilverLight picture SilverLight · Jul 21, 2010 · Viewed 7.6k times · Source

how can i get multiview in javascript or jquery ?

below code always returns null : (Javascript)

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

and below code is not null but not work :(jquery)

var MultiView = $("*[id$='TextBox1']"); 

what is the going on about that?

can u give me plz a sample code for checking ActiveViewIndex With JavaScript or Jquery!

i added the below code because of comment :

<%@ 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 evt = evt || window.event;
                        //alert(evt.keyCode);
                        //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>

thanks in future advance

Answer

Ali Habibzadeh picture Ali Habibzadeh · Jul 21, 2010

Sorry for the delay but here is what you are looking for :

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            var activeViewIndex = $('.multiviewContainer').attr('activeKey');

            alert(activeViewIndex);

        });
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <asp:Panel runat="server" ID="multiviewContainer" CssClass="multiviewContainer">

        <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">

            <asp:View ID="View1" runat="server">
                   View 0
            </asp:View>

            <asp:View ID="View2" runat="server">
                   View 1
            </asp:View>

            <asp:View ID="View3" runat="server">
                   View 2
            </asp:View>

            <asp:View ID="View4" runat="server">
                   View 3
            </asp:View>

        </asp:MultiView>

    </asp:Panel>

</asp:Content>

and code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string activeView = MultiView1.ActiveViewIndex.ToString();
        multiviewContainer.Attributes.Add("activeKey", activeView);
    }
}