从视图mvc向控制器发送数据 [英] Sending data to controller from view mvc
本文介绍了从视图mvc向控制器发送数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好吧
我已经在这个问题上工作了3天了现在在很多论坛上读过我试过的每个例子我还是不能弄清楚什么是丢失或者我应该怎么做
我正在创建和应用程序，允许用户使用谷歌API查看信号覆盖区域，我需要用户能够报告地图指示应该有覆盖的信号问题，以便我设法创建地图添加自定义按钮，该按钮将在记录覆盖问题时显示输入用户详细信息的弹出窗口。我无法从弹出窗口获取数据到控制器。任何帮助将非常感谢
查看：
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) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
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);
// Set CSS for the control interior.
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) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
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);
// Set CSS for the control interior.
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>' +
//this is my submit button
'<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(); //Or it could be .text()
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 w here I am trying to send the data from the above popup
theController:
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
{
//
// GET: /googleMap/
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:
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.
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.
推荐答案
('<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) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map.
controlDiv.style.padding = '5px';
// Set CSS for the control border.
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);
// Set CSS for the control interior.
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>'+ '<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) { // Set CSS styles for the DIV containing the control // Setting padding to 5 px will offset the control // from the edge of the map. controlDiv.style.padding = '5px'; // Set CSS for the control border. 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); // Set CSS for the control interior. 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>' +
//this is my submit button
'<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() {
('<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>' + //this is my submit button '<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(); //Or it could be .text()
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);
(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(); //Or it could be .text() 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);
这篇关于从视图mvc向控制器发送数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
