I am working on a razor pages project that needs to view IFC files, so I converted the IFC file into Wexbim files to use the XbimWebUi library.
My problem is when I use the Wexbim file from wwwroot I get this error "Uncaught Failed to fetch binary data from the server. Server code: 404. This might be due to the CORS policy of your browser if you run this as a local file.", so I uploaded my file to Cloudinary website and got a link for it and it works well.
My question is how to do this throughout wwwroot folder without using an external link.
Thanks in advance.
My Code
<html>
<head>
<title>xViewer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="~/Viewer/gl-matrix.js"></script>
<script src="~/Viewer/jquery.js"></script>
<script src="~/Viewer/webgl-utils.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-product-type.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-state.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-shaders.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-model-geometry.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-model-handle.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-binary-reader.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-triangulated-shape.debug.js"></script>
<script type="text/javascript" src="~/Viewer/xbim-viewer.debug.js"></script>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
}
canvas {
display: block;
border: none;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<canvas id="viewer"></canvas>
<script type="text/javascript">
var viewer = new xViewer('viewer');
/*viewer.load("~/Uploads/SampleHouse.wexBIM");*/
viewer.load("https://res.cloudinary.com/amostafah/raw/upload/v1623564775/SampleHouse_uacu4j.wexbim");
viewer.start();
</script>
</div>
</body>
</html>
The problem is actually related to Mime Mappings.
All you need is:
app.UseStaticFiles(new StaticFileOptions
{
ServeUnknownFileTypes = true
});
You can check by accessing the path where you hold the wexbimfiles directly and serving a .png file from that folder. If you get it then the path is fine.
If you get 404 when accessing http://localhost:58802/data/SampleHouse.wexbim, then this is mime type related.
Related
I have a bit of Jquery code the expands a tree menu and MVC 5 app and when I hard code the style in the view it works. However I want to place the code in the CSS file I have the others in, but when I move it in there it only seems to partially work.
view file the controller is calling:
#model List<OrwellFrontEnd.Models.SiteMenu>
#{
ViewBag.Title = "Simple";
}
#section AddCustomStylesToHead{
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
}
#section Treeview
{
<section class="Treeview">
<div class="container body-content">
<h2>Simple Treeview from Database Data</h2>
<div style="border:solid 1px black; padding:10px; background-color:#FAFAFA">
<div class="treeview">
#if (Model != null && Model.Count() > 0)
{
<ul>
#TreeviewHelper.GetTreeView(Model, Model.FirstOrDefault().ParentMenuID)
</ul>
}
</div>
</div>
</div>
</section>
}
#* Here We need some Jquery code for make this treeview collapsible *#
#section Scripts{
<script>
$(document).ready(function () {
$(".treeview li>ul").css('display', 'none'); // Hide all 2-level ul
$(".collapsible").click(function (e) {
e.preventDefault();
$(this).toggleClass("collapse expand");
$(this).closest('li').children('ul').slideToggle();
});
});
</script>
}
<p> It is body of Index view that renders in BodyRender.</p>
Style code that is now in ~/Content/Site.css
/*Here We will add some css for style our treeview*/
.collapse {
width: 15px;
background-image: url('../Contetn/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -36px -17px;
display: inline-block;
cursor: pointer;
}
.expand {
width: 15px;
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
background-repeat: no-repeat;
background-position: -50px -17px;
display: inline-block;
cursor: pointer;
}
.treeview ul {
font: 14px Arial, Sans-Serif;
margin: 0px;
padding-left: 20px;
list-style: none;
}
.treeview > li > a {
font-weight: bold;
}
.treeview li {
}
.treeview li a {
padding: 4px;
font-size: 12px;
display: inline-block;
text-decoration: none;
width: auto;
}
And below is the layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("AddCustomStylesToHead"))
{
#RenderSection("AddCustomStylesToHead", required: false)
}
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
#RenderSection("Treeview", required: false)
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
It's probably a mess now as been trying to tinker. It seems to sort of work as if I change with width or padding and other attributes in the Treeview li/ui of the style it does affect the page, but the image isn't displaying when it is in the css file but works fine when I have it in the view directly.
Thanks,
Rob
I doubt you can use "head" in that view - You're editing inside the body already.
You can use the below solution unless you're using a partial view.
In the layout-page, add a new section:
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#if (IsSectionDefined("AddCustomStylesToHead"))
{
#RenderSection("AddCustomStylesToHead", required: false)
}
</head>
...
Then in your views, you can use the following to add additional css:
#section AddCustomStylesToHead{
<link href="#Url.Content("~/Content/MyPage.css")" rel="stylesheet" type="text/css" />
}
Update
From the comments, and your updated question, it is clearly a problem with relative paths and/or css.
So, a few fixes:
Only keep one of the links to "Site.css" in your _Layout. I would keep the one with #Url.Content. Also you can remove the code I suggested you to add, since that was not your issue at all (remove from both _Layout and the view).
Possible Wrong relative path:
background-image: url('../Content/Images/ui-icons_454545_256x240.png');
Should, probably, be (if you have "Images" in it's own folder, directly under to project root):
background-image: url('../Images/ui-icons_454545_256x240.png');
If you have the image-folder as a subfolder to "Content" though, this would work:
background-image: url('Images/ui-icons_454545_256x240.png');
Spelling error:
url('../Contetn/Images/ui-icons_454545_256x240.png');
But that will resolve itself if you "correct" the paths.
Remove empty style:
.treeview li {}
It's just not needed.
One last thing, since I noticed you use Bootstrap. If there is a conflict in styles between your css and bootstraps, the bootstrap style will win. For example I suspect that ".collapse" is a bootstrap style, so yours will be overwritten.
To change this you can put your link to "Site.css" after Bootstraps (in the head _Layout). Bootstrap might still overwrite certain things, but at least you have a bigger chance of "winning".
I am trying to hide and show text boxes using jquery. But when I select the ajax library from c# solution explorer script folder, I am not getting expected output but when I use the CDN library it works. How to set this library to get expected output?
<%# Page Language="C#" AutoEventWireup="true" CodeFile="~/Default.aspx.cs"
Inherits="WebApplication1._Default" %>
<!DOCTYPE html>
<html>
<head>
<%--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>--%>//it works fine
<script src="Scripts/jquery-1.4.1-vsdoc.js"></script>//not works
<script src="Scripts/jquery-1.4.1.js"></script>//not works
<script src="Scripts/jquery-1.4.1.min.js"></script>//not works
<script>
$(function () {
$('input[name="type"]').on('click', function () {
var name, comp;
if ($(this).val() == 'Experienced') {
$('#txtname').show();
$('#txtcomp').show();
$('#Label1').show();
$('#Label2').show();
}
else {
$('#txtname').hide();
$('#txtcomp').hide();
$('#Label1').hide();
$('#Label2').hide();
}
});
});
</script>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
width: 132px;
}
</style>
</head>
Myself found answer for my question.If in future anybody face this type of error they can use this method.what I do to solve this issue I downloaded Microsoft jquery libraries. Here are the links
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7-vsdoc.js
now add 3 new jquery items into your solution explore and named as jquery-1.7.js,jquery-1.7.min.js and jquery-1.7-vsdoc.js.Now Open above links in a new tab and copy whole content and save according to the jquery folder name.after that add this libraries into your project
<head>
<script src="jquery-1.7-vsdoc.js"></script>
<script src="jquery-1.7.js"</script>
<script src="jquery-1.7.min.js"></script>
</head>
Thank you. All the best :)
I created jquery popup dialog and asp.net dropdownlist control in my aspx page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" ></script>
<script src="//code.jquery.com/ui/1.10.0/jquery-ui.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function () {
$('#div_popup').dialog({
resizable: true,
height: 300,
width: 300,
position: 'center',
zIndex: 10000
});
});
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" type="text/css" />
<style type="text/css" >
#div_dropdownlist
{
margin-left : 50%;
margin-top : 50%;
z-index: -1;
}
#div_popup
{}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_dropdownlist">
<asp:DropDownList runat="server" ID="ddlList" Width="200px"></asp:DropDownList>
</div>
<div id="div_popup">
My test Popup
</div>
</form>
</body>
</html>
My purpose is to show jquery dialog popup over every other controls when you drag it over other controls.
Everything work well in every browsers but IE6.
I tried css zIndex. But it has no effect in IE6.
So, please let me know how I can make it correct in IE6.
Updated
I changed my div popup style to
#div_popup
{
z-index: 10000;
}
and I had changed my jquery dialog css style to
$('#div_popup').dialog({
...
zIndex: 10000
});
But in IE6, that jquery popup cannot display over asp.net dropdown list box when I drage over that control.
For your reference , here is my_source_code.
As mentioned in http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
There is an ie bug and the select boxes shows on top.
I would hide the select box as suggested or use an shim for ie6.
I'm developing a mapping application (VS2008 C#) and have my map window (Esri ADF MapControl) displayed within my main aspx.
I'm now compiling a print template with another aspx page which will display and print the current map from the main aspx.
Normally I'd use a Frame tag to dispay the main aspx in my print template however I'm just interested in copying over the map DIV.
You can try do it using jquery:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Footer navigation:</b>
<div id="mydiv"></div>
<script>
$("#mydiv").load("mypage.html");
</script>
</body>
</html>
Source: http://api.jquery.com/load/
I want to drag and drop simple div with text, and also resize it, when I drop it.
I have to use jQuery, but I never works with it.
Right know I have like this code in Head content:
<script src="Scripts/jquery.ui.draggable.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#d1").draggable();
});
</script>
also
<div id="d1" style="width:100px; height:100px;">
<p>Move This Div</p>
</div>
At first I want try to move this div, but can't move it, I don't know why?After that I want to try drop it on table, and resize it.Please can u provide some usefull examples or your own examples.Thank u
P.S.Actually I should move controls of ASP.NET Web Form on table
you need to load jquery library first, so the code will look something like that:
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.core.js" type="text/javascript"></script>
<script src="Scripts/jquery.ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#d1").draggable();
});
</script>
Here is a small example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#d1").draggable();
$("#droppable").droppable({
drop: function (event, ui) {
$(this).width(ui.draggable.width());
$(this).height(ui.draggable.height());
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="d1" style="width:100px; height:100px; border: solid 1px silver;">
<p>Move This Div</p>
</div>
<table border="1">
<tr>
<td id="droppable" style="width: 200px; height: 200px;">
One
</td>
</tr>
</table>
</form>
</body>
</html>