How Do I Pass The Value Obtained In The Script (Value In Dvdistance) To Code Begind

Question

0.00/5 (No votes)

See more:

aspx code

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript" >

        var source, destination;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        google.maps.event.addDomListener(window, 'load', function () {
            new google.maps.places.SearchBox(document.getElementById('txtSource'));
            new google.maps.places.SearchBox(document.getElementById('txtDestination'));
            directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
        });


        function abc() {


            //*********DIRECTIONS AND ROUTE**********************//
            source = document.getElementById("txtSource").value;
            destination = document.getElementById("txtDestination").value;

            var request = {
                origin: source,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            };


            //*********DISTANCE AND DURATION**********************//
            var service = new google.maps.DistanceMatrixService();
            var dvDistance = document.getElementById("dvDistance");
            service.getDistanceMatrix({
                origins: [source],
                destinations: [destination],
                travelMode: google.maps.TravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: false,
                avoidTolls: false
            }, function (response, status) {
                if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
                    var distance = response.rows[0].elements[0].distance.text;
                    var duration = response.rows[0].elements[0].duration.text;

                    dvDistance.innerHTML = "";
                    dvDistance.innerHTML += "" + distance + "";
                    dis= dis.innerHTML += "" + distance + "";
                } else {
                    alert("Unable to find the distance via road.");
                }
            });

         var dis = document.getElementById("dvDistance");
            document.getElementById('<%= HiddenField1.ClientID%>').value = dis;

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:button id="Button1" runat="server" onclientclick = "abc();" text="Button"
            onclick="Button1_Click" />
        <br />
        <asp:textbox id="TextBox1" runat="server"></asp:textbox>
&nbsp;
        <asp:hiddenfield id="HiddenField1" runat="server"/>
    </div>
        <div><table>
        <tr>
            <td> Source : <input type="text" id="txtSource" style="width:200px"  />  </td>
            <td> Destination : <input type="text" id="txtDestination" style="width:200px"  /> </td>
        </tr>
        <tr><td><div id="dvDistance"></div></td>
        </tr>
        <tr>
            <td><asp:hiddenfield id="HiddenField2" runat="server"/></td>
             </tr>
    </table></div>
    </form>
</body>
</html>

code behind

C#

protected void Button1_Click(object sender, EventArgs e)
        {
            TextBox1.Text = HiddenField1.Value;
        }

Posted 8-Jul-15 21:54pm

Dhilu Das

Add a Solution

Comments

Dhilu Das 9-Jul-15 3:56am

I am obtaining the distance from the map in dvDistanc and i want to pass that value to the code behind. I am new to this. So please help me. ThankYou in advance

Sreekanth Mothukuru 9-Jul-15 4:16am

Either decorate the div runat="server" with an "ID" to access it server side. Or assign its value to a hidden field whose value can be accessed server side.

Andy Lanng 9-Jul-15 4:21am

Did you read the code? He has a hidden field

Sreekanth Mothukuru 9-Jul-15 4:35am

Yes. I see the problem now :)

Thanks

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Andy Lanng · Answer 1 · 2015-07-08T22:20:00

I may be interpreting this wrong but you can do this:

JavaScript

var dis = document.getElementById("dvDistance").innerText;
document.getElementById('<%= TextBox1.ClientID%>').value = dis;

You don't even need a postback for this. Remove the button OnClick and add AutoPostback="false"

But to answer your specific question:

The Click event happens after the control has been loaded so the change will not be included in the render. If you click the button again, does the value change? This is because it remembers the last time you set the value before it loads the control.

There are ways to get the details of the event before the controls are loaded, but if the javascript above works there there is no need.

Let me know ^_^
Andy

Sreekanth Mothukuru · Answer 2 · 2015-07-08T22:47:00

You need to assign the distance value to hidden field in the response/callback method

Quote:
function (response, status) {

of Google Maps service "google.maps.DistanceMatrixService". Note that getting distance from google service is an async process.

There is a trick to do this.

1. First create one html input button which is used to get calculate the distance and is visible to the end user.
2. Create another asp.net button which stays hidden (style=dispay:none) with a server side click event at server side.
3. Now on onclick event of input button, calculate the distance and get the response set in hidden field. Also, jQuery trigger the asp.net button when you get the distance in the response and everything valid.
4. On server side event of the asp.net button get the distance from the hidden field.

Hope this helps.

How Do I Pass The Value Obtained In The Script (Value In Dvdistance) To Code Begind

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0