0

我使用 JQuery 构建了一张（美国）地图，这样当您单击单个州时，它会根据该特定州显示一条消息。我对 ASP.NET 完全陌生，现在我需要让它在单击状态时执行服务器端回发，并在代码隐藏中执行 response.write 以将完整的选定状态名称显示回浏览器。我该如何做到这一点？下面是我的 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>

任何帮助深表感谢！！

4

2 回答 2

1

我认为您不需要在这里使用回发和模型背后的代码。

您可以使用 jQuery ajax 调用很好地实现它，并使用页面方法并返回 HTML 并将其呈现在 div 中。

于 2012-10-03T07:05:54.117 回答
0

您可以使用 jquery ajax 调用。例如，以下代码将在按钮单击时获取服务器日期时间并用文本框显示它。
在 .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);
             }
         });
     });

在页面的 .cs 文件中：

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

您可以在服务器端使用此方法执行您的操作并返回字符串消息。此外，您可以在 ajax 调用定义中使用“data:”传递参数。

于 2012-10-03T07:22:19.387 回答