如何通过一个javascript数组ASP.NET MVC模式呢？ [英] How to pass a javascript array to ASP.NET MVC model?
本文介绍了如何通过一个javascript数组ASP.NET MVC模式呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建ASP.NET MVC字段对象并将其存储到数据库中。该字段应该包含它的坐标，用户可以用谷歌地图API的选择。
而现在，我怎么能传递标记，它们存储在JavaScript数组的坐标，以Model's列表？
这是我的控制器这样的：
使用系统;
使用System.Collections.Generic;
使用System.Data这;
使用System.Data.Entity的;
使用System.Linq的;
使用System.Net;
使用的System.Web;
使用System.Web.Mvc;
使用BL;
使用MvcAgrarTest.Models;命名空间MvcAgrarTest.Controllers
{
公共类FieldsController：控制器
{
私人MvcAgrarContext DB =新MvcAgrarContext（）; // GET：字段
公众的ActionResult指数（）
{
VAR字段= db.CreateFieldViewModel.Include（F =＆GT; f.FieldType）;
返回查看（field.ToList（））;
} // GET：字段/创建
公众的ActionResult的Create（）
{
VAR模型=新CreateFieldViewModel（）;
ViewBag.FieldTypeId =新的SelectList（db.FieldType，FieldTypeId，姓名）;
返回查看（模型）;
} // POST：字段/创建
[HttpPost]
[ValidateAntiForgeryToken]
公众的ActionResult创建（CreateFieldViewModel模型，CreateFieldViewModel领域的String []标记）
{ 如果（ModelState.IsValid）
{
PostCoordinates（标记）;
db.CreateFieldViewModel.Add（场）;
db.SaveChanges（）;
返回RedirectToAction（「指数」）;
} ViewBag.FieldTypeId =新的SelectList（db.FieldType，FieldTypeId，姓名，field.FieldTypeId）;
返回JSON（真）;
}
保护覆盖无效的Dispose（BOOL处置）
{
如果（处置）
{
db.Dispose（）;
}
base.Dispose（处置）;
}
}
}
在这里，我创建视图与谷歌地图脚本：
@model MvcAgrarTest.Models.CreateFieldViewModel@ {
ViewBag.Title =创建;
}＆LT; H2＆GT;费尔德anlegen＆LT; / H＆GT;
@using（Html.BeginForm（））
{
@ Html.AntiForgeryToken（） ＆LT; DIV CLASS =形横＆GT;
＆LT;小时/＆GT;
@ Html.ValidationSummary（真，新{@class =TEXT-危险}）
＆LT; DIV CLASS =表单组＆GT;
@ Html.LabelFor（型号=＆GT; model.Name，htmlAttributes：新{@class =控制标签COL-MD-2}）
＆LT; DIV CLASS =COL-MD-10＆GT;
@ Html.EditorFor（型号=＆GT; model.Name，新{htmlAttributes =新的{@placeholder =Feldname，@class =表格控}}）
@ Html.ValidationMessageFor（型号=＆GT; model.Name，新{@class =TEXT-危险}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =表单组＆GT;
@ Html.LabelFor（型号=＆GT; model.FieldTypeId，Feldtyp，htmlAttributes：新{@class =控制标签COL-MD-2}）
＆LT; DIV CLASS =COL-MD-10＆GT;
@ Html.DropDownList（FieldTypeId，NULL，--Feldartauswählen--，htmlAttributes：新{@class =表格控}）
@ Html.ValidationMessageFor（型号=＆GT; model.FieldTypeId，新{@class =TEXT-危险}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =表单组＆GT;
@ Html.LabelFor（型号=＆GT; model.Size，htmlAttributes：新{@class =控制标签COL-MD-2}）
＆LT; DIV CLASS =COL-MD-10＆GT;
@ Html.EditorFor（型号=＆GT; model.Size，新{htmlAttributes =新的{@placeholder =在Hektar，@class =表格控}}）
@ Html.ValidationMessageFor（型号=＆GT; model.Size，新{@class =TEXT-危险}）
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =谷歌＆GT;
＆LT;脚本SRC =https://maps.googleapis.com/maps/api/js?sensor=false类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js类型=文/ JavaScript的＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT; VAR地图; 函数初始化（）{
VAR myLatLng =新google.maps.LatLng（50.617109，8.065738）;
VAR myOptions = {
变焦：5，
中心：myLatLng，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
}; 地图=新google.maps.Map（的document.getElementById（map_canvas的），myOptions）; //数组来存储已经绘制标记
变种标记= []; //事件监听器绘制一个标记
google.maps.event.addListener（地图，'点击'，功能（E）{ VAR的标记=新google.maps.Marker（）; marker.setPosition（e.latLng）;
marker.setMap（地图）;
marker.setVisible（真）; markers.push（标记）; //绘制多边形上的标记点击
//一旦用户点击上的标记的
google.maps.event.addListener（标记，'点击'，功能（E）{
。的document.getElementById（标签）的innerHTML =;
drawPoints（标记）;
label.style.borderStyle =点缀
对于（i = 0; I＆LT; markers.length ++我）{
。的document.getElementById（标签）的innerHTML + =标记[I] .POSITION; } //清空标记数组
标记物= [];
}）; }）; } 功能drawPoints（标记）{
VAR聚=新google.maps.Polygon; VAR点= []; 对于（VAR I = 0; I＆LT; markers.length;我++）{
points.push（标记[I] .getPosition（））;
}
poly.setMap（地图）;
poly.setPath（点）;
poly.setVisible（真）;
}
＆LT; / SCRIPT＆GT;
＆LT;身体的onload =初始化（）＆GT;
＆LT; DIV ID =map_canvas的风格=宽度：500像素，高度：300像素＆GT;＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =表单组＆GT;
＆LT; DIV CLASS =COL-MD-偏移2 COL-MD-10＆GT;
＆LT;输入类型=提交值=ERSTELLEN级=BTN BTN-默认的/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;}
终于我的ViewModel创建字段：
公共类CreateFieldViewModel
{
[键]
[显示（名称=ID）]
公众诠释FieldId {搞定;组; } [需要]
[显示（NAME =字段名）]
公共字符串名称{;组; } [需要]
[显示（NAME =字段类型）]
公众诠释FieldTypeId {搞定;组; } [需要]
[范围（0.01，int.MaxValue，的ErrorMessage =大小不容0或更少）]
[显示（NAME =字段大小）]
公众持股量大小{搞定;组; } [显示（NAME =坐标）]
公开名单＆LT;串GT;坐标{搞定;组; } 公共虚拟的FieldType的FieldType {搞定;组; }
}
/编辑：ID现在做到了这样，但它仍然doesn't工作
变化的部分从谷歌地图API：
VAR passdata = [];
google.maps.event.addListener（标记，点击功能（E）{
对于（Y = 0; Y＆LT; markers.length ++ Y）{
passdata [Y] =标记[Y] .POSITION
}
drawpoints（标记）;
$阿贾克斯（{
网址：@ Url.Action（创建，场），
典型：POST，
数据类型：JSON
数据：JSON.stringify（{坐标：passdata}）
的contentType：应用/ JSON的;字符集= UTF-8，
传统：真实，
成功：功能（数据）{
警报（数据）;
}，
}）;
和控制器功能：
// GET：字段/创建
公众的ActionResult的Create（）
{
VAR模型=新CreateFieldViewModel（）;
ViewBag.FieldTypeId =新的SelectList（db.FieldType，FieldTypeId，姓名）;
返回查看（模型）;
}// POST：字段/创建
[HttpPost]
[ValidateAntiForgeryToken]
公众的ActionResult创建（CreateFieldViewModel场，串[]坐标）
{ 如果（ModelState.IsValid）
{
field.Coordinates =坐标;
db.CreateFieldViewModel.Add（场）;
db.SaveChanges（）;
返回RedirectToAction（「指数」）;
} ViewBag.FieldTypeId =新的SelectList（db.FieldType，FieldTypeId，姓名，field.FieldTypeId）;
返回查看（场）;
}
解决方案
我的理解，（由你看code），你想要去与提交的形式，而不是阿贾克斯？
如果是这样，你有两个选择（知我）：
- 创建HTML隐藏输入并粘贴有作为标记阵列的价值序列化JSON - 但你必须在以后反序列化该值。在这个例子中，你需要改变模型中的字符串坐标式。
JavaScript的
//一些样本坐标，您需要从标记提取它们
VAR坐标=12,21，213231];
变种dataToSend = JSON.stringify（坐标）;
$（＃coordinatesInput）VAL（dataToSend）。
HTML
＆LT;输入隐藏标识=coordinatesInputNAME =model.CoordinatesVALUE =/＆GT;
<醇开始=2>
JavaScript的
VAR坐标= [231,2132，312231，231321];VAR容器= $（＃集装箱）;
//容器，在那里你将增加投入，例如你可能是形式，水平一流
coordinates.forEach（功能（VAL，I）{
container.append（'＆LT;输入隐名=model.Coordinates ['+ I +]VALUE =+ VAL +'＆GT;'）;
}）;
使用AJAX的当然是更好的方法，并AlexB答案是的路要走，但它的机制是有一点不同。这是好事，只使用AJAX（没有提交表单），因为在你的榜样，你需要使用两个动作，一个是AJAX，一个用于提交表单。
I want to create a field object in ASP.NET MVC and store it to a database. The field should contain its coordinates which the user can select with the google maps api. And now, how can I pass the coordinates of the markers, which are stored in a javascript array, to the Model´s List?
This is my Controller for this:
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 BL;
using MvcAgrarTest.Models;
namespace MvcAgrarTest.Controllers
{
public class FieldsController : Controller
{
private MvcAgrarContext db = new MvcAgrarContext();
// GET: Fields
public ActionResult Index()
{
var field = db.CreateFieldViewModel.Include(f => f.FieldType);
return View(field.ToList());
}
// GET: Fields/Create
public ActionResult Create()
{
var model = new CreateFieldViewModel();
ViewBag.FieldTypeId = new SelectList(db.FieldType, "FieldTypeId", "Name");
return View(model);
}
// POST: Fields/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(CreateFieldViewModel model, CreateFieldViewModel field, string[] markers)
{
if (ModelState.IsValid)
{
PostCoordinates(markers);
db.CreateFieldViewModel.Add(field);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.FieldTypeId = new SelectList(db.FieldType, "FieldTypeId", "Name", field.FieldTypeId);
return Json(true);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}
Here my Create View with the Google Maps script:
@model MvcAgrarTest.Models.CreateFieldViewModel
@{
ViewBag.Title = "Create";
}
<h2>Feld anlegen</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @placeholder = "Feldname", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.FieldTypeId, "Feldtyp", htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.DropDownList("FieldTypeId", null, "--Feldart auswählen--", htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.FieldTypeId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Size, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Size, new { htmlAttributes = new { @placeholder = "In Hektar", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Size, "", new { @class = "text-danger" })
</div>
</div>
<div id="google">
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(50.617109, 8.065738);
var myOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// array to store markers that has been drawn
var markers = [];
// event listener draw a marker
google.maps.event.addListener(map, 'click', function (e) {
var marker = new google.maps.Marker();
marker.setPosition(e.latLng);
marker.setMap(map);
marker.setVisible(true);
markers.push(marker);
// draw polygon on marker click
// once user clicks on on of the markers
google.maps.event.addListener(marker, 'click', function (e) {
document.getElementById("label").innerHTML = "";
drawPoints(markers);
label.style.borderStyle = "dotted"
for (i = 0; i < markers.length; ++i) {
document.getElementById("label").innerHTML += markers[i].position;
}
// empty the markers array
markers = [];
});
});
}
function drawPoints(markers) {
var poly = new google.maps.Polygon;
var points = [];
for (var i = 0; i < markers.length; i++) {
points.push(markers[i].getPosition());
}
poly.setMap(map);
poly.setPath(points);
poly.setVisible(true);
}
</script>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Erstellen" class="btn btn-default" />
</div>
</div>
</div>
}
and finally my ViewModel to create the field:
public class CreateFieldViewModel
{
[Key]
[Display(Name="ID")]
public int FieldId { get; set; }
[Required]
[Display(Name="Fieldname")]
public string Name { get; set; }
[Required]
[Display(Name="Fieldtype")]
public int FieldTypeId { get; set; }
[Required]
[Range(0.01, int.MaxValue, ErrorMessage = "The Size can´t be 0 or less")]
[Display(Name="Fieldsize")]
public float Size { get; set; }
[Display(Name="Coordinates")]
public List<string> Coordinates { get; set; }
public virtual FieldType FieldType { get; set; }
}
/edit: Id did it like this now, but it still doesn´t work
changed part from the google maps API:
var passdata = [];
google.maps.event.addListener(marker, "click", function(e){
for (y=0; y<markers.length; ++y){
passdata[y] = markers[y].position
}
drawpoints(markers);
$.ajax({
url: "@Url.Action("Create","Fields")",
typ: "POST",
datatype: "json",
data: JSON.stringify({coordinates: passdata}),
contentType: "application/json; charset=utf-8",
traditional: true,
success: function (data) {
alert(data);
},
});
And the Controller Function:
// GET: Fields/Create
public ActionResult Create()
{
var model = new CreateFieldViewModel();
ViewBag.FieldTypeId = new SelectList(db.FieldType, "FieldTypeId", "Name");
return View(model);
}
// POST: Fields/Create
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(CreateFieldViewModel field, string[] coordinates)
{
if (ModelState.IsValid)
{
field.Coordinates = coordinates;
db.CreateFieldViewModel.Add(field);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.FieldTypeId = new SelectList(db.FieldType, "FieldTypeId", "Name", field.FieldTypeId);
return View(field);
}
解决方案
I understood, (looking by you code) that you want to go with submitting form, and not ajax?
If so, you have two choices (known to me):
- Create html hidden input and paste there as value serialized JSON of your markers array - but you will have to deserialize this value later. In this example you need to change Coordinates type in your model to string.
JavaScript
// some sample coordinates, you need to extract them from markers
var coordinates = ["12,21","213,231"];
var dataToSend = JSON.stringify(coordinates);
$("#coordinatesInput").val(dataToSend);
HTML
<input hidden id="coordinatesInput" name="model.Coordinates" value=""/>
- Create dynamically, using JavaScript (for example append function) many hidden html inputs with name model.Coordinates[i] and value of single coordinate (use some loop).
JavaScript
var coordinates = ["231,2132","312,231","231,321"];
var container = $("#container");
//container, where you will be adding inputs, in you example it could be form-horizontal class
coordinates.forEach(function(val, i){
container.append('<input hidden name="model.Coordinates['+i+']" value="'+val+'">');
});
Of course using AJAX is much better way, and AlexB answer is way to go, but mechanism of it is a little different. It is good to use only AJAX (not form submitting), because in your example you need to use two Actions, one for AJAX and one for form submitting.
这篇关于如何通过一个javascript数组ASP.NET MVC模式呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
