I have .netCore/angular2 shop SPA app.
There seems to be 2 ways to layout 90% of the page html 'template':
app.component.html or
_Layout.cshtml
I've gone with _Layout.cshtml which has the #RenderBody() tag to display the angular stuff.
In this _Layout.cshtml how can I embed one of my angular2 components. e.g the CartSummaryComponent.
<ul class="userMenu">
#Html.Partial("_LoginPartial")
<li class="pull-right"><CartSummaryComponent></CartSummaryComponent></li>
</ul>
The CartSummaryComponent works ok when in the app.component.html template but I need it in the _LoginPartial.
Related
I am new to JQuery Mobile and need to build a fairly large mobile website with it (15+ pages). My problem is that I cannot seem to figure out how to template with JQuery Mobile. Example: I don't want to have all of my JavaScript and CSS includes in on EVERY page, for example. I would like a template that all of my pages reference, so when I need to add a new include, I just add it to this template.
I come from an ASP.NET background, so in ASP.NET I would just create a Master Page, but I can't figure an equivalent to this in JQuery Mobile html pages.
Thank you in advance.
edit: I am using JQuery Mobile with PhoneGap/Cordova.
You can build your application using RequireJS, Backbone and jQuery Mobile. RequireJS is a Javascript and module loader, and Backbone provides models with key-value bindings, collections and views.
Here is a simple tutorial to start developing your application using Phonegap.
If you're using Phonegap you may as well put all the HTML into a single file (your links would be id selectors - href="#contact").
Then for some basic templating I am currently working on a Phonegap/JQM app that reuses the header, footer and sidebar HTML between pages by copying a HTML footer, header and sidebar onto each page at runtime.
So my html looks something like this:
<!-- reusable content - this is added to pages using JS -->
<div style="display:none">
<div data-role="header" data-position="fixed" class="mainheader" data-id="mainheader">
<h1>App Name/h1>
</div><!-- /header -->
<div data-role="footer" data-position="fixed" data-id="mainfooter">
<div data-role="navbar" class="main-nav">
<ul>
<li>Contact</li>
...
</ul>
</div>
</div><!-- /navbar -->
<div data-role="panel" class="sidebar" data-position="left">
<!-- sidebar content -->
</div>
</div>
<!-- /end of reusable content -->
<div id="cars" class="content-page" data-role="page">
<!-- header gets added here -->
<div data-role="content">
<!-- page content would go here -->
</div>
<!-- footer and sidebar get added here -->
</div>
and in my JS looks like this:
initializeReusableContent : function () {
//make sure the panels and nav bar are on each page
var header, footer, sidebar;
header = $('.mainheader').remove();
footer = $('.footer').remove();
sidebar = $('.sidebar').remove();
$(".content-page[data-role=page]").prepend(header).append(footer).append(sidebar);
},
You could then use something like https://github.com/janl/mustache.js for your content templating.
If you have more complicated needs a templating language would probably better (Backbone, Angular etc).
This question is close to: jQuery Mobile layout in ASP.NET MVC app but I'm trying to find the best practices as I believe re-typing Header and Footer in every view is not efficient. There must be a better way.
So, I'm looking for the best way to make ASP.NET MVC shared Layout views ( aka master pages ) to work with my Views/Partial views.
From reading around there are two ways to render JQuery mobile pages from MVC Layouts:
1) Standard Layout format:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
...
</head>
<body>
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">#RenderBody()</div>
<div data-role="footer">...</div>
</div>
</body>
</html>
As I'm learning I started running into problems and later learned that you can't really load other "Pages" inside of that master payout. All inherited Views have to be part of that master Jquery mobile page.
Bad.
2)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
...
</head>
<body>
<div data-role="page">
#RenderBody()
</div>
</body>
</html>
This will work but it also means that I have to re-type Headers and Footers on every single View.
Can you guys share your opinions? What's the best approach to take for me to be able to load multiple Jquery Mobile "pages" in my Layout yet not having to repeat the Header/Footer everywhere ? ...I mean what if one has to change at some point ?
Thank you in advance.
One thing I've done in similar situations is to make a master layout with no "page" div:
<!DOCTYPE html>
<html>
<head>...</head>
<body>
#RenderBody()
</body>
</html>
And then make layout pages which inherit from the master layout, where you can include the header/footer
#{
Layout = "~/Views/Shared/_LayoutMobileMaster.cshtml";
}
<div data-role="page" data-theme="b" position="fixed">
<div data-role="header" data-position="fixed" data-theme="b" id="contentHeader">
<a id="backBtn" data-direction="reverse" data-icon="back" class="ui-btn-left">Back</a>
<h1>#ViewBag.Title</h1>
<a id="logoutBtn" data-icon="gear" class="ui-btn-right">Logout</a>
</div>
<div data-role="content" data-theme="b">
#RenderBody()
</div>
</div>
Of course, if each of your pages has a different header/footer then this isn't very practical; you might as well just do away with the intermediate layouts and put the header/footer directly in each of your views. But if you have different sets of multiple pages where each set needs to have a particular look, then I think this can be very useful.
I'm pretty new to coding, so please pardon my inexperience.
I'm currently working on making a website, and want to have button modals. I can't seem to get it working, and have experimented with it for at least a few hours. This is what I have written in my html file, which was taken from the Twitter Bootstrap site:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
<div class="modal" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
Am I missing something here? Do I need add something else? The bootstrap site said to "call the modal via javascript", but I didn't know where to put the $('#myModal').modal(options). I placed it in the .html AND the .js file, but neither attempt worked.
The .html file already has
<script src="js/bootstrap-modal.js"></script>
along with all the other plugins, but this doesn't seem to be doing anything. It's also worth noting that I am working locally on my computer.
I'm sure this is a very easy question, but ANY help would be greatly appreciated.
EDIT:I managed to get it working. Looked like my problem was that I was sourcing bootstrap-modal.js, when really I only had bootstrap.js. I made a new file called boostrap-modal.js with the code, and it worked fine.
However, I'm still unable to get the fade in transition. I've used the bootstrap-transition.js files but still can't seem to get it down. Additional help would be greatly appreciated.
* Updated the bootstrap stylesheet path on the fiddle, it changed since I wrote this answer.
You need to include the jQuery script before the bootstrap-modal.js script file for the plugin to work, here is the script straight from googles CDN that you can include freely in your page, just make sure to include it before any js that you might have:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
You only need to call the script if you want it to display when your page loads, otherwise you just need to have the proper data-* attribute and href reference in your modal button which you already have:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
You can include all scripts at the end of your <body> tag for faster content loading, the same way the twitters bootstrap demo page has it.
Here is a demo of a modal page:
http://jsfiddle.net/3v2zg/626/
I am using jquery-mobile for 1 of my applications in Rails 2.3.4.
The following code
li data-icon="plus" data-iconpos="right"><%= link_to "Post", [my parameters] %>
does not show the data icon, "plus". I am wondering why.
Any ideas please.
The original question is a little unclear to me, but from the comments, it looks like you're trying to find out how to change the icon in listview from the standard arrow.
To do this, add a data-split-icon property to the ul tag - setting it to one of the icon names from http://jquerymobile.com/demos/1.0a3/docs/buttons/buttons-icons.html
For example:
<ul data-role="listview" data-inset="true" data-split-icon="star">
<li><h3><a>list item 1</a></h3><a>link title</a></li>
<li><h3><a>list item 2</a></h3><a>link title</a></li>
<li><h3><a>list item 3</a></h3><a>link title</a></li>
</ul>
Instead of the standard arrow icon, that gives you a list with pretty stars.
Hope that helps
I had the same problem myself - it is due to the fact that Rails uses a 1.4 version of jQuery by default - you need to be using jQuery 1.5
If you want to get started quickly then use the jQuery CDN hosted files:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js">
How do I inject a script tag such as
<script src="somejsfile"></script>
or
<script type="text/javascript>some javascript</script>
into the head tag of a page from a partial view?
Update: Answer for the old question
This is about ASP.NET MVC. We can use the RenderSection. Here the sample for MVC 3 using Razor view engine:
layout view or master page:
<html>
<head>
<script ...></script>
<link .../>
#RenderSection("head")
</head>
<body>
...
#RenderBody()
...
</body>
</html>
View, e.g. Home:
#section head{
<!-- Here is what you can inject the header -->
<script ...></script>
#MyClass.GenerateMoreScript()
}
<!-- Here is your home html where the #RenderBody() located in the layout. -->
Even if THX's answer works, it's not a good one as MVC's intention is to be stateless by nature. Moreover his solution does not let you place your scripts where they should go - most sites want their script declarations at the very bottom of their page just before the </body> tag as it is best for performance and search engine optimization.
There is an answer, thanks to Darin Dimitrov:
Using sections in Editor/Display templates
His answer allows you to register scripts from a partial view within the layout view.
The caveat is his answer marks items using a GUID in a dictionary object, so there is no guarantee the scripts will be rendered in the master page in the same order they are listed in your partial view.
There are two workarounds for that:
Register only 1 script from a partial view -or-
Change his HTML Helper implementation to support ordering
I'm trying to work on the later myself.
Good luck.
Partial views are UserControls. Can't you use RegisterClientScriptInclude method of ClientScriptManager?
protected override void OnLoad(EventArgs e) {
base.OnLoad(e);
Page.ClientScript.RegisterClientScriptInclude("some key", "http://website/javascript.js");
}