Question

基本上我有一段jQuery代码，使用jqvmaps渲染世界地图并对其执行操作：

    <script type="text/javascript" lang="js">

    $(document).ready(function(){
        jQuery('#vmap').vectorMap(
        {
            map: 'world_en',
            backgroundColor: '#a5bfdd',
            borderColor: 'white',
            borderOpacity: 0.25,
            borderWidth: 1,
            color: 'gray',
            enableZoom: true,
            hoverColor: 'orange',
            hoverOpacity: null,
            normalizeFunction: 'linear',
            scaleColors: ['#b6d6ff', '#005ace'],
            selectedColor: 'red',
            selectedRegion: null,
            showTooltip: true,
            onRegionClick: function (element, code, region)
            {


                var CountryName = document.getElementById('#<%= RegionName.ClientID %>');
                var CountryCode = document.getElementById('#<%= RegionCode.ClientID %>');
                var CountryCapital = document.getElementById('#<%= RegionCapital.ClientID %>');

                var Country = document.getElementById('#<%= RegionName.ClientID %>');
                var Capital = document.getElementById('#Capital');
                //var Code = document.getElementById('#Code');

                var codeValue = code;
                var data = { CountryCode: codeValue }

                var CapitalCity = GetCapital(code);



                CountryName.value = region;
                CountryCode.value = code.toUpperCase();
                Capital.value = CapitalCity;

                Country.text= region;
                Code.text = code;


            }



        })(jQuery);

        (function GetCapital(code)
        {
            $.ajax({
                type: "POST",
                url: 'Default.aspx/GetCapital',
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (code) {
                    alert(code.Capital)
                }
            });

        })(jQuery);

    })(jQuery);
</script>

我想要做的是在单击某个区域时（在OnRegionClick事件内）运行C＃方法（并将参数传递给它），返回一个值并使用新信息更新标签/输入。

   using System;
using System.Collections.Generic;
using System.Web.UI;
using Newtonsoft.Json;
using System.IO;
using System.Web.Services;
using System.Web.Script.Services;

namespace WorldMapDetails
{
    public partial class _Default : Page
    {



        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {

            }
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string GetCapital(string CountryCode)
        {
            //do your stuff
            Country Country = new Country();

            List<Country> selectedCountry = JsonConvert.DeserializeObject<List<Country>>(File.ReadAllText(@"C:\Users\Brian\Documents\Bloxinations\Bloxinations\WorldMapInfo\WorldMapDetails\Scripts\json\Countries.json"));

            String Capital = null;

            foreach (Country c in selectedCountry)
            {
                if (c.cca2 == CountryCode)
                {
                    Capital = c.capital.ToString().ToUpper();
                }
            }

            return Capital;
        }
    }
}

我尝试使用[WebMethod]和以下代码，但它不起作用：

$.ajax({
                 type: "POST",
                 url: 'Default.aspx/GetCapital',
                 data: code,
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (code) {
                     //......
                 }
                 }
             });

Answer 1

首先，你应该获得价值代码并创建一个传递的json，
在通过时你应该JSON.stringify data

var codeValue = document.getElementById('#Code').value;
var data = {countryCode: codeValue}

$.ajax({
                 type: "POST",
                 url: 'Default.aspx/GetCapital',
                 data: JSON.stringify(data),
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (code) {
                     //......
                 }
                 }
             });

使用AJAX传递变量并在jQuery和C＃之间执行事件

1 个答案: