CODEWITHSUNDEEP
javascriptjqueryasp.netpostback
SurDoc83
SurDoc83

Reputation: 23

JQuery in ASP.NET Postback

I built a map (of US) using JQuery so that when you click on an individual state it displays a message according to that particular state. I am COMPLETELY new to ASP.NET and I now need to make it perform a server-side postback when state is clicked on AND in codebehind, do a response.write to display the full selected state name back to the browser. How do I accomplish this? Below is my HTML code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Map</title>

    <style>


  #alert {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #ddd;
    color: #333;
    padding: 5px;
    font-weight: bold;
  }

  #tata {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    background-color: #ddd;
    color: #333;
    padding: 5px;
    font-weight: bold;
  }
</style>

    <link href="map.css" media="screen" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.map.js" type="text/javascript"></script>
    <script src="jquery.map.usa.js" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#map').vectorMap({
        map: 'usa_en',
        enableZoom: true,
        showTooltip: true,
        selectedRegion: 'mo',
        normalizeFunction: 'linear',
        onLabelShow: function(element, label, code, region){
            $('#resorts')
                .text(code.toUpperCase()+ ' has ' +region+ ' stunners!')
                .stop()
                .css('backgroundColor', '#ff0')
                .animate({backgroundColor: '#ddd'}, 1000);
        },
        onRegionClick: function(element, code, region){
            $('#alert')
                .text('Hi Joe! You have selected the state of '+region+' on the map with the state initals of: ' + code.toUpperCase())
                .stop()
                .css('backgroundColor', '#af0')
                .animate({backgroundColor: '#ddd'}, 1000);
        }
    });

});

</script>
  </head>
  <body>
    <div id="alert" style="width: 350px; height:50px;">Clicked Data</div>
    <center><div id="map" style="width: 600px; height: 450px;"><div id="resorts" style="width: 350px; height:25px;">Resorts</div></div></center>
  </body>
</html>

Any help is MUCH appreciated!!

Upvotes: 0

Views: 448

Answers (2)

Ruchit Rami
Ruchit Rami

Reputation: 2282

You can use jquery ajax call. For example following code will get the server datetime on button click and show it with a textbox.
on .aspx page:

$("#btn").click(function () {
         $.ajax({
             type: "POST",
             url: "Ajaxdemo.aspx/GetSysDate",
             data: "{}",
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (msg) {
                 $("#txtShowDate").val(msg.d);
             }
         });
     });

On the .cs file of the page:

[WebMethod]
public static string GetSysDate()
{
    return DateTime.Now.ToString();
}

You can do your stuff in this method on the server side and return the string message. Also, you can pass parameters with "data:" in the ajax call definition.

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

I think you no need of using post back and code behind model here.

You can achieve it very nicely with jQuery ajax calls and use page method and return HTML and render it in div.

Upvotes: 1

Related Questions