Question

我有一个用ASP.NET MVC C＃编写的项目。我有一个问题。在视图中声明Index.cshtml并填充变量名称 image ，我必须传递存储在其中的值以查看在那里使用的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>

Answer 1

这是很多代码！我的理解是您需要将图像路径传递回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页面将获得该值。

将数据从View传递到另一个视图

1 个答案: