ASP.NET回发中的JQuery

Question

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. 我使用JQuery构建了一个（美国）地图，这样，当您单击单个状态时，它将根据该特定状态显示一条消息。 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. 我完全不熟悉ASP.NET，现在我需要使它在代码中的“与”上单击“状态”时执行服务器端回发，执行response.write以将完整的选定状态名称显示回浏览器。 How do I accomplish this? 我该如何完成？ Below is my HTML code: 以下是我的HTML代码：

<?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!! 任何帮助深表感谢！！

Answer 1

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. 您可以使用jQuery ajax调用非常好地实现它，并使用page方法并返回HTML并将其呈现在div中。

Answer 2

You can use jquery ajax call. 您可以使用jquery ajax调用。 For example following code will get the server datetime on button click and show it with a textbox. 例如，以下代码将在单击按钮时获得服务器日期时间，并在文本框中显示该日期。
on .aspx page: 在.aspx页面上：

$("#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: 在页面的.cs文件上：

[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. 同样，您可以在ajax调用定义中使用“ data：”传递参数。

ASP.NET回发中的JQuery

问题描述

2 个解决方案

解决方案1
1 2012-10-03 07:05:54

解决方案2
0 2012-10-03 07:22:19

ASP.NET回发中的JQuery

问题描述

2 个解决方案

解决方案1 1 2012-10-03 07:05:54

解决方案2 0 2012-10-03 07:22:19

解决方案1
1 2012-10-03 07:05:54

解决方案2
0 2012-10-03 07:22:19