Fatal编程技术网
  • javascript/
  • Javascript ASP.NET回发中的JQuery

Javascript ASP.NET回发中的JQuery

javascript jquery asp.net

Javascript ASP.NET回发中的JQuery,javascript,jquery,asp.net,postback,Javascript,Jquery,Asp.net,Postback,我使用JQuery构建了一个（我们的）地图，这样当你点击一个单独的状态时，它会根据那个特定的状态显示一条消息。我对ASP.NET完全陌生，现在需要让它在单击状态时执行服务器端回发，并在codebehind中执行response.write以将完整的选定状态名称显示回浏览器。我如何做到这一点？下面是我的HTML代码： <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

我使用JQuery构建了一个（我们的）地图，这样当你点击一个单独的状态时，它会根据那个特定的状态显示一条消息。我对ASP.NET完全陌生，现在需要让它在单击状态时执行服务器端回发，并在codebehind中执行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>


地图
#警觉的{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
背景色：#ddd；
颜色：#333；
填充物：5px；
字体大小：粗体；
}
#塔塔{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
背景色：#ddd；
颜色：#333；
填充物：5px；
字体大小：粗体；
}
jQuery（文档）.ready（函数（）{
jQuery（'#map'）.vectorMap({
地图：“美国”，
enableZoom:true，
showTooltip:true，
所选区域：“mo”，
normalizeFunction:'线性'，
onLabelShow：函数（元素、标签、代码、区域）{
$（“#度假村”）
.text（code.toUpperCase（）+'具有'+region+'stunners！'）
.停止
.css（'backgroundColor'，'#ff0'）
.animate（{backgroundColor:'#ddd'}，1000）；
},
onRegionClick：函数（元素、代码、区域）{
$（“#警报”）
.text（'Hi Joe！您已经在映射上选择了'+region+'的状态，其状态初始值为：'+code.toUpperCase（））
.停止
.css（'backgroundColor'，'#af0'）
.animate（{backgroundColor:'#ddd'}，1000）；
}
});
});
点击数据
度假村
非常感谢您的帮助

我认为您不需要在这里使用回发和代码隐藏模型

您可以通过jQuery ajax调用很好地实现它，并使用page方法返回HTML并在div中呈现它。

您可以使用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:”传递参数。

您能提供一个示例说明您的意思吗？您能提供一个示例说明您正在谈论的内容吗？下面提供了示例代码。检查一下我的答案。他只是将数据时间作为输出返回给ajax调用。您需要编写逻辑，准备HTML字符串并返回