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.
Related
I have created a simple Bootstrap3 layout and want to use blaze templates in meteor but the content from my template is always rendered after my HTML structure.
Here is the code:
<head>
<title>demo app</title>
</head>
<body>
{{#Layout template="mainLayout"}}
{{#contentFor region="main-content"}}
This is the main content area
{{/contentFor}}
{{/Layout}}
</body>
<template name="home">
{{welcomeText}}
</template>
<template name="mainLayout">
<div class="container">
<div class="row">
<div class="col-sm-6">LOGO</div>
<div class="col-sm-6">LOGIN BUTTONS</div>
</div><!-- /header row -->
<div class="row">
<div class="col-sm-12">
<!-- navigation -->
</div>
</div><!-- /nav row -->
<div class="row">
<div class="col-sm-12">
{{> yield region="main-content"}}
</div>
</div><!-- /content row -->
</div><!-- /container -->
</template>
The JavaScript:
if (Meteor.isClient) {
Template.home.welcomeText = function () {
return "Welcome to my site.";
};
}
When I run this, the Bootstrap3 structure works fine but welcomeText is rendered underneath the container.
It seems that I overlooked to pass layoutTemplate option to my iron router route - now it works.
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'm writing a profile page with TwiBoo (2.3.2) composed of a row, a span7 for the person projects, then a span5 for buttons:
<div class="row-fluid">
<div class="span7 profile-left">
<h4><?= $this->lang->line('profile_your_pjts') ?></h4><br>
<!-- THUMB PROGETTI -->
<ul class="thumbnails">
<?php foreach($list_pjt as $progetto): ?>
<li class="span4 pjt-thumb">
<div class="thumbnail">
<!-- PROJECT DATA FROM PHP/MYSQL -->
</div>
</li>
<?php endforeach; ?>
</ul>
</div>
<div class="span5">
<h4>BUTTONS</h4>
<!-- SUBSCRIPTION DATA -->
<!-- BUTTONS -->
</div>
</div>
This is the result:
The problem comes when I add more thumbnails and goes to a new line, where instead of 3 per line I only get 2 from second line on:
I tried fixing the left-margin with plain css but just moves ALL the thumbs left keeping the same problem. Any idea on why?
I think wrapping your thumbnail divs (every 3 of them) in a row will make the trick.
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.
I am a generic markup which I load at runtime froma file as follows:
<div id="pagewidth" >
<div id="header" > Head </div>
<div id="wrapper" class="clearfix" >
<div id="twocols" class="clearfix">
<div id="column2" > Main Content Column </div>
<div id="column3" > right Column </div>
</div>
<div id="column1" > Left Column </div>
Footer
I want to add this to a place holder control in asp.net web page. How do I do it?
Add the html string to an asp:Literal control and then add the literal control to the placeholder's control collection.