Building a site using ASP.NET MVC 4.5, and using twitter's bootstrap-responsive. I noticed that on re-sizing the page, anything rendered by the _Layout view covers what I have rendered using the #RenderBody() statement. Is there any way to correct this?
I can't say for sure, but your problem probably isn't a consequence of #RenderBody. #RenderBody renders the content of your page that isn't in a section. The issue is probably a consequence of which twitter-bootstrap classes style the layout.
All I can do it point you to http://twitter.github.io/bootstrap/scaffolding.html (until the abbreviated html code is included).
Related
As the title implies, I need solid SEO and thus I need to have all the HTML loaded on my site on initial load. However, because the backend is written in PHP, and because it would be more work to write my Vue components with the server in mind, I don't want to use server-side rendering (SSR).
That leaves me with the option to send HTML over the wire, the "old school" way. What I am thinking of doing is writing each page's HTML like normal, but make one of the root html elements a Vue element in order to "upgrade" it. So the initial load downloads the finalized HTML, with all the data (tables, lists, etc already populated), but then after all the scripts are loaded, javascript can take over to make things easier and give a better UI experience. This poses a few questions, however:
Am I limited to a single component, the root? It'd be nice to still have many sub-components that would each have their own state. Perhaps inline templates can be used somehow?
Vue templates have their own templating system, like the mustache braces for displaying variables {{ myVar }}. Will I not be able to use them? The one way I can think of is to create a Vue template (that can be loaded from an external script) that is identical to the part of the HTML that it "takes over". The downside is that I'd have to maintain that component both in the original HTML and in the vue template.
Are there any good examples of what I'm trying to accomplish here?
Edit: I want to clarify that I'm aware I can put in various components here and there throughout the page. This still poses the question of how to make those components already start out rendered. Better yet would be to turn the whole page into Vue, much like an SPA.
I need solid SEO and thus I need to have all the HTML loaded on my site on initial load.
This is not entirely true. Google (80% of search traffic) easily parses SPAs now, so SSR purely for SEO isn't required anymore.
But to answer your question in general, you should check out Laracast's Vue.js series. They go in-depth on how to use PHP with Vue.js (including templating and variables).
I'd ask what it is you want to achieve with Javascript/Vue.js in your page. If everything is already rendered in PHP, does Vue provide a simple UX enhancement or takes over most of the page's heavy lifting (navigation, etc.)? If you have no reactive data and want Vue to simply be a controller for rendered components, then knock yourself out, although it might be approaching an 'overkill' scenario.
Have you looked into Prerender SPA Plugin ( https://github.com/chrisvfritz/prerender-spa-plugin )?
It is offered in the Vue documentation as a viable alternative to server side rendering ( https://v2.vuejs.org/v2/guide/ssr.html#SSR-vs-Prerendering )
Recently I've developed a multi-page application using Vue, here is how i tried to solve the SEO (Maybe this can help you ):
Htmls of header and footer (and other main common components) are packed to the page.html(eg: home.html, search.html).
Script and style are of header and footer imported in page.js(eg: home.js, search.js).
Add div.seo-zone to page.html's div#app, which includes the main SEO data(using some h1,h2,p,div and so on), and add
.seo-zone {
display: none;
}
in your css.
4. Make sure your app's root component's el is '#app'(each page's main content can be a Vue app).
Develop your app as usual.
After Vue rendered, the div.seo-zone will be replaced with your Vue components (although it can not be seen)
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.
In mvc project,recently I am working on project's performance improvement.I am facing problem for loading layout page.when I am rendering or changing page it should load only content on page,not the layout page.so, I want solution to render my content pages without loading of Layout page.
Set the Layout property of the content pages/views as null on which you don't want the layout page to be loaded.
#{ Layout = null; }
For this you have to use either ajax and partial views or any other javascript UI frameworks like knockoutJS or AngularJS
You would need to use Knockout, Knockout & jQuery can provide you with the postback you are looking for. Here is a link.
http://knockoutjs.com/
Your question is not very clear. Please elaborate it. From my understanding, you wanted a very basic layout for better performance.
This you can achieve by creating a new layout page and remove all the scripts and css files from it. Then use this layout page as your layout for the pages.
Your layout can be very minimal, something like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
#RenderBody()
</body>
</html>
When used with responsive design templates, my MVC sites are not showing up on mobile the way they do for the demo template. They are always too wide or too narrow. I'm using all the same CSS elements as the purchased templates and not referencing Site.css at all. Is there something built in to MVC here that would be overriding css elements?
Firebug has a Responsive Design View. Try using that tool to help you locate what went wrong.
Okay, it must have been something subtle in my css but seems to be working now. I just need to pour over my css and make sure a single element isn't throwing it off.
how to integrate hebo html template into yii framework
I am new to using yii framework.I download hebo template from
http://www.webapplicationthemes.com/hebo-responsive-html5-theme/
I can installed template hebo but i don´t work with ie.
Don´t work fluid bootstrap.
go to views/layouts/main.php and delete html comment " <- Require the header ->" instead you can add it as php comment. This comment appears before tag and it causes IE doesn´t understand HTML5.
Did you convert the theme to work with Yii?
One of the problems with this kind of theme is that it has multiple page types and this is harder to replicate in Yii. By default, Yii has no concept of page type unless you code this into the controller using layouts ....
At the very simplest level, the conversion could be based on the fullwidth page,, converting the mainContent divs to inject $content. You would then need to change a layout to use single column ...
I've just completed this for another of their templates and it doesn't take too long - though if any one has a better idea for page types I would be very interested ....