I have a project written in ASP.NET MVC C#. I have a problem in it. In view Index.cshtml is declared and populated a variable name image and I must pass the values stored in it to view Object3D.cshtml to use there. How can I do it? Here is the code:
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>
This is a lot of code! What I understand is that you need to pass the image path back to your Object3D method where the path is base on which item you select from the list of thumbnail.
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>
Notice I use Url.Action("Object3D","Image",new { path = image.Path }. This is because the way you assigning the #ViewBag.Picture = picture; is not serving it's purpose. It will always be the last image.Path of the for-each loop.
Using the above way also requires you to expect parameter from your action method:
ImageController.cs
public ActionResult Object3D (string path)
{
ViewBag.Picture = path;
return View();
}
You can get the path from your action method and then you assign it to ViewBag.Picture. Then the Object3D.cshtml page will get the value.
Related
How to use asp:Repeater tag and then use data-binding expressions without declare Microsoft SQL Server database?
Because I ask question at link but I learn asp:Repeater tag article have to declare Microsoft SQL Server database in DataBind article.
I ask question to solve "How to use asp:Repeater tag and then use data-binding expressions without declare Microsoft SQL Server database."
Good news : I have answer to use asp:Repeater tag and then use data-binding expressions without declare Microsoft SQL Server database.
My full source code.
https://github.com/doanga2007/CheckLoopQR
Default.aspx (HTML Code)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CheckLoopQR.Default" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>QR Code Generator</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Please Input Data</label>
<div class="input-group">
<asp:TextBox ID="txtQRCode" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-prepend">
<asp:Button ID="btnGenerate" runat="server" CssClass="btn btn-secondary" Text="Generate" OnClick="btnGenerate_Click" />
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnSelect" runat="server" CssClass="btn btn-secondary" Text="Display Text" OnClick="btnSelect_Click" /><br /><br />
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:CheckBox ID="checkAll" runat="server" Font-Size="Large"/><asp:Label id="checkTextAll" runat="server" Font-Size="Large"></asp:Label><br /><br />
<asp:CheckBoxList ID="CheckBox1" runat="server" Border="1"
BorderColor="LightGray" Font-Size="Large"></asp:CheckBoxList>
</div>
</form>
</body>
</html>
Default.aspx.cs (C# Code)
using System;
using System.Drawing;
using System.IO;
using ZXing.Common;
using ZXing;
using ZXing.QrCode;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace CheckLoopQR
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.checkTextAll.Text = " Check All";
}
protected void btnSelect_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
long num = Convert.ToInt64(code);
int i;
for (i = 1; i < 4; i++)
{
num += i;
CheckBox1.Items.Add(new ListItem(" " + num));
}
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
if (CheckBox1.SelectedItem == null)
{
Response.Redirect("Default.aspx");
}
string[] texture = { "Selected Item Text1 : ", "Selected Item Text2 : ", "Selected Item Text3 : " };
int a = 0;
foreach (ListItem listItem in CheckBox1.Items)
{
if (listItem.Selected)
{
a++;
string code = listItem.Text;
CheckBox1.Visible = false;
checkAll.Visible = false;
checkTextAll.Visible = false;
QrCodeEncodingOptions options = new QrCodeEncodingOptions();
options = new QrCodeEncodingOptions
{
DisableECI = true,
CharacterSet = "UTF-8",
Width = 150,
Height = 150,
Margin = 0,
};
var barcodeWriter = new BarcodeWriter();
barcodeWriter.Format = BarcodeFormat.QR_CODE;
barcodeWriter.Options = options;
System.Web.UI.WebControls.Image imgBarCode = new System.Web.UI.WebControls.Image();
imgBarCode.Height = 150;
imgBarCode.Width = 150;
Label lblvalues = new Label();
lblvalues.Text += texture[a-1] + listItem.Text;
lblvalues.Font.Size = FontUnit.Large;
Label lblvalues2 = new Label();
lblvalues2.Text += texture[a-1] + listItem.Text;
lblvalues2.Font.Size = FontUnit.Large;
Label lblvalues3 = new Label();
lblvalues3.Text += texture[a-1] + listItem.Text;
lblvalues3.Font.Size = FontUnit.Large;
using (Bitmap bitMap = barcodeWriter.Write(code))
{
using (MemoryStream ms = new MemoryStream())
{
bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
byte[] byteImage = ms.ToArray();
imgBarCode.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(byteImage);
}
PlaceHolder1.Controls.Add(imgBarCode);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
PlaceHolder1.Controls.Add(lblvalues);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
PlaceHolder1.Controls.Add(lblvalues2);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
PlaceHolder1.Controls.Add(lblvalues3);
PlaceHolder1.Controls.Add(new HtmlGenericControl("br"));
}
}
else
{
//do something else
}
}
}
}
}
How coding to can for loop asp:RadioButton tag same as for loop asp:Label tag , Because I can for loop asp:Label tag with tutorial website
https://asp-net-example.blogspot.com/2008/12/aspnet-for-loop-example-using-for-loop.html
but I can't for loop asp:RadioButton tag same as for loop asp:Label tag.
Sample code at the bottom.
Default.aspx (HTML Code)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="QRCode_Demo.QRCode" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>QR Code Generator</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Please Input Data</label>
<div class="input-group">
<asp:TextBox ID="txtQRCode" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-prepend">
<asp:Button ID="btnGenerate" runat="server" CssClass="btn btn-secondary" Text="Generate" OnClick="btnGenerate_Click" />
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnSelect" runat="server" CssClass="btn btn-secondary" Text="Display Text" OnClick="btnSelect_Click" /><br /><br />
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder><br /><br />
<asp:RadioButton id="CheckBox1" runat="server" Font-Size="Large"></asp:RadioButton><asp:Label ID="checker" runat="server" Font-Size="Large"></asp:Label>
</div>
</form>
</body>
</html>
Default.aspx.cs (C# Code)
using System;
using System.Drawing;
using System.IO;
using ZXing.Common;
using ZXing;
using ZXing.QrCode;
namespace QRCode_Demo
{
public partial class QRCode : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSelect_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
for (int i = 1; i < 11; i++)
{
checker.Text += " " + code + "<br>";
}
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
CheckBox1.Visible = false;
checker.Visible = false;
QrCodeEncodingOptions options = new QrCodeEncodingOptions();
options = new QrCodeEncodingOptions
{
DisableECI = true,
CharacterSet = "UTF-8",
Width = 150,
Height = 150,
Margin = 0,
};
var barcodeWriter = new BarcodeWriter();
barcodeWriter.Format = BarcodeFormat.QR_CODE;
barcodeWriter.Options = options;
System.Web.UI.WebControls.Image imgBarCode = new System.Web.UI.WebControls.Image();
imgBarCode.Height = 150;
imgBarCode.Width = 150;
using (Bitmap bitMap = barcodeWriter.Write(code))
{
using (MemoryStream ms = new MemoryStream())
{
bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
byte[] byteImage = ms.ToArray();
imgBarCode.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(byteImage);
}
PlaceHolder1.Controls.Add(imgBarCode);
}
}
}
}
Good News , I found answer to can for loop asp:RadioButton tag same as for loop asp:Label tag (Answer code found at link).
Answer code at the bottom.
Default.aspx (HTML Code)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="QRCode_Demo.QRCode" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<h2>QR Code Generator</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Please Input Data</label>
<div class="input-group">
<asp:TextBox ID="txtQRCode" runat="server" CssClass="form-control"></asp:TextBox>
<div class="input-group-prepend">
<asp:Button ID="btnGenerate" runat="server" CssClass="btn btn-secondary" Text="Generate" OnClick="btnGenerate_Click" />
</div>
</div>
</div>
</div>
</div>
<asp:Button ID="btnSelect" runat="server" CssClass="btn btn-secondary" Text="Display Text" OnClick="btnSelect_Click" /><br /><br />
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder><br /><br />
<asp:RadioButtonList
ID="CheckBox1"
runat="server"
RepeatDirection="Vertical"
Border="1"
BorderColor="LightGray"
Font-Size="Large"></asp:RadioButtonList>
</div>
</form>
</body>
</html>
Default.aspx.cs (C# Code)
using System;
using System.Drawing;
using System.IO;
using ZXing.Common;
using ZXing;
using ZXing.QrCode;
using System.Web.UI.WebControls;
namespace QRCode_Demo
{
public partial class QRCode : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSelect_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
int i;
for (i = 1; i < 11; i++)
{
CheckBox1.Items.Add(new ListItem(" " + code));
}
}
protected void btnGenerate_Click(object sender, EventArgs e)
{
string code = txtQRCode.Text;
CheckBox1.Visible = false;
QrCodeEncodingOptions options = new QrCodeEncodingOptions();
options = new QrCodeEncodingOptions
{
DisableECI = true,
CharacterSet = "UTF-8",
Width = 150,
Height = 150,
Margin = 0,
};
var barcodeWriter = new BarcodeWriter();
barcodeWriter.Format = BarcodeFormat.QR_CODE;
barcodeWriter.Options = options;
System.Web.UI.WebControls.Image imgBarCode = new System.Web.UI.WebControls.Image();
imgBarCode.Height = 150;
imgBarCode.Width = 150;
using (Bitmap bitMap = barcodeWriter.Write(code))
{
using (MemoryStream ms = new MemoryStream())
{
bitMap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);
byte[] byteImage = ms.ToArray();
imgBarCode.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(byteImage);
}
PlaceHolder1.Controls.Add(imgBarCode);
}
}
}
}
You see, I have a problem. I have configured my file "BundleConfig.cs" to minify my styles and scripts in production. At this moment I am in the development environment. My application had some performance problems by the dependencies. At first I had pages and called unnecessary resources, such as style sheets and / or scripts, now I am correcting that. In this stage I have had a problem that I can not skip since a day ago. My Customers page (list of them) is having problems loading, which does not happen with my Dashboard; obviously they use the same Layout (Master Page). I think it's something referring to my call to JQUERY but I still do not get the answer. My project is made with ASP .NET MVC 5 and I use Visual Studio 2015. It would be great if they helped me. Thank you very much.
White screen in one of views with the same layout
BundleConfig.cs
using System.Web;
using System.Web.Optimization;
namespace Acisac
{
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
/* ----------------------------------- CSS ------------------------------------------ */
StyleBundle bootstrapCSS = new StyleBundle("~/css/bootstrap");
bootstrapCSS.Include("~/Content/bootstrap.min.css");
//bootstrapCSS.Include("~/Content/template/tether/tether.min.css");
StyleBundle mainCSS = new StyleBundle("~/css/mainCSS");
mainCSS.Include("~/fonts/css.css");
mainCSS.Include("~/Content/template/main.css");
//mainCSS.Include("~/Content/template/animate.min.css");
StyleBundle fontsCSS = new StyleBundle("~/css/fonts");
fontsCSS.Include(
"~/fonts/css.css",
"~/fonts/font-awesome-icons.min.css",
"~/fonts/ionicons-icons.min.css",
"~/fonts/material-design-iconic-font.min.css",
"~/fonts/other-fonts.css"
);
StyleBundle materiagrisCSS = new StyleBundle("~/css/materiagris");
materiagrisCSS.Include("~/Content/materiagris/materia03.css");
materiagrisCSS.Include("~/Content/materiagris/materia1.css");
materiagrisCSS.Include("~/Content/materiagris/materia02.css");
StyleBundle chartsCSS = new StyleBundle("~/css/charts");
chartsCSS.Include("~/Content/template/charts/chartist.min.css");
StyleBundle footableCSS = new StyleBundle("~/css/footable");
footableCSS.Include("~/Util/footable/footable.bootstrap.min.css");
bundles.Add(fontsCSS);
bundles.Add(bootstrapCSS);
bundles.Add(materiagrisCSS);
bundles.Add(mainCSS);
bundles.Add(chartsCSS);
bundles.Add(footableCSS);
/* ----------------------------------- JS scripts ------------------------------------------ */
/***************************************JQUERY***************************************/
ScriptBundle jqueryJS = new ScriptBundle("~/js/jquery");
jqueryJS.Include("~/Scripts/jquery.min.js");
/***************************************BOOTSTRAP***************************************/
ScriptBundle bootstrapJS = new ScriptBundle("~/js/bootstrap");
bootstrapJS.Include("~/Scripts/template/pluginsGenerales/tether.min.js");
bootstrapJS.Include("~/Scripts/bootstrap.min.js");
/***************************GENERALES PARA TODA LA APLICACIÓN***************************/
ScriptBundle mainJS = new ScriptBundle("~/js/mainJS");
mainJS.Include("~/Scripts/template/pluginsGenerales/jquery.storageapi.min.js");
mainJS.Include("~/Scripts/template/pluginsGenerales/jquery.fullscreen.min.js");
mainJS.Include("~/Scripts/template/pluginsGenerales/pace.min.js");
mainJS.Include("~/Scripts/template/pluginsGenerales/wow.min.js");
mainJS.Include("~/Scripts/template/scriptsGenerales/main.js");
mainJS.Include("~/Scripts/template/scriptsGenerales/colors.js");
mainJS.Include("~/Scripts/template/scriptsGenerales/functions.js");
mainJS.Include("~/Scripts/template/scriptsGenerales/left-sidebar.js");
mainJS.Include("~/Scripts/template/scriptsGenerales/navbar.js");
mainJS.Include("~/Scripts/materiagris/materiagris1/comboBoxes.js");
mainJS.Include("~/Scripts/materiagris/materiagris2/Validacion.js");
/***********************************CASOS ESPECÍFICOS***********************************/
//GRAFICOS
ScriptBundle chartsJS = new ScriptBundle("~/js/charts");
chartsJS.Include(
"~/Scripts/template/charts/Chart.min.js",
"~/Scripts/template/charts/chartist.min.js",
"~/Scripts/template/charts/charts-chartist.js",
"~/Scripts/template/charts/jquery.easypiechart.min.js",
"~/Scripts/template/charts/lodash.min.js"
);
//FOOTABLE
ScriptBundle footableJS = new ScriptBundle("~/js/footable");
footableJS.Include("~/Util/footable/footable.min.js");
footableJS.Include("~/Util/utilitarios.js");
/****************************************LOGIN****************************************/
ScriptBundle loginJS = new ScriptBundle("~/js/login");
loginJS.IncludeDirectory("~/Scripts/template/login", "*.js");
/**************************************DASHBOARD**************************************/
ScriptBundle dashboardJS = new ScriptBundle("~/js/dashboard");
dashboardJS.Include("~/Scripts/materiagris/materiagris4/diagramaBarras.js");
dashboardJS.Include("~/Scripts/materiagris/materiagris4/crudInicio.js");
/***************************************VENTAS***************************************/
ScriptBundle cotizacionJS = new ScriptBundle("~/js/cotizacion");
cotizacionJS.Include("~/Scripts/materiagris/materiagris2/ConsultasAjax.js");
ScriptBundle ordenVentaJS = new ScriptBundle("~/js/ordenVenta");
ordenVentaJS.Include("~/Scripts/materiagris/materiagris2/ConsultasAjax.js");
ordenVentaJS.Include("~/Scripts/materiagris/materiagris2/crudOrdenVenta.js");
ScriptBundle facturacionJS = new ScriptBundle("~/js/facturacion");
facturacionJS.Include("~/Scripts/materiagris/materiagris1/crudFacturacion.js");
//ScriptBundle guiaVentasJS = new ScriptBundle("~/js/guiaVentas");
//guiaVentasJS.Include("~/Scripts/materiagris/materiagris[#]/crudGuia.js");
/**************************************ALMACEN**************************************/
ScriptBundle guiaAlmacenJS = new ScriptBundle("~/js/guiaAlmacen");
guiaAlmacenJS.Include("~/Scripts/materiagris/materiagris3/crudGuia.js");
//ScriptBundle productoAlmacenJS = new ScriptBundle("~/js/productoAlmacen");
//productoAlmacenJS.Include("~/Scripts/materiagris/materiagris[#]/crudProductoAlmacen.js");
ScriptBundle notaIngresoJS = new ScriptBundle("~/js/notaIngreso");
notaIngresoJS.Include("~/Scripts/materiagris/materiagris3/crudNotaIngreso.js");
ScriptBundle notaSalidaJS = new ScriptBundle("~/js/notaSalida");
notaSalidaJS.Include("~/Scripts/materiagris/materiagris3/crudNotaSalida.js");
/**************************************COMPRAS**************************************/
//ScriptBundle ordenCompraJS = new ScriptBundle("~/js/ordenCompra");
//ordenCompraJS.Include("~/Scripts/materiagris/materiagris[#]/crudOrdenCompra.js");
/**************************************CUENTAS**************************************/
ScriptBundle reciboJS = new ScriptBundle("~/js/recibo");
reciboJS.Include("~/Scripts/materiagris/materiagris1/crudRecibo.js");
ScriptBundle convenioJS = new ScriptBundle("~/js/convenio");
convenioJS.Include("~/Scripts/materiagris/materiagris2/agregarConvenio.js");
//convenioJS.Include("~/Scripts/materiagris/materiagris[#]/crudConvenio.js");
/***********************************MANTENIMIENTO***********************************/
ScriptBundle clienteJS = new ScriptBundle("~/js/cliente");
clienteJS.Include("~/Scripts/materiagris/materiagris1/crudCliente.js");
clienteJS.Include("~/Scripts/materiagris/materiagris2/ContactoNuevo.js");
clienteJS.Include("~/Scripts/materiagris/materiagris2/DireccionNuevo.js");
ScriptBundle proveedorJS = new ScriptBundle("~/js/proveedor");
proveedorJS.Include("~/Scripts/materiagris/materiagris3/crudProveedor.js");
ScriptBundle empleadoJS = new ScriptBundle("~/js/empleado");
empleadoJS.Include("~/Scripts/materiagris/materiagris4/crudEmpleado.js");
ScriptBundle almacenJS = new ScriptBundle("~/js/almacen");
almacenJS.Include("~/Scripts/materiagris/materiagris1/crudAlmacen.js");
ScriptBundle anaquelJS = new ScriptBundle("~/js/anaquel");
anaquelJS.Include("~/Scripts/materiagris/materiagris1/crudAnaquel.js");
ScriptBundle familiaJS = new ScriptBundle("~/js/familia");
familiaJS.Include("~/Scripts/materiagris/materiagris3/crudFamilia.js");
ScriptBundle productoMantenimientoJS = new ScriptBundle("~/js/productoMantenimiento");
productoMantenimientoJS.Include("~/Scripts/materiagris/materiagris1/crudProducto.js");
clienteJS.Include("~/Scripts/materiagris/materiagris2/AgregarCaracteristica.js");
ScriptBundle marcaJS = new ScriptBundle("~/js/marca");
marcaJS.Include("~/Scripts/materiagris/materiagris3/crudFamilia.js");
ScriptBundle unidadJS = new ScriptBundle("~/js/unidad");
unidadJS.Include("~/Scripts/materiagris/materiagris1/crudUnidad.js");
ScriptBundle cambioJS = new ScriptBundle("~/js/cambio");
cambioJS.Include("~/Scripts/materiagris/materiagris1/crudTipocambio.js");
ScriptBundle impuestoJS = new ScriptBundle("~/js/impuesto");
impuestoJS.Include("~/Scripts/materiagris/materiagris3/crudFamilia.js");
/***********************************TRANSPORTE***********************************/
ScriptBundle etransporteJS = new ScriptBundle("~/js/etransporte");
etransporteJS.Include("~/Scripts/materiagris/materiagris1/crudEmpresaTransporte.js");
//ScriptBundle vehiculoJS = new ScriptBundle("~/js/vehiculo");
//vehiculoJS.Include("~/Scripts/materiagris/materiagris[#]/crudVehiculo.js");
//ScriptBundle conductorJS = new ScriptBundle("~/js/conductor");
//conductorJS.Include("~/Scripts/materiagris/materiagris[#]/crudConductor.js");
/***********************************REPORTES***********************************/
//ScriptBundle reporteJS = new ScriptBundle("~/js/reporte");
//reporteJS.Include("~/Scripts/materiagris/materiagris[#]/crudReporte.js");
/********************************G. DE USUARIOS********************************/
//ScriptBundle perfilJS = new ScriptBundle("~/js/perfil");
//perfilJS.Include("~/Scripts/materiagris/materiagris[#]/crudPerfil.js");
//ScriptBundle usuarioJS = new ScriptBundle("~/js/usuario");
//usuarioJS.Include("~/Scripts/materiagris/materiagris[#]/crudUsuario.js");
/***********************************CONFIGURACION***********************************/
//ScriptBundle empresaJS = new ScriptBundle("~/js/empresa");
//empresaJS.Include("~/Scripts/materiagris/materiagris[#]/crudEmpresa.js");
//ScriptBundle serieJS = new ScriptBundle("~/js/serie");
//serieJS.Include("~/Scripts/materiagris/materiagris[#]/crudSerie.js");
//ScriptBundle bancoJS = new ScriptBundle("~/js/banco");
//bancoJS.Include("~/Scripts/materiagris/materiagris[#]/crudBanco.js");
bundles.Add(jqueryJS);
bundles.Add(bootstrapJS);
bundles.Add(mainJS);
bundles.Add(chartsJS);
bundles.Add(footableJS);
bundles.Add(loginJS);
bundles.Add(dashboardJS);
bundles.Add(cotizacionJS);
bundles.Add(ordenVentaJS);
bundles.Add(facturacionJS);
//bundles.Add(guiaVentasJS);
bundles.Add(guiaAlmacenJS);
//bundles.Add(productoAlmacenJS);
bundles.Add(notaIngresoJS);
bundles.Add(notaSalidaJS);
//bundles.Add(ordenCompraJS);
bundles.Add(reciboJS);
bundles.Add(convenioJS);
bundles.Add(clienteJS);
bundles.Add(proveedorJS);
bundles.Add(empleadoJS);
bundles.Add(almacenJS);
bundles.Add(anaquelJS);
bundles.Add(familiaJS);
bundles.Add(productoMantenimientoJS);
bundles.Add(marcaJS);
bundles.Add(unidadJS);
bundles.Add(cambioJS);
bundles.Add(impuestoJS);
bundles.Add(etransporteJS);
//bundles.Add(vehiculoJS);
//bundles.Add(conductorJS);
//bundles.Add(reporteJS);
//bundles.Add(perfilJS);
//bundles.Add(usuarioJS);
//bundles.Add(empresaJS);
//bundles.Add(serieJS);
//bundles.Add(bancoJS);
}
}
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ACISAC - #ViewBag.Title</title>
<link rel="icon" href="~/Assets/icon/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="~/Assets/icon/favicon.ico" type="image/x-icon">
<!-- CSS -->
#Styles.Render("~/css/fonts")
#Styles.Render("~/css/bootstrap")
#Styles.Render("~/css/mainCSS")
#Styles.Render("~/css/materiagris")
<!-- ------ -->
<!-- SCRIPTS -->
#Scripts.Render("~/js/jquery")
#Scripts.Render("~/js/bootstrap")
#Scripts.Render("~/js/mainJS")
<!-- ------ -->
</head>
<body data-layout="empty-layout" data-palette="palette-6" data-direction="none">
<div class="main">
<!--header-->
#Html.Partial("_header")
<div class="clearfix"></div>
<!--content-->
#RenderBody()
<div class="clearfix"></div>
<!--footer-->
#Html.Partial("_footer")
</div>
</body>
</html>
Dashboard.cshtml
-controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AcisacWeb.CrossCutting.Dominio.Entidades;
using AcisacWeb.Web.Core.Mantenimiento;
using AcisacWeb.Web.Core.Inicio;
using Acisac.Helper;
using Acisac.Tags;
namespace Acisac.Controllers
{
public class InicioController : Controller
{
string username = Helper.SessionHelper.getUsernameUser();
TipocambioCore TipocambioCore = new TipocambioCore();
UsuarioCore UsuarioCore = new UsuarioCore();
[Autenticado]
public ActionResult Dashboard()
{
TIPO_CAMBIO TIPO_CAMBIO = new TIPO_CAMBIO();
TIPO_CAMBIO.NESTADO = TipocambioCore.ObtenerEstado("2")[0].NESTADO;
return View(TIPO_CAMBIO);
//return View();
}
}
}
-view:
#model AcisacWeb.CrossCutting.Dominio.Entidades.TIPO_CAMBIO
#{
ViewBag.Title = "Dashboard";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Styles.Render("~/css/charts")
<!--fila de 4 paneles-->
<div class="row">
...
</div>
<script>
function CargaModal() {
tipoCambio = '#Model.NESTADO';
if (tipoCambio == 0) {
$('#myModal').modal('show');
}
};
</script>
#Scripts.Render("~/js/charts")
#Scripts.Render("~/js/dashboard")
Clientes.cshtml
-controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using AcisacWeb.CrossCutting.Dominio.Entidades;
using AcisacWeb.Web.Core.Mantenimiento;
using Acisac.Tags;
using AcisacWeb.CrossCutting.Dominio.ViewModels;
namespace Acisac.Controllers
{
[Autenticado]
public class MantenimientoController : Controller
{
string username = Helper.SessionHelper.getUsernameUser();
AlmacenCore AlmacenCore = new AlmacenCore();
AnaquelCore AnaquelCore = new AnaquelCore();
FamiliaCore FamiliaCore = new FamiliaCore();
ClienteCore ClienteCore = new ClienteCore();
ContactoclienteCore ContactoclienteCore = new ContactoclienteCore();
DireccionclienteCore DireccionclienteCore = new DireccionclienteCore();
TransporteCore TransporteCore = new TransporteCore();
TipopersonaCore TipopersonaCore = new TipopersonaCore();
ProductoCore ProductoCore = new ProductoCore();
TipocambioCore TipocambioCore = new TipocambioCore();
UnidadCore UnidadCore = new UnidadCore();
TipoproductoCore TipoproductoCore = new TipoproductoCore();
TipomonedaCore TipomonedaCore = new TipomonedaCore();
TipodocumentopersonaCore TipodocumentopersonaCore = new TipodocumentopersonaCore();
TipodireccionCore TipodireccionCore = new TipodireccionCore();
ProveedorCore ProveedorCore = new ProveedorCore();
MarcaCore MarcaCore = new MarcaCore();
ImpuestoCore ImpuestoCore = new ImpuestoCore();
PaisCore PaisCore = new PaisCore();
EmpleadoCore EmpleadoCore = new EmpleadoCore();
UbigeoCore UbigeoCore = new UbigeoCore();
CaracteristicaCore CaracteristicaCore = new CaracteristicaCore();
ProveedorDatosBancariosCore ProveedorDatosBancariosCore = new ProveedorDatosBancariosCore();
ProveedorContactoCore ProveedorContactoCore = new ProveedorContactoCore();
ProveedorDireccionesCore ProveedorDireccionesCore = new ProveedorDireccionesCore();
SedesCore SedesCore = new SedesCore();
AreasCore AreasCore = new AreasCore();
CargosCore CargosCore = new CargosCore();
public ActionResult Clientes(string PDFINICIO, string PDFFIN)
{
List<CLIENTE> clientes = new List<CLIENTE>();
if (String.IsNullOrEmpty(PDFINICIO) && String.IsNullOrEmpty(PDFFIN))
{
clientes = ClienteCore.Listar();
return View(clientes);
}
if (!(String.IsNullOrEmpty(PDFINICIO)) && !(String.IsNullOrEmpty(PDFFIN)))
{
clientes = ClienteCore.Filtrar(Convert.ToDateTime(PDFINICIO), Convert.ToDateTime(PDFFIN));
return View(clientes);
}
if (String.IsNullOrEmpty(PDFINICIO) || String.IsNullOrEmpty(PDFFIN))
{
if (String.IsNullOrEmpty(PDFINICIO))
{
PDFINICIO = DateTime.Now.AddMonths(-2).ToString("yyyy-MM-dd");
clientes = ClienteCore.Filtrar(Convert.ToDateTime(PDFINICIO), Convert.ToDateTime(PDFFIN));
return View(clientes);
}
else
{
PDFFIN = DateTime.Now.ToString("yyyy-MM-dd");
clientes = ClienteCore.Filtrar(Convert.ToDateTime(PDFINICIO), Convert.ToDateTime(PDFFIN));
return View(clientes);
}
}
else
{
return View(clientes);
}
}
}
}
-view:
#model IEnumerable<AcisacWeb.CrossCutting.Dominio.Entidades.CLIENTE>
#{
ViewBag.Title = "Clientes";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row-lg col-md-12">
<!--cabecera-->
<div class="row">
<h3 class="color-default">Clientes</h3>
<hr />
</div>
...
</div>
<!-- </div> /.main -->
<!-- DETALLE modal -->
<div aria-hidden="true" aria-labelledby="large-modalLabel" class="modal fade" id="DETALLE_CLIENTE" role="dialog" tabindex="-1">
...
</div>
<!-- ELIMINAR modal -->
<div class="modal fade" id="ELIMINAR_CLIENTE" tabindex="-1" role="dialog" aria-labelledby="small-modalLabel" aria-hidden="true">
...
</div>
<!-- -->
#*#Scripts.Render("~/js/cliente")*#
I need to save canvas image by using ajax or javascript...!!
tks!
my view
#using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
{
<canvas id="myCanvas" width="352" height="352"
style="border: 1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<input type="hidden" name="imageData" id="imageData"/>
<input type="button" id="btnSave" value="Save Drawing"/>
}
[HttpPost]
public ActionResult SaveImage(CampaignViewModel model, string imageData)
{
//code.....
return RedirectToAction("Index", "Home");
}
We in ImindQ Online export the canvas as PNG with the following adapted code for your scenario:
In view:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Image</title>
</head>
<body>
<div>
#using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
{
<canvas id="myCanvas" width="352" height="352"
style="border: 1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<input type="hidden" name="imageData" id="imageData" />
<input type="button" id="btnSave" value="Save Drawing" />
}
<script>
(function () {
document.getElementById('btnSave').addEventListener('click', function () {
var r = new XMLHttpRequest();
r.open("POST", "SaveImage", true);
r.onreadystatechange = function () {
if (r.readyState != 4 || r.status != 200) return;
};
var p = document.getElementById('myCanvas').toDataURL('image/png').replace('data:image/png;base64,', '');
r.send(p);
});
})();
</script>
</div>
</body>
</html>
in Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
namespace WebApplication2.Controllers
{
//public class CampaignViewModel
//{
// public string ImageData { get; set; }
//}
public class CampaignController : Controller
{
// GET: Campaign
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult SaveImage()
{
int len = (int)Request.InputStream.Length;
byte[] buffer = new byte[len];
int c = Request.InputStream.Read(buffer, 0, len);
string png64 = Encoding.UTF8.GetString(buffer, 0, len);
byte[] png = Convert.FromBase64String(png64);
System.IO.File.WriteAllBytes("d:\\a.png", png);
//string pngz = Encoding.UTF8.GetString(png, 0, png.Length);
//code.....
return RedirectToAction("Index", "Home");
}
//
}
}
in view :
#using (Html.BeginForm("SaveImage", "Campaign", FormMethod.Post, new { id = "drawingForm" }))
{
<canvas id="myCanvas" width="352" height="352"
style="border: 1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<input type="hidden" name="imageData" id="imageData"/>
<input type="button" onclick="saveimage(event)" id="btnSave" value="Save Drawing" />
<img style="display: none" src="images/ajax-loader/ajax-loader.gif" id="progressbar"/>
}
#*call action*#
<script>
function saveimage(event) {
#*prevent call back to server*#
event.preventDefault();
#*show progress bar *#
var progress = document.getElementById("progressbar");
$(progress).css('display', 'block');
#*get form data *#
var data = $("#drawingForm").serialize();
#*save image information to imageData tag *#
var image = document.getElementById("myCanvas").toDataURL("image/png");
image = image.replace('data:image/png;base64,', '');
$("#imageData").val(image);
#*make ajax call *#
$.ajax({
url: "/Campaign/SaveImage",
data: data,
type: "Post",
dataType: "Json",
success: function (data) {
//do something
},
error: function (xhr, status, error) {
//do something
},
complete: function (data) {
$(progress).css('display', 'none');
}
});
}</script>
and in controller :
[HttpPost]
public ActionResult SaveImage(CampaignViewModel model, string imageData)
{
//path of folder taht you want to save the canvas
var path = Server.MapPath("~/images/canvaseimg");
//produce new file name
var fileName = GetPictureName(path);
//get full file path
var fileNameWitPath = Path.Combine(path, fileName);
//save canvas
using (var fs = new FileStream(fileNameWitPath, FileMode.Create))
{
using (var bw = new BinaryWriter(fs))
{
var data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
fs.Close();
}
//do somthing with model
return RedirectToAction("Index", "Home");
}
I have routes names in my dropdownlist and arrays with lat/log (polylines) with correspondence by event. How to send this lat/log from code behind to javascript?
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
function GetMap() {
// Initialize the map
var mapOptions = {
credentials: "xxxx",
center: new Microsoft.Maps.Location( 9.74, 2.425),
mapTypeId: Microsoft.Maps.MapTypeId.road,
zoom: 13,
showScalebar: false
}
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), mapOptions);
var lineVertices = new Array(new Microsoft.Maps.Location(<%#new pts%>));
var line = new Microsoft.Maps.Polyline(lineVertices);
map.entities.push(line);
}
</script>
<style type="text/css">
#form1
{
width: 480px;
}
</style>
<body onload="GetMap();" style="height: 18px; width: 480px">
<form id="form1" runat="server">
<div id='listDiv' style="width:480px; height:30px" >
<asp:DropDownList ID="listPicker" runat="server" Height="25px" Width="218px"
onselectedindexchanged="listPicker_SelectedIndexChanged">
</asp:DropDownList>
</div>
<div id='mapDiv' style="position:absolute; width:480px; height:740px; top: 38px; ">
</div>
</form>
protected void listPicker_SelectedIndexChanged(object sender, EventArgs e)
{
if (listPicker.SelectedIndex == 1)
{
pts = new double[,] {
{ 9.6990549318566, 2.4374476373222},
{ 9.6991218770296, 2.4379291260322},
{ 9.6994116428257, 2.4376508334228},
{ 9.6995069262757, 2.4356545805958},
{ 9.6999728977379, 2.4356384873417},
{ 9.6999845469968, 2.4326612353352},
{ 9.7056459228308, 2.432768526198},
{ 9.7088142924775, 2.4295498753801},
{ 9.7228377868168, 2.4293138409868},
{ 9.7228098349562, 2.4276401425615}};
}else{...}
}
There is a way to send this points to js?
You can try
Dim oGeocodeList As New List(Of [String])()
oGeocodeList.Add(" '37.968002524107035, 23.702445030212402' ")
oGeocodeList.Add(" '37.969, 23.705445030212402' ")
oGeocodeList.Add(" '37.97, 23.709445030212402' ")
Dim geocodevalues = String.Join(",", oGeocodeList.ToArray())
ClientScript.RegisterArrayDeclaration("locationList", geocodevalues)
and in javacrtipt
var locationList;
I am sorry for the vb code.