将视图中的数据传递给另一个视图
问题描述：
我有一个用ASP.NET MVC C＃编写的项目。我有一个问题。在Index.cshtml中声明并填充变量名称图片我必须传递存储在其中的值才能查看Object3D.cshtml以在此处使用。我该怎么做？下面是代码：将视图中的数据传递给另一个视图
ImageController.cs
using ImageView.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ImageView.Controllers
{
public class ImageController : Controller
{
//
// GET: /Image/
public ActionResult Index()
{
return View(new ImageModel());
}
public ActionResult Object3D()
{
return View();
}
}
}
ImageMetaData.xml
<?xml version="1.0" encoding="utf-8" ?>
<images>
<image>
<filename>2483--FIXED</filename>
</image>
<image>
<filename>6a</filename>
</image>
<image>
<filename>BARF SIDE</filename>
</image>
<image>
<filename>bullet</filename>
</image>
<image>
<filename>cap_s</filename>
</image>
<image>
<filename>dan and denise</filename>
</image>
<image>
<filename>dan redo1</filename>
</image>
<image>
<filename>DY Cross</filename>
</image>
<image>
<filename>finallast_cabochon 0065</filename>
</image>
<image>
<filename>Gye Nyame_Rim--FIXED</filename>
</image>
<image>
<filename>JS 040310 10,75 7,5mm__1</filename>
</image>
<image>
<filename>jsband</filename>
</image>
<image>
<filename>Moon sun stars Gents</filename>
</image>
<image>
<filename>new_SIGNET_(20MM) 0086</filename>
</image>
<image>
<filename>trendsetter001</filename>
</image>
<image>
<filename>Weddingband</filename>
</image>
</images>
ImageModel.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Xml.Linq;
namespace ImageView.Models
{
public class ImageModel : List<Image>
{
public ImageModel()
{
string directoryOfImage = HttpContext.Current.Server.MapPath("~/Images/");
XDocument imageData = XDocument.Load(directoryOfImage + @"/ImageMetaData.xml");
var images = from image in imageData.Descendants("image") select new Image(image.Element("filename").Value);
this.AddRange(images.ToList<Image>());
}
}
}
Image.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ImageView.Models
{
public class Image
{
public Image(string path)
{
Path = path;
}
public string Path { get; set; }
}
}
Index.cshtml
@model ImageView.Models.ImageModel
@{
ViewBag.Title = "Gallery";
Layout = "~/Views/Shared/_Layout.cshtml";
var picture="";
}
<html>
<head>
<title>Image Index</title>
<link rel="stylesheet" href="../Content/colorbox.css" />
<script src="../Scripts/jquery-1.7.1.js"></script>
<script src="../Scripts/jquery.colorbox.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<script>
$(document).ready(function() {
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({ rel: 'group1' });
$(".iframe").colorbox({ iframe: true, width: "90%", height: "90%" });
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h1>Images</h1>
</div>
<div class="row">
@foreach (var image in ViewData.Model) {
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail group1 iframe" href="@Url.Action("Object3D","Image")">
<img class="img-responsive" src="images/@String.Concat(@image.Path,".png")" alt="" />
</a>
<div class="caption">
<h3>@image.Path</h3>
<p>Text text text</p>
</div>
</div>
picture = @image.Path;
}
@ViewBag.Picture = picture;
</div>
</div>
</body>
</html>
Object3D.cshtml
@model ImageView.Models.ImageModel
@{
ViewBag.Title = "Index";
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3D Model</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../Scripts/three.min.js"></script>
<script src="../Scripts/STLLoader.js"></script>
<script src="../Scripts/Detector.js"></script>
<script src="../Scripts/stats.min.js"></script>
<script src="../Scripts/TrackballControls.js"></script>
</head>
<body>
@ViewBag.Picture
<script>
function onLoad() {
initScene();
function initScene() {
// Grab the canvas
var myCanvas = document.getElementById("myCanvas");
//Create a new renderer and set the size
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, canvas: myCanvas });
renderer.setSize(myCanvas.offsetWidth, myCanvas.offsetHeight);
//Create a new scene
scene = new THREE.Scene();
//Create a perspective camera
camera = new THREE.PerspectiveCamera(75, myCanvas.offsetWidth/myCanvas.offsetHeight, 1, 1000);
camera.position.z = 20;
//Add camera to the scene
scene.add(camera);
//Add controls for interactively moving the camera with mouse
controls = new THREE.TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.3;
controls.minDistance = 10;
controls.maxDistance = 100;
scene.add(new THREE.AmbientLight(0x777777));
//Add some lights
addShadowedLight(1, 1, 1, 0xffaa00, 1.35);
addShadowedLight(0.5, 1, -1, 0xffaa00, 1);
//The model's material
var material = new THREE.MeshPhongMaterial({ ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200 });
//Loading the object
var loader = new THREE.STLLoader();
loader.addEventListener('load', function (event) {
var geometry = event.content;
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(-13, -15, 0);
mesh.rotation.set(-Math.PI/2, 0, 0);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);
});
loader.load("../STLFiles/6a.stl");
//Call the animate function
animate();
}
//Function that adds the lights
function addShadowedLight(x, y, z, color, intensity) {
var directionalLight = new THREE.DirectionalLight(color, intensity);
directionalLight.position.set(x, y, z)
scene.add(directionalLight);
directionalLight.castShadow = true;
var d = 1;
directionalLight.shadowCameraLeft = -d;
directionalLight.shadowCameraRight = d;
directionalLight.shadowCameraTop = d;
directionalLight.shadowCameraBottom = -d;
directionalLight.shadowCameraNear = 1;
directionalLight.shadowCameraFar = 4;
directionalLight.shadowMapWidth = 1024;
directionalLight.shadowMapHeight = 1024;
directionalLight.shadowBias = -0.005;
directionalLight.shadowDarkness = 0.15;
}
//Function that animates the object
function animate() {
requestAnimationFrame(animate);
render();
}
//Function that draws the object
function render() {
controls.update(); //for cameras
renderer.render(scene, camera);
}
}
window.onload = window.onresize = function() { onLoad(); }
</script>
<canvas id="myCanvas" style="width: 100%; height: 100%;" ></canvas>
</body>
</html>
答
这是一个很大的代码！我的理解是，您需要将图像路径传递回您的Object3D方法，其中路径基于您从缩略图列表中选择哪个项目。
Index.cshtml
<div class="row">
@foreach (var image in ViewData.Model) {
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail group1 iframe" href="@Url.Action("Object3D","Image",new { path = image.Path })"> <-- pass parameter to action method
<img class="img-responsive" src="images/@String.Concat(@image.Path,".png")" alt="" />
</a>
<div class="caption">
<h3>@image.Path</h3>
<p>Text text text</p>
</div>
</div>
}
</div>
通知我用Url.Action("Object3D","Image",new { path = image.Path }。这是因为您分配@ViewBag.Picture = picture;的方式并未达到目的。它将永远是for-each循环的最后一个image.Path。
使用上面的方法也需要你期望从你的行动方法参数：
ImageController.cs
public ActionResult Object3D (string path)
{
ViewBag.Picture = path;
return View();
}
你可以从你的操作方法得到的路径，然后将其分配给ViewBag.Picture。然后Object3D.cshtml页面将获得该值。
哇！非常感谢你！它完美的工作！我想我会永远理解并学习。我发布了所有代码，因为我经历过我自己，如果我看到所有我可以轻松理解的代码。谢谢！ – zlak 2014-08-30 12:55:20
如果这是你要找的东西，请将它标记为答案:) – cruellays 2014-08-30 13:46:15