I wonder how to input #section in the partial view in Razor view. Is that possible or I must put it in a view only?
Thanks.
Why not try just creating a partial view that has all the javascript and css you want and just rendering that partial view in the layout? I don't think you need sections to get that done. The point to sections is to tell full views that they can have specific sections just for them and that the partial views won't force them to look like anything.
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
#Html.Partial("_HeaderLinksAndScripts")
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<div id="menucontainer">
#Html.Partial("_MenuPartial")
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
this is a footer
</div>
</div>
#Html.Partial("_FooterScripts")
</body>
</html>
Just put the site-wide css and javascripts in the appropriate partial views.
Put your scripts in that partial view not in a section (since you cant do #section in a partial) OR simply put them in your main layout and control their rendering conditionally.
Related
I am a beginner at web development and I am now using semantic-ui framework for my font-end development.I have tried the sample code for the first example menu at this link.
http://semantic-ui.com/collections/menu.html
But my menu don't change active state on click like this.I have tried $("..").menu() method and it shows $(..).menu is not a function.I wonder if you could help me please.Shall I have to write my custom Javascript code to change active state on click or on hover.
Here is my code
<!DOCTYPE html>
<html lang="">
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="Semantic-UI-master/dist/semantic.min.css">
<script src="Semantic-UI-master/dist/semantic.min.js"></script>
<style>
</style>
</head>
<div class="ui three item menu">
<a class="item">Editorials</a>
<a class="item">Reviews</a>
<a class="item active">Upcoming Events</a>
</div>
</html>
Use this:
$('.ui .item').on('click', function() {
$('.ui .item').removeClass('active');
$(this).addClass('active');
});
Although not directly answering the initial question, I think it's worth pointing out that any dropdown-style menu will depend on the dropdown javascript. So for example, the following menu:
<div class="ui top attached menu">
<div class="ui dropdown icon item">
<i class="wrench icon"></i>
<div class="menu">
<div class="item">
item text here...
</div>
</div>
</div>
</div>
Will need to be accompanied by:
$('.ui.dropdown').dropdown();
You can also just put simple in the menu class:
<div class="ui simple three item menu">
Probably not going about this correctly, but I have an ASP page using Razor and I'm trying to figure out how I can make it so when a user clicks a link in my navigation bar it only changes the main section... I've tried using helpers with the target="mainSection" parameter, but it gives me an error on the Click but that just gives me a runtime error saying " Cannot find '/' application"
Probly missing something stupid...
my _Layout:
<div id="content">
<!-- BANNER -->
<div id="banner">
#RenderSection("Banner")
</div>
<!-- NAVIGATION -->
<div id="navigation">
#RenderSection("Navigation")
</div>
<!-- MAIN DISPLAY -->
<div id="main">
#RenderBody()
</div>
<!-- FOOTER -->
<div id="footer">
#RenderSection("Footer")
</div>
I just want to change the "main" div to whatever page cooresponds with whatever link is clicked.
I was trying to include an HTML file in another HTML File div like follows,
<body>
<form action="#" method="post">
<div class="container">
<div class="sidebar">
<!-- Do not insert any tags here -->
</div>
<div class="contentbody">
<div class="titlearea">
<div class="userprofile"></div>
<div class="pageheading">
<h1>Page Heading</h1>
</div>
</div>
<div class="formarea">
<!-- This is where I have to put the html page which contains a navigatin menu-->
<!--#include virtual="menuset1.html" -->
</div>
</div>
</div>
</form>
But when I run it on chrome it doesn't show up (menuset1), when I test it on dreamweaver it appears from behind of all elements and not in the correct position, Please guide me on this.
I think you should use jquery like,
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
....
....
<script>
$(function(){
$(".formarea").load("menuset1.html");
});
</script>
Or use PHP like,
<div class="formarea">
<?php
include('menuset1.html');
?>
</div>
Read php inclusion of files
I've got an application in jQuery Mobile. Every time a page is shown, some JavaScript must be executed to hide/show some elements (depending on the session state).
I've spent lots of time on this and cannot figure out why the JavaScript is not hiding the elements as expected, it sometime does it, sometime not. It seems a bit random. The DOM in fact seems consistent. The element that should be hidden have display: none and those visible have display: block, however it doesn't match what can be seen in the browser.
I managed to reduce the issue down to a very simple case. It's pretty much the basic boilerplate template with my added JavaScript:
page1.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 2
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
page2.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page Title</h1>
<div id="el1">ELEMENT 1</div>
<div id="el2">ELEMENT 2</div>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
PAGE 1
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
test.js
$(document).bind("pagechange", function(event, data) {
console.info('Changed to page: ' + data.toPage.attr('id'));
$('#el1').hide();
$('#el2').show();
});
You can easily test it by putting these three files on a local server. page1.html and page2.html are pretty much the same pages (just for testing), and test.js just hide #el1 and show #el2. This JavaScript is always executed successfully when the page is changed (the console statement always shows up), however #el1 is sometime hidden, sometime not, when it should always be hidden.
And again, what puzzles me the most, is that everything seems correct if I look at the DOM directly (in Chrome console). The CSS is clearly display: none, yet the element is still visible.
Any idea what could be causing this issue?
A couple of things you might try.
Use on instead of bind. Perhaps you are binding to the the document and the document is changing, loosing the bind. Using on should be able to get rid of this.
Use on directly on the page:
$('#page1').on('pagechange', function() {});
I am using 960 grid system with container_12. The issue is I am using 2 grid_6 col and text is overlapping. When I try setting the overflow property to auto I get a scrolling panel but the text does not shift on the next line after the width.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 href="css/960.css" rel="stylesheet" type="text/css" />
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />
<link href="css/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="body" class="container_12">
<div id="header" class ="grid_12">This is header</div>
<div id="nav" class="grid_3">
Navigation
<ul>
<li>Google</li>
<li>yahoo</li>
<li>bing</li>
</ul>
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
</div>
<div class="grid_9" >
<div id="content">
<h1>Content</h1>
<p>The premise of the system is ideally suited to rapid prototyping,
but it would work equally well when integrated into a production environment.
There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.</p></div></div>
</div>
</form>
</body>
</html>
Problem here-:
<p>dcjkldsjfkdjkljdsklvjkjvkdjkfljdskfjkdsjfkldjsfkjdksjkfjkd</p>
Make sure you have only one level of grids inside containers, eg:
<div class="container_12">
<div class="grid_6"></div>
<div class="grid_6"></div>
</div>
If you want to add padding to your content areas, add an extra div inside the grids, don't add padding to the grids themselves, ie.
<div class="container_12">
<div class="grid_6"><div class="space"></div></div>
<div class="grid_6"><div class="space"></div></div>
</div>
I had the same problem. I had a "grid_3" and i put dummy content in there, but it kept spilling out of the div. I also just copied and pasted a word end to end to see what it looked like. I went back and added spaces between the words and it works perfectly. Doesn't expand outside of the div, it stops and expands vertically. What kind of bug or glitch is that in 960?