Set TextBox on ASP.Net GridView row selection using JavaScript from Code Behind

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Nov 13, 2022 10:00 PM
Forum: ASP.Net Web Forms
Answer: 1
Views: 1596
Sample Code: Download

I would like to get the voice of every name i click in the GridView using JavaScript.

How can i get this sorted out.

Imports System.Data

Partial Class sulaspeect
    Inherits System.Web.UI.Page

    Private Sub sulaspeect_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Dim dt As New DataTable()
            dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
            dt.Rows.Add(1, "John Hammond", "United States")
            dt.Rows.Add(2, "Mudassar Khan", "India")
            dt.Rows.Add(3, "Suzanne Mathews", "France")
            dt.Rows.Add(4, "Robert Schidner", "Russia")
            GridView1.DataSource = dt
            GridView1.DataBind()
        End If
    End Sub
End Class

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="sulaspeect.aspx.vb" Inherits="sulaspeect" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <input id="text">
        <button onclick="talk()">Talk It!</button>
        <button onclick="listen()">Voice</button>
        <select id="lang">
            <option value="en">English</option>
            <option value="fr">French</option>
            <br />
            <p id="status" style="color: red"></p>

            <script src="src/webspeech.js"></script>
            <script> var speaker, listener; window.onload = function () {
                    ws = webSpeechNoConflict(); try {
                        speaker = new ws.Speaker(); speaker.onEnd(function () {
                            console.log('just finished talking...');
                        });
                    } catch (ex) {
                        console.log(ex);
                        speaker = null;
                        document.getElementById("status").innerHTML = ex;
                    } try {
                        listener = new ws.Listener();
                    } catch (ex) {
                        console.log(ex);
                        listener = null;
                        document.getElementById("status").innerHTML = ex;
                    }
                }; function talk() {
                    if (speaker) {
                        speaker.speak(document.getElementById("lang").value, document.getElementById("text").value);
                    }
                }

                function listen() {
                    if (listener) {
                        listener.listen(document.getElementById("lang").value, function (text) {
                            document.getElementById("text").value = text;
                        });
                    }
                } </script>

            <script type="text/javascript"> 
                function ViewDetails(customerId, name, country) {
                    var message = "CustomerId: " + customerId; message += "\nName: " + name; message += "\nCountry: " + country;

                    function talk() {
                        if (speaker) {
                            speaker.speak(document.getElementById("lang").value, name);
                        }
                    }

                    function listen() {
                        if (listener) {
                            listener.listen(document.getElementById("lang").value, function (name) {
                                document.getElementById("text").value = name;
                            });
                        }
                    }
                    alert(message); return false;
                } </script>
        </select>
        <p>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="405px">
                <Columns>
                    <asp:BoundField DataField="id" HeaderText="Customerid" />
                    <asp:BoundField DataField="Name" HeaderText="Name" />
                    <asp:BoundField DataField="Country" HeaderText="Country" />

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:Button Text="View" runat="server" OnClientClick='<%# String.Format("return ViewDetails({0}, ""{1}"", ""{2}"");", Eval("Id"), Eval("Name"), Eval("Country")) %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </p>
    </form>
</body>
</html>

webspeech.js content

(function () {
    /**
     * a robotic speaker who speaks with given text and language
     */
    function RobotSpeaker()
    {
        try{
            this.u = new SpeechSynthesisUtterance();
        }
        catch(ex){
            throw "This browser does not have support for webspeech api";
        }
        this.u.rate = 1.0;
        var callBack = null;
 
        this.onEnd = function(cb) {
          callBack = cb;
        };
 
        this.setSpeed = function(playbackSpeed) {
            if (playbackSpeed < 0.1 || playbackSpeed > 10) {
                //invalid speed;
                return false;
            }
            this.u.rate = playbackSpeed;
            return true;
        };
 
        this.u.onend = function(event) {
            //callback to handler provided
            if (callBack && (typeof callBack === 'function')) {
                callBack();
            }
        };
        this.speak = function(lang, text){
            this.u.lang = lang;
            this.u.text = text;
            speechSynthesis.speak(this.u);
        };
    }
 
    /**
     * An audio listener which will listen and convert spoken sounds to text
     * @param callback function to call when a audio is listened and recognized
     * @constructor
     */
    function AudioListener(callback)
    {
        try{
            this.listener = new webkitSpeechRecognition();
        }
        catch(ex){
            throw "This browser does not have support for webspeech api";
        }
 
        if(platform.os.toString().indexOf("OS X") > -1) {
            //Seems like, on windows, continuous listening doesn't work/supported
            this.listener.continuous = true;
        }
        if(callback) {
            this.callBack = callback;
        }
        this.listener.lang = "en";
 
        //TODO work with less accurate results, which are returned very fast
        //this.listener.interimResults = true;
 
        var me = this;
 
        //-----Events---------
        this.listener.onresult = function(event) {
            if (event.results.length > 0) {
                var result = event.results[event.results.length-1];
                if(result.isFinal) {
                    me.callBack(result[0].transcript);
                }
            }
        };
        this.listener.onsoundstart = function(event) {
            //TODO
        };
        this.listener.onspeechstart = function(event) {
            //TODO
        };
        this.listener.onsoundend = function(event) {
            //TODO
        };
        //-----End Events---------
 
        this.isContinuous = function() {
            return this.listener.continuous;
        };
 
        /**
         * Start listening with given language(optional, defaults is english)
         * @param lang
         */
        this.listen = function(lang, callback) {
            if(lang) {
                this.listener.lang = lang;
            }
            if(callback) {
                this.callBack = callback;
            }
            this.listener.start();
        };
 
        /**
         * Stop listening
         * @param lang
         */
        this.stop = function() {
            this.listener.stop();
            console.log("audio listener stopped");
        };
    }
 
 
    var ws = {
        Speaker: RobotSpeaker,
        Listener: AudioListener,
        Languages: {
            ENGLISH: "en",
            FRENCH: "fr"
        }
    };
    if (!window.webspeech) {
        webspeech = ws;
    }
    webSpeechNoConflict = function() {
        return ws;
    };
})();

https://github.com/ranacseruet/webspeech

Download FREE API for Word, Excel and PDF in ASP.Net

PrinceG

0 3

Reply
ANSWER
User: PrinceG
Replied: on Nov 15, 2022 05:26 AM
Report

Hi makumbi,

Please refer below sample.

HTML

<asp:GridView ID="gvCustomer" runat="server" AutoGenerateColumns="False" Width="405px">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="CustomerId" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:HiddenField ID="hfId" runat="server" Value='<%# Eval("Id")%>' />
                <asp:HiddenField ID="hfName" runat="server" Value='<%# Eval("Name")%>' />
                <asp:HiddenField ID="hfCountry" runat="server" Value='<%# Eval("Country")%>' />
                <asp:Button Text="View" runat="server" OnClick="OnViewDetails" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<input id="text" runat="server" />
<button onclick="talk()">
    Talk It!</button>&nbsp;
<button onclick="listen()">
    Voice</button>&nbsp;
<select id="Language">
    <option value="en">English</option>
    <option value="fr">French</option>
</select>
<p id="status" style="color: red">
</p>
<script src="webspeech.js" type="text/javascript"></script>
<script type="text/javascript">
    var speaker, listener;
    window.onload = function () {
        ws = webSpeechNoConflict();
        try {
            speaker = new ws.Speaker();
            speaker.onEnd(function () {
                console.log('just finished talking...');
            });
        }
        catch (ex) {
            console.log(ex);
            speaker = null;
            document.getElementById("status").innerHTML = ex;
        }
        try {
            listener = new ws.Listener();
        }
        catch (ex) {
            console.log(ex);
            listener = null;
            document.getElementById("status").innerHTML = ex;
        }
    };
    function talk() {
        if (speaker) {
            speaker.speak(document.getElementById("Language").value, document.getElementById("text").value);
        }
    }

    function listen() {
        if (listener) {
            listener.listen(document.getElementById("Language").value, function (text) {
                document.getElementById("text").value = text;
            });
        }
    }
</script>

Namespace

using System.Data;

VB.Net

Imports System.Data

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] {
                                new DataColumn("Id"),
                                new DataColumn("Name"),
                                new DataColumn("Country")});
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        gvCustomer.DataSource = dt;
        gvCustomer.DataBind();
    }
}

protected void OnViewDetails(object sender, EventArgs e)
{
    GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
    string customerId = (row.FindControl("hfId") as HiddenField).Value;
    string name = (row.FindControl("hfName") as HiddenField).Value;
    string country = (row.FindControl("hfCountry") as HiddenField).Value;
    string message = "CustomerId: " + customerId; message += "\\nName: " + name; message += "\\nCountry: " + country;
    text.Value = name;
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn() {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        gvCustomer.DataSource = dt
        gvCustomer.DataBind()
    End If
End Sub

Protected Sub OnViewDetails(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast(TryCast(sender, Button).NamingContainer, GridViewRow)
    Dim customerId As String = TryCast(row.FindControl("hfId"), HiddenField).Value
    Dim name As String = TryCast(row.FindControl("hfName"), HiddenField).Value
    Dim country As String = TryCast(row.FindControl("hfCountry"), HiddenField).Value
    Dim message As String = "CustomerId: " & customerId
    message += "\nName: " & name
    message += "\nCountry: " & country
    text.Value = name
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Set TextBox on ASP.Net GridView row selection using JavaScript from Code Behind

Company

Explore

Follow us

Contact Us