Google Maps with ASP.NET MVC

ASP.Net MVC

Once again i am back to my blog. In these days i was working on my project, which i developed using ASP.NET MVC. In that project i was in need of using google maps, for which i tried some of the things and i was able to use it. So i want to share that part with you. In this post i will be telling about “how to use the Google maps with ASP.net MVC”. It is a very simple application in which we will just put the marks(push pin) on the map and will send them back to controller to save them. Later on those can be again used to show it back in the Maps.

Google Map

First we will start with creating a new MVC project. To get the mark form the user we have to show him a map(google). To show him the map we are going to use the javascript function and for that we have to include the javascript api file given by google. http://www.google.com/jsapi?key=%5BYou Key]. You have to get this key from the google so that you can access the map api. http://code.google.com/apis/maps/signup.html

After creating a new project open the index.aspx page in the view section of the project. There in the source view add the following code to get the map

with following lines we are adding the API file

<asp:Content ID"indexHead" ContentPlaceHolderID="HeadContent" runat="server">

<script type="text/javascript" src="http://www.google.com/jsapi?key=[YourKey]"></script>

Following is the code to load the google map in the webpage. You can get the same code from google documentation also with more extra functions and features. But what extra we are doing here is, we are adding all the points in the array so that we can send it back to the controller.

<script type="text/javascript">
var allMarks = [];
google.load("maps", "2");

//This function will help us to add the mark at
//location where user has double clicked. Then
//we will add all the marks in our array so that
//we can send it back to the controller
function initialize() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
GEvent.addListener(map, "dblclick", function(overlay, latlng) {
if (latlng) {
var mark = new GMarker(latlng);
allMarks.push(latlng);
map.addOverlay(mark);
}
});

}
google.setOnLoadCallback(initialize);

Following function is used for sending the data to the controller. It is ajax call with the data as the array and the description. We will be calling the controller with action name. Here we are creating a object GMap containing the data

//This function will be called for saving the mark
//for that it will send the data back to the controller
function saveMap() {

//gmap object with all values of the map mark
var gmap = {
Locations: allMarks,
Description: Description.value
}

//Ajax call for saving the data at the server. It will send the gmap
//object tot the server
            $.ajax({
type: "POST",
url: "/Home/Create",
data: gmap
});
}
</script>

</asp:Content>

That is it. After doing all this we have to write one create function in the HomeController.cs class. Have a look to the following code

public ActionResult Create(GMap gmap)
{
Session["MapData"] = gmap;
return View();
}

As you can see here we have used a GMap type. That type you can create as following

public class GMap
{
public object[] Locations { get; set; }
public string Description { get; set; }
}

Finally we are done with it. Now you can see the following screenshots to get an idea how it is working. Also you can download the sample from here

Google Map in ASP.NET MVC application

Action getting data from the webpage

Event Calendar in MVC application Using jMonthCalendar(JQuery)

A good Jquery plugin is available as Event Calendar which can be download from following location.

http://www.bytecyclist.com/projects/jmonthcalendar/
or
http://code.google.com/p/jmonthcalendar/

I used it in one sample project with MVC and loaded certain events from the controller. Which can in return load from the Model. But for the time being in this sample i returned from the controller it self.

public ActionResult Events(string date)
{
MyEvents event1 = new MyEvents            
{
EventID = 11 ,
StartDate = new DateTime(2009,04,01),
Title = "Meeting with Boss",
Description = "Meeting on product release",
CssClass = "Meeting",
URL= "/Home/EventDetails/11"            
};

MyEvents event2 = new MyEvents            
{
EventID = 12,
StartDate = new DateTime(2009, 04, 01),
Title = "Celebration",
Description = "Fathers birthday",
CssClass = "Birthday",
URL = "/Home/EventDetails/12"            
};

string[] stringlist = new string[2];
stringlist[0] = event1.GetJSONResult();
stringlist[1] = event2.GetJSONResult();

return Json(stringlist);
}

For calling the events it did getJson call from the index page where the jMonthCalendar is shown. It will call one of the function the Controller and in return will get the array of the events which will then be sent to the jMonthCalendar. It will load the events. We can add the URL also so that when user clicks the event he will get the complete detail once again with the help of the controller

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

height: 650,
width: 980,
navHeight: 25,
labelHeight: 25,

onMonthChanging: function(dateIn) {
$.getJSON("http://localhost:1511/Home/Events",
function(data) {

//Array of my events                    
var events = new Array();

//Loop and load all the events and load them into the array
                    $.each(data, function(i, item) {

var oResultData = eval('(' + item + ')');
var event = { "EventID": 5, "Date": oResultData.StartDate,
"Title": oResultData.Title, "URL": oResultData.URL,
"Description": oResultData.Description,
"CssClass": oResultData.CssClass
};

events.push(event);

});

//Load the events into the calendar
                    $.jMonthCalendar.ReplaceEventCollection(events);
$.jMonthCalendar.DrawCalendar(dateIn);
});
return true;
},
onEventBlockOver: function(event) {
return true;
},
onEventBlockOut: function(event) {
return true;
},
onDayLinkClick: function(date) {
return true;
},
onDayCellClick: function(date) {
return true;
}
};

var newevents = [];
$.jMonthCalendar.Initialize(options, newevents);
});</script>

Download the sample from following location

EventCalendar

Here are the screen shot of the application.

Event Calendar in MVC Application

Detail of selected Event

File upload in ASP.NET MVC

Here is a sample for handling upload of a file, In your MVC application. In this sample i used the Dialog box of JQuery, where user will select the file and will click upload

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    

<h2>Files uploaded to server</h2>    

<div id="dialog" title="Upload files">        
    <% using (Html.BeginForm("Upload", "File", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {%><br />
        <p><input type="file" id="fileUpload" name="fileUpload" size="23"/> ;</p><br />
        <p><input type="submit" value="Upload file" /></p>        
    <% } %>    
</div>
<a href="#" onclick="jQuery('#dialog').dialog('open'); return false">Upload File</a>
</asp:content>

Then we have to handle this request in the respective controller which is specified in BeginForm of our above code (FileContoller) and action name (Upload). Following will be our code in the FileController Controller for the Upload action

public void Upload()
{
foreach (string inputTagName in Request.Files)
{
HttpPostedFileBase file = Request.Files[inputTagName];
if (file.ContentLength > 0)
{
string filePath = Path.Combine(HttpContext.Server.MapPath("../Uploads")
, Path.GetFileName(file.FileName));
file.SaveAs(filePath);
}
}

RedirectToAction("Index", "File");
}

Download the sample code from here

File upload in MVC with JQuery Dialog

Using JQuery UI in ASP.NET MVC

I was developing one application in ASP.NET MVC, where i was in need of displaying Date Picker to the user. But if you generate View with the help of MVC extension then it will display text box for your date field. In order to show the datepicker i used jquery datepicker.
You can download it from JQuery UI here

Step 1

• Include these files in your project. in the script folder

jquery-1.3.2.js
ui.core.js
ui.datepicker.js

Also include the theme folder in project to apply the themes for the respective controls

• Add the Script reference in your webpage, for that include the following code

<script type="text/javascript" src="/../../Scripts/jquery-1.3.2.js"></script>
<script type="text/javascript" src="/../../Scripts/ui.core.js"></script>
<script type="text/javascript" src="/../../Scripts/ui.datepicker.js"></script>

• Include the following script in your view page(where you want to show the date picker) giving it a ID. On that ID we will use it as a input. ID should be unique

<script type="text/javascript">
 $(document).ready(function(){
$("#FromDate").datepicker();
});
</script>

Step 2

• We need to create a Extension for HtmlHelper Class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace System.Web.Mvc.Html
{
public static class DatePickerExtension
{
public static string DatePicker(this HtmlHelper htmlHelper, string name)
{
return "<input type=\"text\" id=\"" + name + 
"\" name=\"" + name + "\" value=\"\"/>";
}
}
}

• In your view page you have to add the following code to have that control

 <label for="fromDate">From date:</label>             
<%= Html.DatePicker("FromDate")%>

Output :

JQuery UI DatePicker