none
Dificuldades com codigo que faz animaçao de numeros RRS feed

  • Pergunta

  • Caros,

    estou trabalhando com C#, em webpages asp.net e quero fazer o seguinte:

    ter um botao que ao clicar nele, este invoca um método que gera um nro aleatório, e este número eu quero passa-lo como parametro para um método javascript que vai ser responsável por fazer uma animaçao e apresentar este numero no ecra.

    o javascript ja está basicamente pronto, mas preciso adaptá-lo a minha necessidade, o que ainda não sei bem como chamara a funçao responsável atraves do codebehind c# e passar como referencia o numero sorteado. o exemplo do codigo javascript está neste link GenerateRandom

    basicamente esta é que é a minha ideia. alguem consegue me orientar?

    recapitulando: ter um botao -  ao fazer clique, chamar função que gera um nro aleatorio. pegar este nro e invocar o método javascript descrito no link assima, passando como referencia este mesmo nro.

    segunda-feira, 11 de novembro de 2013 13:34

Respostas

  • Código ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="Img.WebForms.WebForm6" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-2.0.3.intellisense.js"></script>
        <script src="Scripts/jquery-2.0.3.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <span id="foo" onclick="foo">000000</span>
                <br />
                <button id="go" type="button">Start</button>
            </div>
        </form>
        <script type="text/javascript">
            var variavel = 0;
            function getRandom() {
                $.ajax({
                    url: "WebForm6.aspx/RandoNumber",
                    type: "POST",               
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        variavel = data.d;
                        //alert(variavel);
                        slotmachine('foo');
                    }
                });                     
            }
            function slotmachine(id) {
                var thisid = '#' + id;
                var $obj = $(thisid);
                $obj.css('opacity', '.3');
                var original = $obj.text();
    
                var spin = function () {
                    return Math.floor(Math.random() * 10);
                };
    
                var spinning = setInterval(function () {
                    $obj.text(function () {
                        var result = '';
                        for (var i = 0; i < original.length; i++) {
                            result += spin().toString();
                        }
                        return result;
                    });
                }, 100);
    
                var done = setTimeout(function () {
                    clearInterval(spinning);
                    $obj.text(variavel).css('opacity', '1');
                }, 5000);
            }
            $('#go').click(function () {
                //slotmachine('foo');
                getRandom();
            });
        </script>
    </body>
    </html>

    Código Fonte da mesma Página:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Img.WebForms
    {
        public partial class WebForm6 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
    
                }
            }
    
            [WebMethod]
            public static int RandoNumber(){
                Random rand = new Random();            
                return rand.Next(100000, 999999);
            }
        }
    }

    Ou seja usando Jquery eu peço uma requisição a pagina e ele vai executar esse código RandoNumber e mandar o número para o JS da pagina e o outro processo continua gerando as informações...

    OBS: como dito pegue o Jquery e adicione na sua pagina igual no exemplo dessa aqui!

    segunda-feira, 11 de novembro de 2013 15:17

Todas as Respostas

  • Código ASPX:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm6.aspx.cs" Inherits="Img.WebForms.WebForm6" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-2.0.3.intellisense.js"></script>
        <script src="Scripts/jquery-2.0.3.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <span id="foo" onclick="foo">000000</span>
                <br />
                <button id="go" type="button">Start</button>
            </div>
        </form>
        <script type="text/javascript">
            var variavel = 0;
            function getRandom() {
                $.ajax({
                    url: "WebForm6.aspx/RandoNumber",
                    type: "POST",               
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        variavel = data.d;
                        //alert(variavel);
                        slotmachine('foo');
                    }
                });                     
            }
            function slotmachine(id) {
                var thisid = '#' + id;
                var $obj = $(thisid);
                $obj.css('opacity', '.3');
                var original = $obj.text();
    
                var spin = function () {
                    return Math.floor(Math.random() * 10);
                };
    
                var spinning = setInterval(function () {
                    $obj.text(function () {
                        var result = '';
                        for (var i = 0; i < original.length; i++) {
                            result += spin().toString();
                        }
                        return result;
                    });
                }, 100);
    
                var done = setTimeout(function () {
                    clearInterval(spinning);
                    $obj.text(variavel).css('opacity', '1');
                }, 5000);
            }
            $('#go').click(function () {
                //slotmachine('foo');
                getRandom();
            });
        </script>
    </body>
    </html>

    Código Fonte da mesma Página:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace Img.WebForms
    {
        public partial class WebForm6 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
    
                }
            }
    
            [WebMethod]
            public static int RandoNumber(){
                Random rand = new Random();            
                return rand.Next(100000, 999999);
            }
        }
    }

    Ou seja usando Jquery eu peço uma requisição a pagina e ele vai executar esse código RandoNumber e mandar o número para o JS da pagina e o outro processo continua gerando as informações...

    OBS: como dito pegue o Jquery e adicione na sua pagina igual no exemplo dessa aqui!

    segunda-feira, 11 de novembro de 2013 15:17
  • Obrigado Fúlvio,

    era exatamente dessa ajuda que tava precisando. agora irei adaptar o meu algoritmo de sorteio que tenho criado para a minha necessidade. testei e está funcionando como o pretendido. Agradeço imenso pela ajuda.

    terça-feira, 12 de novembro de 2013 12:27
  • Obrigado Fúlvio,

    era exatamente dessa ajuda que tava precisando. agora irei adaptar o meu algoritmo de sorteio que tenho criado para a minha necessidade. testei e está funcionando como o pretendido. Agradeço imenso pela ajuda.

    Por nada!!! vlw

    Fulvio Cezar Canducci Dias

    terça-feira, 12 de novembro de 2013 12:48
  • Caro Fulvio,

    eu sei que é inapropriado colocar outra dúvida após o fecho de uma postagem, mas é que este surgiu na sequencia dessa duvida anterior e eles estão fortemente ligados. O que pretendo é o seguinte:

    após o término do codigo javascrip acima, ou seja, após aqueles numeros pararem no ecrã, eu quero saber se tem como forçar um bind em um gridview sem ter que recorrer para clique do botão. tenho um grid, ligado a um datasource que mostra alguns dados relacionados com o numero que for sorteado na tela. 

    tem como atraves de algum funçao javascript fazer o bind do gridview, ou em ultimo caso, forçar um postback da página, para colocar todos os numeros a zero e mostrar o gridview com os resultados.

    Agradeço a ajuda

    quinta-feira, 14 de novembro de 2013 09:30
  • Tem como você mandar carregar novamente a página com js 

    window.location.reload();

    ou 

    dando um 

    __doPostBack('<%= GridView1.ClientID  %>', '');

    Mas vou deixa isso como lição para casa! e faça pesquisas para que você começa aprender a utilizar a ferramenta ao seu favor!

    OBS: por favor nova dúvida novo post! pode ter mais gente para te ajudar...

    Boa sorte!


    Fulvio Cezar Canducci Dias

    quinta-feira, 14 de novembro de 2013 11:32
  • Só para fechar este topico,

    consegui resolver este problema fazendo o refresh de um updatepanel no javascript. e dentro desde UpdPannel, tinha colocado o gridview que me apresentava os resultados finais.

    no codigo JS fiz: __doPostBack('<%=UpdatePanel1.ClientID %>', null);
    
    
    
    parte do UpdPanel:
    
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" OnLoad="UpdatePanel1_Load">
    
    
    
    no codebehind
    protected void UpdatePanel1_Load(object sender, EventArgs e)
            {
                GridView.DataBind();
                UpdatePanel1.Update();
            }

    somente isso consegui resolver o meu problema. Agradeço pela ajuda.

    sexta-feira, 22 de novembro de 2013 11:42