I am a noob to ASP.NET and MVC so please bear with me, and thank you in advance for the help! --
I am trying to link to a KML file that is stored in the application's root and I cannot get it to work, see below:
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '~/cngKml.kml'
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
It works when I point it to ther 'href' variable, but when I point it to the 'href2' variable it does not load anything.
The full index.cshtml is below:
#{
ViewBag.Title = "STI";
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/kml_example2.kml"));
}
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = '#path';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
<h2>#ViewBag.Message</h2>
</hgroup>
</div>
</section>
}
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
Resulting HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>STI</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">sti</p>
</div>
<div class="float-right">
<section id="login">
Hello, <a class="username" href="/Account/Manage" title="Manage">reecea</a>!
<form action="/Account/LogOff" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="J0EkwX2027gRZ-gDCvH1WMHGpGUnW-Sl2m3jEOpKw2684DUjjywYCFBQ9pPNfJ93pyJIZ9XH9HLMYdFNiVcHohtNsvKA1sIiKf3tL3EekGI1" /> Log off
</form>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>Admin</li>
<li>My Account</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>STI.</h1>
<h2>CNG Stations Map</h2>
</hgroup>
</div>
</section>
<section class="content-wrapper main-content clear-fix">
<head>
<title>CNG</title>
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script type="text/javascript">
var ge;
var placemark;
var kmlObject;
google.load("earth", "1", { "other_params": "sensor=false" });
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
var href = 'http://code.google.com/apis/earth/documentation/samples/kml_example2.kml';
var href2 = 'c:\\users\\reecea\\documents\\visual studio 2013\\Projects\\CngStationMap\\CngStationMap\\kml_example2.kml';
google.earth.fetchKml(ge, href2, kmlFinishedLoading);
}
function kmlFinishedLoading(obj) {
kmlObject = obj;
if (kmlObject) {
if ('getFeatures' in kmlObject) {
kmlObject.getFeatures().appendChild(placemark);
}
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView())
ge.getView().setAbstractView(kmlObject.getAbstractView());
}
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<div id="gearth">
<div id="map3d" style="width:960px; height:640px; align-self:center;"></div>
</div>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014 - STI</p>
</div>
</div>
</footer>
<script src="/Scripts/jquery-1.8.2.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"9f6ba0e6c2d041d29dcc37b58bbb4ef4"}
</script>
<script type="text/javascript" src="http://localhost:54165/39bfdebe74ed45968bc576a815347820/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Web.Config File:
<system.webServer>
<staticContent>
<remove fileExtension=".kml"/>
<mimeMap fileExtension=".kml" mimeType="application/vnd.google-earth.kml+xml"/>
</staticContent>
Try simply var href2 = '/cngKml.kml'
You can't use physical file paths for links (i.e. Server.MapPath("~/cngKml.kml")).
You can't use paths in client side code that the server needs to resolve either (i.e. "~/anything").
You can't declare a variable in C# and then use it in JavaScript like you attempted. In the case above, you'd need to at least use '#path' (though it still wouldn't work).
Also, please verify that navigating to a kml file on your web server will even work, as unknown file types typically aren't served up by IIS. If this is a problem, you can fix with a web.config entry similar to this SO post, more ref.
Try changing that:
var href2 = path;
to that:
var href2 = #path;
Without # char it is treated as simple JS variable
By the way, if you define variable in C# and then use it in JavaScript, don't forget to use HttpUtility.JavaScriptStringEncode:
string path = HttpUtility.JavaScriptStringEncode(HttpContext.Current.Server.MapPath("~/cngKml.km"));
Related
This is my _ViewStart.cshtml:
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
This is my _Layout.html:
<!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="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- Lots of tags for dependencies -->
</head>
<body>
<div class="container body-content">
#RenderBody()
<div class="divider row top-buffer"></div>
<footer>
<p>© #DateTime.Now.Year - MyApp</p>
</footer>
</div>
</body>
</html>
This is my Index.cshtml:
#Html.RenderApiEndpoints()
<script type="text/javascript" src="~/Content/index.js"></script>
<div ng-app="app">
<div ng-view ></div>
</div>
I am fetching Index.cshtml like:
public class HomeController : Controller
{
[Route("")]
public ActionResult Index()
{
return View();
}
}
Since I am using client-side routing with Angular $routeProvider, I am always in Index.cshtml. Furthermore, I don't need a Layout, I just need my Index.cshtml.
How can I avoid using a Layout-File and directly start with my Index.cshtml when going to localhost in browser?
You can make Layout null then you will just see Index.cshtml view
#{
Layout = null;
}
Use null layout in the following way:
#{
Layout = null;
}
I am having trouble with the React tutorial. After some help from stackoverflow I was able to get the server/API running, but now for some strange reason base.css is not loading.
base.css is in the css folder where it should be, and when I'm editing in Dreamweaver it automatically loads base.css just fine, so I'm really confused.
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<!-- Not present in the tutorial. Just for basic styling. -->
<link rel="stylesheet" href="css/base.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
)
}
});
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt"> This is one comment</Comment>
<Comment author="Jordan Walke"> This is another comment</Comment>
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>
The problem was I needed to add a leading slashing to the .css file reference.
became
The css was loaded and applied to the page.
I have a jsp page which includes a another jsp file which has a google map. But when I access the parent page the div in which the jsp file is included is getting a CSS property value "overflow: hidden" due to which the map is not shown.
Code for parent jsp:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" />
<script src="<%=request.getContextPath()%>/scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
function showHeatMap(){
$('#heatDiv').toggle(true);
$('#exportToCSVHeatMap').removeAttr('disabled');
$('#dummyFenceMap').style.overflow="visible";
}
</script>
</head>
<body>
<div id="heatMapDiv" style="display:none">
heat map
<div class="div-inline">
<div class="div-daily">From Date (MM/DD/YYYY)</div>
<input type="text" name="fromDateHM" id="datepicker4" class="input-inline" />
</div>
<div class="div-inline">
<div class="div-daily">To Date (MM/DD/YYYY)</div>
<input type="text" name="toDateHM" id="datepicker5" class="input-inline" />
</div>
<div id="buttonDiv">
<input type="button" value="Show Heat Map" onclick="showHeatMap()" />
<input type="button" value="Export To CSV" id="exportToCSVHeatMap" onclick="exportToCSVHeatMap()" disabled="disabled"/>
</div> <!-- buttonDiv -->
<div id="heatDiv" class="heat-map">
<div class="div-daily">Heat Map</div>
<div id="heatMap" style="display= block; width= 800px; height= 800px; "><jsp:include page="../jsp/dummyheatmap.jsp?name=test&id=1001"></jsp:include></div>
</div> <!-- footTraffic -->
</div> <!-- heatMapDiv -->
</body>
</html>
Included jsp file code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>dummy heat map</title>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#fenceMap { height: 50% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/* For Google Map.*/
function googleMapinitialize(){
var fenceAdd=new google.maps.LatLng(37.2146,121.5545);
var mapProp = {
center:fenceAdd,
zoom:30,
mapTypeId:google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("dummyFenceMap"),mapProp);
var geocoder = new google.maps.Geocoder();
var location = "2001 Gateway PI, San Jose, CA";
if(!geocoder) {
geocoder = new google.maps.Geocoder();
}
var geocoderRequest = {
address: location
};
var myCity = null;
var marker = null;
var infowindow = null;
geocoder.geocode(geocoderRequest, function(results, status) {
if (status =="" || status == google.maps.GeocoderStatus.ZERO_RESULTS){
alert("'" + location + "' not found!!!");
} else if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
fenceAdd = new google.maps.LatLng(results[0].geometry.location.hb,results[0].geometry.location.ib);
if (!marker) {
marker = new google.maps.Marker({
map: map,
raiseOnDrag:false,
draggable:true
});
marker.setPosition(results[0].geometry.location);
google.maps.event.addListener(marker,'click',function(){
if (!infowindow) {
infowindow = new google.maps.InfoWindow({
disableAutoPan:true,
maxWidth:100
});
}
var content = '<strong>' + results[0].formatted_address + '</strong>';
infowindow.setContent(content);
infowindow.setPosition(results[0].geometry.location);
infowindow.open(map, marker);
});
}
}
myCity = new google.maps.Circle({
center:fenceAdd,
radius:125,
strokeColor:"#0000ff",
strokeOpacity:0.1,
strokeWeight:0.1,
fillColor:"#0000ff",
fillOpacity:0.20,
map:map
});
google.maps.event.addListener(map, 'click', function(){
infowindow.close();
});
google.maps.event.addListener(map, 'dblclick', function(){
window.open("<%=request.getContextPath() %>/jsp/googleMapPopup.jsp?fenceAddress="+$('#haddr').val(),'ADDRESSMAP','height=400,width=600');
});
google.maps.event.trigger(map,'resize');
});
}
google.maps.event.addDomListener(window, 'load', googleMapinitialize);
</script>
</head>
<body onload="googleMapinitialize()">
<h1>Name : <%=request.getParameter("name")%> & id : <%=request.getParameter("id")%></h1>
<div id="dummyFenceMap" style="height=80%;border:1px solid #ff0000;overflow:visible;">
</div><!-- new-div-tag2 -->
<h1>Map end</h1>
</body>
</html>
The #heatMap div has a height of 2 / 11px and overflow: hidden. When I edit the overflow property to visible I see the google logo & map type
Can anyone help me what is wrong in my code?
I solved the issue by adding following style to the included JSP file's 'dummyFenceMap' div.
style="border:1px solid #ff0000;position:relative; left:150px; top:10px; width:500px; height:400px;padding-left:15px;padding-right:15px"
After adding the above style the Map is shown in the embedded JSP file.
But facing a new issue that is - the Google map is shown in 3/4th part of the div rest is blank. But when I resize the browser window the Google Map is redrawn properly. How to resolve this issue?
I am developing MVC application with Razor syntax.
I am trying to Slidetoggle the Div, means when I click one Div other div should be expanded.
Its work fine after loading, but why its already expanded when page loads ?
but in my application its already expanded/toggled.
How to solve this ?
#model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
#{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
#foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> #Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { #style = "color:#1A6690;" })</span>
#Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
#Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
#Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
The summary of the problem is, Div gets toggled before calling Jscript.
How to avoid it ?
set the divs that should be hidden to hidden with css. this way it will be closed and slide open when you toggle it.
I created a test project of MVC3,and the project has only one layout of razor.
In the Layout I use a jquery to create dynamic menus,I just want get the effect is when i clicked these menu ,it should return different partial views in the body segment,and the layout menu should remember the menu state i clicked on the layout page.
But the result is ,when i click the menus everytime ,the layout will render again,and the menu state will restore ,how to resolve the problem?
This is my code !!! Can anybody help me?Thanks!!!
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".sidebar1 dl dd").hide();
$(".sidebar1 dl dt").click(function () {
$(".sidebar1 dl dd").not($(this).next()).hide();
$(this).next().slideToggle(500);
});
});
</script>
</head>
<body>
<div class="container">
<div class="header"><img src="/Content/images/logo.png" alt="logo" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
<!-- end .header --></div>
<div class="sidebar1">
<dl class="nav">
<dt>aaaaa</dt>
<dd>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</dd>
<dt>aaaaa</dt>
<dd>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</dd>
</dl>
</div>
<div class="content">
#RenderBody()
</div>
</body>
</html>
you can specify the layout used on each page if needed.
If you dont want a layout just set it to null.
Put this at the top of the page:
#{
layout = null
}
user,
where you have:
<div class="content">
you need to change that to:
<div id="content">
you then need to target your partial views to update that div. This means that your controller actions should return PartialView(), rather than View(). Also, without worrying about any of the aforementioned, you could simply try changing your click function to:
$(function () {
$(".sidebar1 dl dd").hide();
$(".sidebar1 dl dt").click(function (e) {
$(".sidebar1 dl dd").not($(this).next()).hide();
$(this).next().slideToggle(500);
e.preventDefault();
return false;
});
});
there could be more required as you don't show the ajax code but I'm willing to bet that if you have followed standards in your ajax calls, then this will all resolve itself with the changes mentioned.