How to convert ASP to MVC

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class city : System.Web.Services.WebService
    {

        public class cityPopulation
        {
            public string city_name { get; set; }
            public int population { get; set; }
            public string id { get; set; }
        }
        [WebMethod]
        public List<cityPopulation> getCityPopulation(List<string> pData)
        {
            List<cityPopulation> p = new List<cityPopulation>();

            using ( SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["dbConnection"].ConnectionString))
            {
                string myQuery = "SELECT id,city_name,population FROM  citypopulation WHERE  year = @year";
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = myQuery;
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@year", pData[0]);
                cmd.Connection = cn;
                cn.Open();
                SqlDataReader dr = cmd.ExecuteReader();
                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                        cityPopulation cpData = new cityPopulation();
                        cpData.city_name = dr["city_name"].ToString();
                        cpData.population = Convert.ToInt32(dr["population"].ToString());
                        p.Add(cpData);
                    }
                }
            }
            return p;
        }

    }

}

<script type="text/javascript">
    $(document).ready(function() {

        $("#btnCreatePieChart").on('click', function(e) {
            debugger;
            var pData = [];
            pData[0] = $("#ddlyear").val();

            var jsonData = JSON.stringify({ pData: pData });

            $.ajax({
                type: "POST",
                url: "city.asmx/getCityPopulation",
                data: jsonData,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess_,
                error: OnErrorCall_
            });

            function OnSuccess_(response) {
                debugger;
                var aData = response.d;
                var arr = []

                $.map(aData, function(item, index) {
                    var i = [item.city_name, item.population];
                    var obj = {};
                    obj.name = item.city_name;
                    obj.y = item.population;
                    arr.push(obj);
                });
                var myJsonString = JSON.stringify(arr);
                var jsonArray = JSON.parse(JSON.stringify(arr));

                drawPieChart(jsonArray);

            }
            function OnErrorCall_(response) {
                alert("Whoops something went wrong!");
            }
            e.preventDefault();
        });

    });
    

        
            function drawPieChart(seriesData) {
                
                $('#container').highcharts({
                
                    chart: {
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false,
                        type: 'pie'
                    },
                    title: {
                        text: 'Population city wise'
                    },
                    tooltip: {
                        pointFormat: '{series.name}: {point.percentage:.1f}%'
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                format: '{point.name}: {point.percentage:.1f} %',
                                style: {
                                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                }
                            }
                        }
                    },
                    series: [{
                        name: "Brands",
                        colorByPoint: true,
                        data: seriesData
}]
                    });
                }
            

    
    </script>