در این مقاله قصد داریم با استفاده از طول و عرض جغرافیایی و نقشه شهری در ASP.NET MVC موقعیت مورد نظر را مکان یابی کنیم.در اینجا از JsonResult و Ajax استفاده میکنیم.

معرفی

با کلیک کردن در محل مورد نظر جزییات محل به کاربر نمایش داده میشود . از روش JsonResult و Ajax استفاده میکنیم.

پيش نياز

ویندوز 7 یا بالاتر
  SQL Server 2012یا بالاتر

   ASP.NET MVC 5 فریمورک بالا

مراحل

   1.   ایجاد یک جدول برای موارد زیر:

2. یک پروژه جدیدMVC   ایجاد کرده و نام آن را WebApplication میگذاریم.

3. روی  پوشه مدل راست کلیک کنید  و یک آیتم جدید ایجاد کنید و  ADO.NET Entity Data model را انتخاب کنید . نامی برای آن انتخاب و سپس  روی EF Designer From Data کلیک کنید

جدول داده شده انتخاب کرده و Finish کلیک کنید و edmx ایجاد می شود.

اتصال خودکار تولید شده ، edmx از دیتابیس ایجاد میکند.

کد زیر را در کنترلر مینویسیم.

    using System;    
    using System.Collections.Generic;    
    using System.Data;    
    using System.Data.Entity;    
    using System.Linq;    
    using System.Net;    
    using System.Web;    
    using System.Web.Mvc;    
    using WebApplication1.Models;    
        
        
    namespace WebApplication1.Controllers    
    {    
        public class MapsController : Controller    
        {    
            private test2Entities db = new test2Entities();    
        
            // GET: Maps    
            public ActionResult Index()    
            {    
                return View(db.Maps.ToList());    
            }    
      
            #region [Map]    
            [HttpPost]    
            public JsonResult GetMap()    
            {    
                var data1 = Map();    
                return Json(data1, JsonRequestBehavior.AllowGet);    
            }    
            public IEnumerable<Map> Map()    
            {    
        
                return (from p in db.Maps    
                        select new    
                        {    
                            Name = p.Name,    
                            Latitude = p.Latitude,    
                            Longitude = p.Longitude,    
                            Location = p.Location,    
                            Description = p.Description,    
                            Id = p.Id    
                        }).ToList()    
                    .Select(res => new Map    
                    {    
                        Name = res.Name,    
                        Latitude = res.Latitude,    
                        Longitude = res.Longitude,    
                        Location = res.Location,    
                        Description = res.Description,    
                        Id = res.Id    
        
        
                    });    
        
            }    
            #endregion    
          
        }    
    }   

 IEnumerable لیستی از مقادیر جدول دریافت میکند . کوئری  Select  مقادیر و JsonResult post data   برای درخواست  AJAX  با استفاده از HttpPost keyword  برمیگرداند.

View

رفرنسهای  زیر را که برای JS و CSS است در صفحه وارد میکنیم.

    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />    
    <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>    
        
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>  

تگ  div نقشه

    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>  

کد کامل

    @model IEnumerable<WebApplication1.Models.Map>    
        
    @{    
        Layout = null;    
    }    
        
    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />    
    <script type='text/javascript' src='http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js?2'></script>    
        
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>    
        
    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>    
        
    <script type="text/javascript">    
        
    $(document).ready(function () {    
        var map = L.map('map', {    
        
            center: [10.1102278, 77.8958904],    
              minZoom: 4,    
              zoom: 6    
        });    
                    $.ajax({    
                        type: "POST",    
                        url: '/Maps/GetMap',    
                        success: function (data) {    
                            var result = JSON.stringify(data);    
        
                            for (var i = 0; i < result.length; ++i) {    
                                var popup ='<b>Name:</b> '+ data[i].Name +    
                                '<br/><b>Latitude:</b> ' + data[i].Latitude +    
                                  '<br/><b>Longitude:</b> ' + data[i].Longitude+    
                               '<br/><b>Location:</b> ' + data[i].Location;    
        
        
                                L.marker([data[i].Latitude, data[i].Longitude])    
                                    .bindPopup(popup)    
                                   .addTo(map);    
                            }    
        
                        },    
                        error: function (xhr) {    
        
                            console.log(xhr.responseText);    
                            alert("Error has occurred..");    
                        }    
                    });    
        
                    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {    
                        attribution: '© <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',    
                        subdomains: ['otile1', 'otile2', 'otile3', 'otile4']    
                    }).addTo(map);    
        
                });    
        
    </script>  

Div .5 با id  ="map از توابع زیر برای نشان دادن نقشه  است . این نقشه به طور پیش فرض دارای عرض  و طول جغرافیایی با استفاده از کلمه centerkey، کاربر می تواند سطح زوم را نیز تغییر دهد.

6. متد Ajax  طول و عرض جغرافیایی  را بازیابی میکند و مقدار بازیابی شده از نقشه و  جزئیات کاربر را  با  کلیک بر روی این نشانگر با استفاده از نشانگر  ومتد bind popup  ، نشان میدهد.

خروجی

آموزش asp.net mvc