I have used the Asp.net MVC 5 Razor and angularjs.
Now my view have the layout .That layout contains top and side menu bar.
So when the view load i got nested page top and side bar in the ng-view.How do i resolve this.
If i was tried with another one root view and removed the layout.that was
worked fine.but when i hit F5 loaded the action alone.Master content is missed
_Layout.cshtml
<header ng-include="'/Partials/TopNavbar'" class="topnavbar-wrapper"></header>
<!-- sidebar-->
<aside ng-include="'/Partials/Sidebar'" ng-controller="SidebarController" class="aside"></aside>
<!-- offsidebar-->
<aside ng-include="'/Partials/Offsidebar'" class="offsidebar"></aside>
<!-- Main section-->
<section>
<!-- Page content-->
<div ui-view="" autoscroll="false" ng-class="app.viewAnimation" class="content-wrapper">
Tested
<div ui-view="" data-autoscroll="false" class="wrapper">
#Styles.Render("~/bundles/bootstrapStyles")
#Styles.Render("~/bundles/appStyles")
#RenderBody()
#Scripts.Render("~/bundles/baseScripts")
#Scripts.Render("~/bundles/appScripts")
</div>
</div>
</section>
<!-- Page footer-->
<footer ng-include="'/Partials/Footer'"></footer>
View
#{
// This is requried for AngularJS because we have to send only the view markup (not within the layout)
Layout = "~/Views/Shared/_Layout.cshtml";}
<small>Subtitle</small>
<div class="row">
<div class="col-lg-12">
testing A blank template
</div>
</div>
This view has refered the layout.
So while page load the Master content loaded perfectly.but when the ng-view load again the master content loaded like nested.
Related
I use Handlebars for a simple Node.js project and I would like to insert more than just few variables in a partial.
I have a layout that contains the very basic frame of my html page (html and head tags). The pages I render are usually all the same and contain the following code:
{{> default/header
help_title="This is the title of my help modal."
help_body="<p>This is the body.</p>"
}}
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
<!-- THE CONTENT THERE -->
</div>
</div>
</div>
</main>
{{> default/footer}}
Depending on the page itself, I may want not to display the header and/or the footer (and I remove the line consequently).
My need: I'd like to wrap the main part in a partial (because everything but the <!-- THE CONTENT THERE --> is invariant) or whatever could do the job and providing to it not only few words (like in the header) but potentially a lot of html code. And I cannot find a way to do it in the documentation. Something like this, that would basically work a bit like layouts:
{{> default/main
<!-- THE RAW HTML CONTENT THERE -->
}}
Handlebars supports exactly what you are describing in the form of partial blocks. The default behavior of partial blocks is to render default content if the partial cannot be found. However, there is a special built-in helper, #partial-block which will inject content into your partial.
From the documentation:
This block syntax may also be used to pass templates to the partial, which can be executed by the specially named partial, #partial-block.
Inside your partial, you will add {{> #partial-block }} where you want the content to be injected. In your case, your "main" partial would look like:
<main class="vertical-center">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-12 col-lg-8 justify-content-center align-items-center">
{{> #partial-block }}
</div>
</div>
</div>
</main>
Then, the page that is calling the "main" partial would do using the block syntax with the content that is to be injected into the partial put inside of block tags:
{{#> main}}
<p>THE RAW HTML CONTENT HERE</p>
{{/main}}
I have created a fiddle for your reference.
I was wondering if anyone has any idea how to do the following.
I want to show all the Brands on the site on a grid on a brands page, similar to how products are shown by default but showing brands (the image & name within a panel) that can be clicked through to take users to that brand page.
I had it working for a second but due to thinking it had failed. I changed the Site settings/code and now I cant remember how to get it back to working.
EDIT:
<div id="Container">
%%Panel.Header%%
<div class="bannerimg">
%%Panel.WrapperBanner%%
</div>
<div class="SideBar"><!-- This is desktop only -->
%%Panel.SideShopByBrand%%
</div>
<div id="Wrapper">
<div class="ContentHead CatHead Center">
%%SNIPPET_CategorySortBox%%
<h1 class="title">%%GLOBAL_PageTitle%%</h1>
%%Panel.PageBreadcrumb%%
</div>
<div class="Content Widest" id="LayoutColumn1">
%%Panel.PageContent%%
TEST
%%Panel.GetInTouch%%
</div>
<div class="clear"></div>
</div>
%%Panel.Footer%%
</div>
The "TEST" string is where I had been trying to add various bits of code to pull in all the brands but most of the time when I add any of that code it breaks the page and nothing loads on a page refresh.
It should be enough to just upload an image for the brands (on /admin/index.php?ToDo=viewBrands page) and it should automatically appear on /brands page.
I can't get glyphicons to show up. Currently, a small square shows up instead of the glyphicon. I've tried moving folders, etc. I didn't do custom bootstrap - I just downloaded the whole thing, so there shouldn't be any errors/anything missing. Here's my code:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Welcome!</h2>
<p>
</p>
</div> <!-- heading div -->
</div> <!-- row -->
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="interests">
<span class="glyphicon glyphicon-camera">
</span>
<h4>People</h4>
</div> <!-- interests divs -->
</div> <!-- column divs -->
</div> <!-- row -->
</div> <!-- container -->
Am I missing something at the top that needs to be included to get the fonts to show up? In the head, I have a link to the bootstrap.min.css - should I be linking to anything else?
I'm guessing its's not showing for 2 possible reasons:
1. You have not installed the fonts
2. You have not added the font folder hence bootstrap cannot load the glyphicons.
fonts----a folder containing fonts
css------a folder containing bootstrap css files.
index.html-----this file should link to the href="css/bootstrap.css" which intern calls the fonts files
You may check the following images (2 images).
Or, you can check those fonts.
https://github.com/twbs/bootstrap/tree/master/dist/fonts
Hope it helps.
I've started my asp.net WebPages site using the "Starter Site" template. It contains a layout page, _SiteLayout.cshtml, that is referenced in Default.cshtml.
In _SiteLayout, there is this HTML:
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"></p>
</div>
It originally had one of the images that "came with" the site instead of "something.png" but since I did not see the original image in the browser when I ran it, I changed it first to ~/Images/orderedList7.png and then to "something.png" in an attempt to raise an err msg or warning. But no! Tolerance, your name is html! (or is it vice-versa?).
At any rate, why am I not seeing the image specified in the layout file when I run the site?
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><img src="~/Images/something.png" /></p>
</div>
Try that, you are using an anchor instead of an image tag.
I create my pages using multi page template, I read that only start page(e.g index.aspx) still remain in Dom in each pages when loading. but now in my other page(e.g child.aspx) which is a child of page parent.aspx, I can see dom element of parent.aspx page.
the breadcrumb is as follow: Index--->parent--->child, maybe I should see only the index dom content not parent. this make me wonder why the page is like this and how I can handle it.Thanks
update:
I just want to reload every page on each showing, I mean clearing the DOM completely and loading content from the beginning. Like when you push ctrl+f5 and load page without cache. Is this possible in JQM?
Index.aspx:
<form id="form1" runat="server" dir="rtl">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
<uc2:MblMyMessageBox ID="MblMyMessageBoxInfo" runat="server" ShowCloseButton="true" />
<div data-role="page" id="home">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li data-icon="false">AccountStatus</li>
<li data-icon="false">ConfirmPayment</li>
</ul>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
AccountStatus.aspx:
<div data-role="page" id="accountStatus">
<div data-role="header">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="false">
<li data-icon="false">balance</li>
<li data-icon="false">invoice</li>
</ul>
</div><!-- /content -->
<div data-role="footer">
<p>back</p>
</div><!-- /footer -->
</div><!-- /page -->
removing content of index from accountStatus page dom element is my purpose.
All pages that the user has navigated to will be added to the dom. See the documentation. However jQM also has a mechanism to keep the DOM from getting to big and slowing down the browser. It may or may not remove old elements from the DOM.
I would advice you not to trust on DOM elements getting removed automatically. If you really want to remove the page you are navigating away from, you can bind for example the following:
$(document).one("pageshow",function(){
$(document).one("pagehide",function(){
$("#pageId").remove();
});
});
Where pageId is the id you give to the <div data-role="page" id="pageId">.
Edit for the updated question:
To reload the whole page when following links:
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax.
Instead, these links will cause a full page refresh with no animated
transition.
Source: jQuery Mobile Docs
Or you can change it with the following global variable:
$.mobile.ajaxEnabled = false;