將視圖中的數據傳遞給另一個視圖

-1

我有一個用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>

來源

2014-08-30 zlak

這是一個很大的代碼！我的理解是，您需要將圖像路徑傳遞迴您的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頁面將獲得該值。

來源

2014-08-30 10:37:09 cruellays

哇！非常感謝你！它完美的工作！我想我會永遠理解並學習。我發佈了所有代碼，因爲我經歷過我自己，如果我看到所有我可以輕鬆理解的代碼。謝謝！ – zlak 2014-08-30 12:55:20

如果這是你要找的東西，請將它標記爲答案:) – cruellays 2014-08-30 13:46:15

將視圖中的數據傳遞給另一個視圖

回答

相關問題