Hi All
I've been working on this problem for 3 days now read up on a lot of forums tried every example I still can't figure out whats missing or what should I do
I'm creating and app that allows users to view signal coverage areas using googles API, I need users to be able to report signal issues where the map indicates that there should be coverage so I have managed to create the map add a custom button that will display the pop up for Inputing user details when logging a coverage issue. butt I cant get the data from the pop up to the controller. any assistance will be highly appreciated
View:
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<MvcMaps.Models.CoverageIssueLog>" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Index</title>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MyKey&sensor=true">
</script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<link href="../../Styles/Style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 80%; }
#mapHead{background-color: rgb(200, 200, 200); bottom:auto}
#Head { margin-top:0px;}
#divSearch { background-color: rgb(240, 240, 240); text-align:center }
.Dialog-Class { background-color: rgb(104, 102, 102); border-color: rgb(20, 46, 192); border-width:10%; text-align: center; margin-top:10%; overflow:hidden }
.Coverage_Issue { background-color: rgb(240, 240, 240); border-color: rgb(20, 46, 192); border-width:10%; text-align: center; }
h1 { font-weight:normal; color: rgb(150, 150, 150); font-family:Calibri Light }
.ui-autocomplete{ border:1px solid !important; background-color: White !important; width: 450px; list-style-type: none }
.ui-state-focus{ color:White; background:#96B202; outline:none;}
</style>
<script type="text/javascript">
var map;
var geocoder;
var lati;
var longi;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Legend';
controlUI.appendChild(controlText);
var popup = $('<div>'+
'<h1>DVB-H Coverage</h1>' +
'<table><tr>'+
'<td><div style="BACKGROUND-COLOR: #ff0000;'+
' BORDER-BOTTOM: black thin solid; BORDER-LEFT: black thin solid;'+
' BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; HEIGHT: 8px;'+
' WIDTH: 8px; margin-left: 38%;"></div></td><td>in coverage</td>' +
'</tr><tr>'+
'<td><div style="BACKGROUND-COLOR: #ffffff;' +
' BORDER-BOTTOM: black thin solid; BORDER-LEFT: black thin solid;' +
' BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; HEIGHT: 8px;' +
' WIDTH: 8px; margin-left: 38%;"></div></td><td>out of coverage</td>' +
'</tr></table>'+
'</div> '
).dialog({
'autoOpen': false,
'width': 400,
'height': 300,
'resizable': false,
'modal': true,
'title': name,
dialogClass : 'Dialog-Class'
});
google.maps.event.addDomListener(controlUI, 'click', function () {
popup.dialog('open');
});
}
function HomeControllog(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'white';
controlUI.style.borderStyle = 'solid';
controlUI.style.borderWidth = '2px';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to set the map to Home';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily = 'Arial,sans-serif';
controlText.style.fontSize = '12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = 'Log Coverage Issue';
controlUI.appendChild(controlText);
var searchaddress;
var popup = $('<div>' +
'<form action="@Url.Content("~/googleMapController/saveData/")" method="post" name="SaveDataForm">' +
'<table><tr>' +
'<th colspan="2">Coverage Issue Log<th>' +
'</tr><tr>' +
'<td> Name</td><td> <input type="text" önkeyup="" id="Name" style=" width: 300px; margin-left: 30px"/></td>' +
'</tr><tr>'+
'<td>Coverage Issue address</td><td> <input type="text" id="C_I_add" style=" width: 300px; margin-left: 30px"/></td>' +
'</tr><tr>'+
'<td>Comments</td><td> <textarea type="text" id="Comments" rows="5" style=" width: 300px; margin-left: 30px"/></td>' +
'</tr><tr>'+
'<td>Cellphone Number</td><td> <input type="text" önkeyup="" id="CellNo" style=" width: 300px; margin-left: 30px"/></td>' +
'</tr></table>' +
'<button type="button" id="submitbtn" önclick="SaveDataForm()">Submit</button>' +
'</div>'+
'</Form>'
).dialog({
'autoOpen': false,
'width': 500,
'height': 500,
'resizable': false,
'modal': true,
'title': name,
dialogClass: 'Dialog-Class',
buttons: { "Close": function() { $(this).dialog("close"); } }
});
google.maps.event.addDomListener(controlUI, 'click', function () {
if (document.getElementById('autocomplete').value == '') {
window.alert('A search on your exact location must be done first before logging an issue');
} else {
window.alert('The Information you are about to provide will be used for research purposes; please note that DStv mobile is not liable in any way to provide coverage in the area you will indicate');
populateTextbox();
popup.dialog('open');
}
});
}
function SaveDataForm() {
var theName = (document.getElementById('name')).val();
var theaddres = (document.getElementById('C_I_add')).val();
var theComment = (document.getElementById('Comments')).val();
var theCellNo = (document.getElementById('CellNo')).val();
var theLatitude = geometry.location.lat();
var theLongitude = geometry.location.lng();
document.SaveDataForm.submit();
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-30.466160000000000000, 24.473988999999960000),
zoom: 7,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
geocoder = new google.maps.Geocoder();
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
var homeControlDivlog = document.createElement('div');
var homeControllog = new HomeControllog(homeControlDivlog, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(homeControlDiv);
$("#dialog").dialog();
homeControlDivlog.index = -1;
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(homeControlDivlog);
}
$(document).ready(function () {
$("#autocomplete").autocomplete({
source: function (request, response) {
geocoder.geocode({ 'address': request.term }, function (result) {
response($.map(result, function (item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}))
})
},
select: function (event, ui) {
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker = new google.maps.Marker({
map: map,
draggable: true
})
marker.setPosition(location);
map.setCenter(location);
}
})
})
function populateTextbox() {
document.getElementById('C_I_add').value = document.getElementById('autocomplete').value;
}
</script>
</head>
<body önload="initialize()">
<div id="Head">
<div id="mapHead">
<h1>COVERAGE MAP</h1>
</div>
<div style="font-size: 11pt;color: #000">Disclaimer:The coverage map on the DStv Mobile website reflects the approximate coverage of the DVB-H transmitters. Extensive testing and research has been done and every care taken to give you an accurate representation of the DVB-H signal coverage area. The signal strength and coverage may vary for various reasons such as topography, building structures and other factors beyond our control.</div>
<div id="divSearch">
<input type="text" önkeyup="populateTextbox()" id="autocomplete" style=" width: 500px; margin-left: 30px; height:25px "/>
<input type="button" önclick="AddressSearch();" value="" style=" vertical-align: middle; height: 30px; width: 100px; background-image:url(Images/ser.png); padding: 15px"/>
</div></div>
<div id="map-canvas"/>
</body>
</html>
this is where I am trying to send the data from the above popup
theController:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMaps.ServiceReference1;
using MvcMaps.Models;
namespace MvcMaps.Controllers
{
public class googleMapController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(CoverageIssueLog coverageIssueLog)
{
ServiceReference1.mapIssueDSClient objServiceClient = new mapIssueDSClient();
IssueData objIssue = new IssueData();
objIssue.UserName = coverageIssueLog.name;
objIssue.CoverageIssueAddress = coverageIssueLog.C_I_add;
objIssue.comments = coverageIssueLog.Comments;
objIssue.cellphoneNum = coverageIssueLog.CellNo;
objIssue.Longitude = Convert.ToDecimal( coverageIssueLog.longi);
objIssue.Latitude = Convert.ToDecimal( coverageIssueLog.lati);
Boolean result = objServiceClient.saveData(objIssue);
return View();
}
}
}
this is the model I decided to use following an answer from my google search
The Model:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcMaps.Models
{
public class CoverageIssueLog
{
public string name { set; get; }
public string C_I_add { set; get; }
public string Comments { set; get; }
public string CellNo { set; get; }
public string lati { set; get; }
public string longi { set; get; }
}
}
I don't know if this is enough info, This is the 1st ever MVC project i'm pursuing and I'm don't have much experience in programming so please be clear as possible in your answer.
Thank you very much in advance any info would be highly appreciated.
Submit an article or tip