I have following code :
<html> <head>
<!-- Required CSS --> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/treeview/assets/skins/sam/treeview.css"> <!-- Optional CSS for for date editing with Calendar--> <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/calendar/assets/skins/sam/calendar.css"> <!-- Dependency source file --> <script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"
></script> <!-- Optional dependency source file --> <script src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js" type="text/javascript"></script> <!-- Optional dependency source file for date editing with Calendar--> <script src="http://yui.yahooapis.com/2.9.0/build/calendar/calendar-min.js"
></script> <!-- Optional dependency source file to decode contents of yuiConfig markup attribute--> <script src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js" ></script> <!-- TreeView source file --> <script src="http://yui.yahooapis.com/2.9.0/build/treeview/treeview-min.js"
></script>
</head> <body class="yui-skin-sam">
#model IEnumerable< ESimSol.BusinessObjects.MenuTreeNode>
<input type="button" id="btnAdd" value="Refresh" /> <label id="lblTest"> </label> <div id="treeDiv1"> <ul>
#foreach (var item in Model)
{
if (item.ParentID == 0)
{
<li>
#Html.DisplayFor(modelItem => item.MenuName)
<ul>
#Html.Partial("TreeViewControl", item)
</ul>
</li>
}
} </ul> </div> </body> </html>
<script type="text/javascript">
$(document).ready(function () {
treeInit();
});
var tree;
function treeInit() {
tree = new YAHOO.widget.TreeView(document.getElementById("treeDiv1"));
}
</script>
When I want to execute my script i face following Exception:
Microsoft JScript runtime error: Object expected
any one give me a complete reference for javascript execute with MVC3 RAZOR View engine?
Keep in mind that using javascript with MVC3/Razor is no different than using it with any other page - JS is a client-side language, so it's always working with the rendered HTML.
I don't see anything standing out as an error in your JS code, but your <script> element should be inside the <body> element. Most browsers handle it OK, so I doubt that's your issue.
I'd recommend that you check your script references to verify that they're correct, then look into the script further. The script error you're getting in IE should reference a line #, which you can use to look at the page source (the rendered page, not the razor page) to try and locate the source of the error.
Related
I'm trying to see if I can get the Bootstrap datePicker (datePicker)to work in Grails v3.3.9/fields plugin 2.2.10
I've done a standalone page, that is I create a controller, and give it an action called 'ldt'.
I create grails view called ldt.gsp like this. When I hit trigger my controller in the browser - this simple page renders fine and datePicker works
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap datepicket demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
//$('.input-group.date').datepicker({
$('#datepicker').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
</head>
<body>
<div class="container">
<h1>Bootstrap datepicker</h1>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</body>
</html>
You can see that here. This is not using normal Grails site mesh etc
So I tried to put the same into views/layouts/main.gsp
So here is the head section of my revised main.gsp. (I've not included Bootstrap nor jQuery as them come with grails application.js).
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="Grails"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
<asset:stylesheet src="application.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<script type='text/javascript'>
$(function(){
$('#datepicker').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
</script>
<g:layoutHead/>
<%-- header assets --%>
</head>....
Now I am trying to render a specific field in the domain class - which is of type LocalDateTime. To try and do this I have created a _fields/localDateTime/_wrapper.gsp that looks like this in which I setup the input control (as I did for the standalone page), but I give the input a start date time for now.
localDateTime/_wrapper.gsp
<%# page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class="input-group date" id='datetimepicker1' >
<label for=${this.pageScope.property}> ${this.pageScope.getVariable("label")} </label>
<input type='text' class="form-control" value="${java.time.LocalDateTime.now().toString()}"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
When I go this page in the browser it gets rendered, but the clickable field behaviour etc does not fire and the field has no calendar icon on the right hand side (this may be because Grails is loading Bootstrap 4, and when I tried the standalone with v4.3.1 the icon didn't render - but the click event still worked).
See rendered form here - using the 'edit' action which in turn is using standard scaffolds with <f:all which calls my _wrapper.gsp.
The string value of the date gets rendered fine (not formatted), but I get no click action and calendar doesn't pop up - no action at all. I've included a snip of the browser page inspection in the browser opened for the contractSignedDate property.
So if a standalone page gsp works just fine (albeit with Bootstrap 4 as loaded by Grails bau) does my click action not fire
So why can't the gsp action action fire when using the main.gsp/normal fields plugin/and _wrapper.gsp for java LocalDateTime? It worked for standalone gsp example so I know the datePicker works
How can I get the Bootstrap datepicker as described here working in a Grails scaffolded form?
PS it's not missing jqueryUI library - I've included 1.12.1 in both standalone and main.gsp see this image from inspector. Works fine on standalone but not using main.gsp and scaffolded forms
PS if I click into the scaffolded form property as shown in the _widget.gsp, the outer text box is highlighted in blue (which the bau grails rendered elements don't - so some form of click action is happening - just not getting a calendar to pop up.
This is very odd. When referenced on standalone gsp and link JS/CSS from CDN, the page worked.
If I add <meta name="layout" content="main" /> and had the page rendered via site mesh in main.gsp it would fail.
I tried many different combinations in the standalone page <head>, and basically the date picker doesn't seem to need the bootstrap js to work - but it does need the jQuery and it must be in the head section.
If you want the styles you need to include the bootstrap.css and the bootstrap-datepicker3 CSS.
<head>
<%--<meta name="layout" content="main" />--%>
<title>Bootstrap datepicket demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<%--<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> --%>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
</head>
However if you uncommented the meta tag it would all stop. In the end to get this to work I had to edit the /assets/application.js and remove the entries for Bootstrap and jQuery using the local copies in /assets/javascripts, and instead reference these directly from the cdn in main.gsp.
So my working application.js looks like this - where I include my own LCM-app JS:
// This is a manifest file that'll be compiled into application.js.
//
// Any JavaScript file within this directory can be referenced here using a relative path.
//
// You're free to add application-wide JavaScript to this file, but it's generally better
// to create separate JavaScript files as needed.
//= require LCM-app
//= require popper.min
//= require_self
My LCM-app js just looks like this where my selector is using class selector - note you seem to have add the dot between group and date '.input-group.date' - but that becomes a space in your markup
// used by bootstrap date picker - matching class selector is for class class='.input-group date'
$(function(){
$('.input-group.date').datepicker({
calendarWeeks: true,
todayHighlight: true,
autoclose: true
});
});
I then went to main.gsp and edited in the cdn references that I had in the standlone page (asset plugin is now disabled for jQuery and Bootstrap)
main.gsp (head section) - you dont need jqueryUI for this to work
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>
<g:layoutTitle default="Grails"/>
</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<asset:link rel="icon" href="favicon.ico" type="image/x-ico"/>
<asset:stylesheet src="application.css"/>
<%-- <script type='text/javascript' src='//code.jquery.com/jquery-1.12.1.js'></script>--%>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type='text/javascript' src='//code.jquery.com/jquery-3.3.1.js'></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker3.min.css">
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<g:layoutHead/>
<%-- header assets --%>
</head>
Now when you uncomment out the <meta> tag in the standalone page and remove the direct refs - then the main.gsp site mesh adds these back exactly as they were in the standalone page
Point your browser at the test page and it all works as normal.
It even works when I put the basic code into a taglib (you have to stop the escaping using the static encodeAsForTags and set to 'none' for your tag).
JdtDateTimeTagLib
class JavaDateTimeTagLib {
static defaultEncodeAs = [taglib:'html']
//static encodeAsForTags = [tagName: [taglib:'html'], otherTagName: [taglib:'none']]
static encodeAsForTags = [ jdtScaffoldField:'none']
static namespace = "jdt" //java8 date time name space for tags
GrailsNameUtils grailsNameUtils = new GrailsNameUtils()
def jdtScaffoldField = {attrs, body ->
assert grailsNameUtils
String propertyName = attrs.propertyName ?: "unknown"
String property = attrs.property ?: "unknown"
String value = attrs.value
String naturalName = grailsNameUtils.getNaturalName(propertyName)
String label = attrs.label ?: 'unknown'
String ldtStr = attrs.ldt
String page = """
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<div class="fieldcontain" >
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group form-inline">
<label class='control-label' for="$propertyName"> ${label} </label>
<div class="input-group date" >
<input type='text' class="form-control" value="${ldtStr?.toString()}"/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
"""
out << page
}
}
I can then simplify the _fields/localDateTime/_wrapper.gsp to use that tag like so
<%# page import="java.time.LocalDateTime; java.time.format.DateTimeFormatter" %>
<g:set var="localDateTimePattern" value="${message(code: 'default.localDateTime.format',default: 'yyyy-MM-dd HH:mm')}"/>
<jdt:jdtScaffoldField propertyName="xyc" label="my label"></jdt:jdtScaffoldField>
Now when you go to a normal grails edit action my field is rendered and the calendar actions.
I've lost variables in this version as I'm not getting the values passed to the wrapper and putting them forward into my tag - but I think that's not too hard. See working screen shot 'as-is'
Sadly the lest of the Grails scaffolding is using its own rendering so the CSS styles don't match, alignment is a bit out etc - but its an improvement if I can just get the submit action etc to take the selected date and convert pack to LocalDateTime to persist in the database.
Basically it would be better if the grails <g:datePicker could be 'fixed' to work with new Java time formats and use the Bootstrap picker - because the fields plugin invokes the <g:datePicker for ordinary Java Date but completely doesn't handle the Java 8 temporal stuff.
I have tried to 'find' where the grails <g: taglib is implemented (thought it was going to be in the GSP plugin or core projects - but I can't find it in either.
However whilst it's not ideal - its good enough for the mini demo using scaffolds I was going to show people - just looks a little clunky as it's not consistent.
I have setup Angular 2 with ASP.NET core, using:
dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
I followed the standard setup but the App.component.html is duplicating the html and body tags.
When Pressing Control U (to view source) the html looks like:
<html>
<head>
....
</head>
<body>
<app>
<html>
<head>
<style>
...
</style>
</head>
</app>
</body>
</html>
</app>
...
</body>
</html>
redacted
None of my components have html or body tags in them. the only one that has html or body tag is the initial page
My _Layout.cshtml html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - HotSnail</title>
<base href="/" />
<script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
<script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
<link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="~/content/modules/animate/animate.css" rel="stylesheet" />
<link href="~/content/global.css" rel="stylesheet" />
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
My Index.cshtml
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
The above code is what should be served, now the first bit of angular should be the app.component
app.component.html
<ribbon></ribbon>
<div id="content">
<router-outlet></router-outlet>
</div>
ribbon.component.html:
<div id="ribbon">
<span class="ribbon-button-alignment">
<span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>
<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>
This is all the components that should be injected on the first page
UPDATE*
So I have done some more research and it seems to be a known bug. As it says here:
https://github.com/aspnet/JavaScriptServices/issues/662
I cant quiet figure out their hacky solution
Here is hacky code that fixes this:
return requestZone.run>(() =>
platform.serializeModule(AppModule)).then(html => { resolve({ html:
html.slice(27, html.length - 14).replace('', '') }); },
reject);
Also in index.cshtml I advice changing app to div because we already
have app tag returned from Universal.
Loading...
I'm not sure where that code would go..
UPDATE
This also happens in the DEFAULT project created when doing
dotnet new angular
Does anyone know who maintains these templates as I'd like to post a bug with the development team
Same problem for angular 5.
I fixed it like in suggestion from last comment on https://github.com/aspnet/JavaScriptServices/issues/662 (last comment by salarcode):
boot.server.ts file change the code to this:
resolve({
html: (() => {
let apphtml = state.renderToString();
apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
return apphtml;
})()});
I use partial views to render the content of the pages.
Normally, I use sections to render specific Scripts and CSS for the content by using #section
My basic url is {Controller}/{Action}/{Id}
For urls like {Controller}/{Action} ie. Product/Create, the sections and the pages render ok.
But when my url is {Controller}/{Action}/{Id} ie. Product/Edit/2, the CSS and Scripts are absent and I only get a plain HTML page.
My Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<!-- CSS FILES -->
<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
<!-- BEGIN RENDER CSS SECTION EXISTING IN PARTIAL -->
#RenderSection("Style", required: false)
<!-- END RENDER CSS SECTION EXISTING IN PARTIAL -->
<link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div class="header">
#Html.Partial("_Header")
</div>
<div class="container">
<div class="sidebar">
#Html.Partial("_Sidebar")
</div>
<div class="content">
#RenderBody()
</div>
</div>
<!-- JAVASCRIPT FILES -->
<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- RENDER JAVASCRIPT SECTION EXISTING IN PARTIAL -->
#RenderSection("Scripts", required: false)
<!-- RENDER JAVASCRIPT SECTION EXISTING IN PARTIAL -->
<script src="../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
</body>
</html>
My Partial Views Structure:
#model IEnumerable<Backend.Models.Product>
#{
ViewBag.Title = "Product";
}
#section Style {
SPECIFIC CSS URLS TO THE VIEW
}
HTML CODE
#section Scripts{
SPECIFIC JAVASCRIPT URLS TO THE VIEW
}
I'm doubting the additional {Id} in the URL is what messes the code because the following:
with {Id}
When Id is passed as querystring
How can I get around this issue?
The way you included the css files is not correct!
You should Use ~/ instead of ../. Razor will convert ~ to the root path of your app.
This should work.
<link href="~/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />
Assuming assets folder is in your app root.
With this your link's won't be broken irrespective of what page/url you are on.
You should do the same for including js files also.
Sounds like you are missing your shared layout. If you have something like this toward the top of the edit cshtml try taking it out.
#{
Layout = null;
}
If that's not there, maybe you need to specify the layout, you can just replicate whatever is in your create cshtml, for example:
#{
Layout = "~/Views/Shared/MyLayoutPage.cshtml";
}
I am fairly new to the concept of javascript client side development. I am running into an issue, though it may be I just don't understand how to accomplish something with the mash of frameworks.
I know I want to use Knockout for it's rich client side goodies. I also wanna use Sammy.js to allow for routing and passing data to the knockout views (I come from an MVC background where I stuff a model with data, then return view(model), and MVC binds it nice and good for me).
So now I am trying to do something similar client side...
Here is my Index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>The EClassifieds Mobile</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="./scripts/cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/templ.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.tmpl.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/RouteManager.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/ApplicationManager.js"></script>
<link rel="stylesheet" href="./style/site.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
</head>
<body>
<div id="main">
<h1>HELLO WORLD!</h1>
<!--Sammy should update the content of this div dynamically, creating a SPA (single page application)-->
</div>
</body>
</html>
Here is my Sammy Configuration.
(function ($) {
alert('Building Routes');
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
this.render("/views/Login.html");
});
});
$(function () {
app.run('#/');
});
})(jQuery);
Here is my Login.html
<!--Model File Goes Here -->
<script type="text/javascript" charset="utf-8" src="../models/Login.js"></script>
<fieldset title="Please Login to Begin :">
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtUsername">
Username
</label>
<input id="txtUsername" data-bind="value: username" placeholder="Stevie" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtPassword">
Password
</label>
<input id="txtPassword" data-bind="value: password" placeholder="yep!" value="" type="password" />
</fieldset>
</div>
<a id="btnLogin" data-role="button" data-transition="fade" href="#page1" >
Login
</a>
</div>
<div id="errorText">
<h1></h1>
</div>
<p id="deviceProperties">Loading device properties...</p>
</fieldset>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new LoginDataModel(0, "Stevie", "theTV", true));
});
</script>
I also need some way to pass the data from the sammy get handler, to the knockout page. Is there a way to do this, or am I attempting the impossible?
UPDATE 1 :
I would really love to be able to do something like :
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
var data = getLoginData();
this.render("/views/Login.html", data);
});
Sammy does this same exact thing using other template frameworks, however, I don't see how I would bind the $data in the Knockout view to the data passed from Sammy.
Not sure if you saw this, but the webmail tutorial on the knockoutjs website uses sammy.js for routing:
http://learn.knockoutjs.com/#/?tutorial=webmail
Here's a link to the finished product (so you can view source if you don't want to follow the whole tutorial)
http://learn.knockoutjs.com/WebmailExampleStandalone.html
the Knockout.js-External-Templates plugin will help you in achieving this behavior. A good starting point will be from here
EDIT: The "starting point" link now goes to malware.
Even John Papa endorses it here
The above solution is useful only when you frequently reuse your templates. Use inline templating whenever possible. Inline templating – and using foreach binding, performs around 1/3 faster than applying template from a separate DOM element, the so-called named template binding. More info on this here
Hello I understand from reading advice on this site that scripts should go at the bottom of the _layout page. My problem is that I am not sure exactly where the 'bottom' is. Some people have said it is just before the tag but that does not work for me. I have tried putting the script in many places but nowhere seems to work. Could someone please tell me what I am doing wrong.
This is my About page
#{
ViewBag.Title = "About Us";
}
<h2>About</h2>
<p>
Put content here.
</p>
<script type="text/javascript">
$(function () {
alert("Hello World");
});
</script>
This is my _Layout page
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* jQuery works if this line is here but not if it is at the bottom
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
*#
</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">
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</div>
</div>
<div id="main">
#RenderBody()
</div>
<div id="footer">
</div>
</div>
#* jQery does not work if the script is here! *#
<script src="#Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>
Some Alternatives
It is absolutely possible to have your jquery at the end of your body tag. Ideally the only js you have in your head is modernizr, html5shiv or the like.
Option 1
Put a #RenderSection("scripts", required: false) after the jQuery <script... element as the last line inside your body element. Then in any of your views you would use
#section scripts
{
<script type="text/javascript">
$(function () {
// page specific js code here
});
</script>
}
Option 2
Between your jQuery script element and the closing of your body element have a script element pointing to the relevant js file for the action/view in question:
<script
src="#Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")"
type="text/javascript">
</script>
Jquery file has to be included before first reference to jquery is found on the document. So, to solve this problem, i put jquery file in head section and all other script that are not used in views but in other script files are included before closing body tag