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.
Related
I have a very large tree menu that will always be the same. Is it possible to create a custom css attribute (I don't know the technical term) so I can create the menu in an html file and only type a few characters in every page's source code to make the appear? Something like this:
// index.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing><!-- Nav menu appears here --></css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
// page_style.css
body {
body stuff
}
css_nav_thing {
src: (url="menu.html")
position: stuff;
margin: stuff'
}
.content_div {
position: stuff;
margin: stuff;
andstuf: stuff;
}
// nav_menu_style.css
body {
stuff: stuff;
]
a {
color: #374;
andstuff: stuff;
}
// content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
// some_other_content_page.html
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<css_nav_thing>
<!-- Nav menu appears here -->
</css_nav_thing>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Or can we do this with a <link src="menu.html" /> tag???
Is this possible to make adding the same menu to a bunch of pages easier than copy/pasting all of the menu's li's and ul's in to every single page? The site I'm building's going to have hundreds of pages. Hooray if I can make it easier and faster to do if this is possible!
If it is possible...how would I do it?
Use Jquery
menu.html
<html>
<head>
<link type="text/css" src="nav_menu_style.css" />
<script src="nav.js"></script>
</head>
<body>
<div class="nav">
<li>'s and <ul>'s that create the links for a navigation menu </li>'s and </ul>'s
</div>
</body>
</html>
some_other_content_page.html
<html>
<head>
</head>
<body>
<div id="includedContent"></div>
//some_other_content_page.html content
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("menu.html");
});
</script>
</body>
</html>
Download Jquery
.load() documentation
I would name your menu menu.php then you can do below. This always works for me and you can always do this on any separated slides or gallery or whatever really you want to insert inside a particular page.
<html>
<head>
<title>Example of what I mean></title>
<link type="text/css" src="page_style.css" />
</head>
<div class="navigation_div">
<--THIS IS WHERE YOUR MENU GO-->
<?php include 'menu.php';?>
</div>
<div class="content_div">content stuff here</div>
</body>
</html>
Can I get an array that contains references to the fields in a form (like input, textarea, etc.) and in my code run a function on them, like addClass()?
To explain what I want to do - after the user submits the form (and invokes the submit() function in the controller) I want to add a red border color on the invalid input.
ng-class="{'has-error':form.input.$invalid}"
But this isn't working
You can add a condition on your input like ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.val={};
});
.has-error{
border-color:red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="angular.js#1.5.x" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="Hazmat" ng-model="val.type" required ng-class="{'has-error':myForm.$submitted&&myForm.Hazmat.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.Hazmat.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>
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"));
when i click on a button in parent window a pop up which is in hidden div tag must be displayed in the iframe that is loaded in the page....i dont understand where i have gone wrong so please help me out
<html>
<head>
<title>The iframe</title>
<SCRIPT TYPE="text/javascript">
<!--
function popup(mylink, windowname)
{
if (! window.focus)return true;
var href;
if (typeof(mylink) == 'string')
href=mylink;
else
href=mylink.href;
window.open(href, windowname, 'width=400,height=200,scrollbars=yes');
return false;
}
//-->
</SCRIPT>
</head>
<body>
<div id="popup"style="visibility:hidden;"><strong><h1>POPUP</strong></h1>
<A
HREF="inframe.html"
onClick="return popup(this, 'notes')">click me</A>
</div>
<body>
</html>
i need to display an image only after a button click in asp.net mvc2
but i am getting it even before click as well as after click
can someone give me a solution as to why this is happenning??
Try something on the lines of:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
<button>Show it</button>
<img src="url" style="display: none" />
<script>
$("button").click(function () {
$("img").show("slow");
});
</script>
</body>
</html>
http://api.jquery.com/show/