In this article I will explain with an example, how to implement Google Places (Address) AutoComplete TextBox in ASP.Net MVC Razor.
This article will explain how to get the complete Address of a Location using the Google Places API of Google Maps and then send the complete Address and its Geographical coordinates i.e. Latitude and Longitude to Controller in ASP.Net MVC Razor.
The Google Places (Address) AutoComplete TextBox is part of Google Maps API and it is used to find out Address and their Geographical coordinates i.e. Latitude and Longitude of a Location.
Note: In order to execute the Google Maps application you will need to register and get an API key from Google API. For more details refer here.
Controller
The Controller consists of two Action methods.
Action method for handling GET operation
Inside this Action method, simply the View is returned.
Action method for handling POST operation
This Action method gets called when the Submit Button is clicked. The values of the Address, Latitude and Longitude TextBoxes are fetched from the FormCollection and are set in ViewBag object and later displayed using JavaScript Alert Message Box.
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(FormCollection form)
{
ViewBag.Message = "Address: " + form["txtAddress"];
ViewBag.Message += "\\nLatitude: " + form["txtLatitude"];
ViewBag.Message += "\\nLongitude: " + form["txtLongitude"];
return View();
}
}
View
The View consists of an HTML Form which has been created using the Html.BeginForm method with the following parameters.
ActionName – Name of the Action. In this case the name is Index.
ControllerName – Name of the Controller. In this case the name is Home.
FormMethod – It specifies the Form Method i.e. GET or POST. In this case it will be set to POST.
There are four TextBox fields created using the Html.TextBoxFor method.
Inside the Google Maps API load event handler, the Google Places AutoComplete plugin has been applied to the Location TextBox.
Also, an event handler place_changed has been applied which will be triggered when a selection is made from the AutoComplete List of the Google Places (Address) AutoComplete TextBox.
When an Address of a Location is selected, the details such has complete Address, Latitude and Longitude are set into their respective TextBoxes.
There’s also a Submit Button at the end of the Form and when the Button is clicked, the Form is submitted.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<title>Index</title>
</head>
<body>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<table border="0" cellpadding="5" cellspacing="0">
<tr>
<td>Location</td>
<td>@Html.TextBox("txtLocation")</td>
</tr>
<tr>
<td>Address</td>
<td>@Html.TextBox("txtAddress")</td>
</tr>
<tr>
<td>Latitude</td>
<td>@Html.TextBox("txtLatitude")</td>
</tr>
<tr>
<td>Longitude</td>
<td>@Html.TextBox("txtLongitude")</td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"/></td>
</tr>
</table>
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=<API Key>"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function () {
var places = new google.maps.places.Autocomplete(document.getElementById('txtLocation'));
google.maps.event.addListener(places, 'place_changed', function () {
var place = places.getPlace();
document.getElementById('txtAddress').value = place.formatted_address;
document.getElementById('txtLatitude').value = place.geometry.location.lat();
document.getElementById('txtLongitude').value = place.geometry.location.lng();
});
});
</script>
@if (ViewBag.Message != null)
{
<script type="text/javascript">
window.onload = function(){
alert("@ViewBag.Message");
};
</script>
}
</body>
</html>
Screenshot
![ASP.Net MVC: Implement Google Places (Address) AutoComplete TextBox]()
Downloads
