-
Notifications
You must be signed in to change notification settings - Fork 1
Tutorial 1: Hello JsLink
If you haven't yet seen the hello world example, which explains the very basics, please take a look. This example assumes you know how to set up your localization, which is exactly what hello world is all about!
JsLink is one of the more important things of that come with BLocal.Web. It links your javascript and css file and initializes the debugger (if debug mode is on). You will notice it being active if you start getting red squares around the things you hover over. When you press enter, a popup should appear which will give you an editor allowing you to change the text of whatever you're hovering over.
TLDR: JsLink lets you change your localized text in-site. Awesome!
First off, we're assuming you have basic your basic localization set up. This implies that when you call @Html.Local() in your view (with parameters if you used the static example), it doesn't throw any exceptions and simply returns you a LocalizationHelper.
Let's start off with a very basic page:
@using BLocal.Web
@{
Layout = null;
var local = @Html.Local(); // if you did not use IoC, you should be passing parameters here.
}
<!DOCTYPE html>
<html>
<head>
<title>Hello JsLink</title>
</head>
<body>
<div>
<!-- simple paragraph -->
@local.Paragraph("helloworld")
</div>
</body>
</html>
Let's add some lines to the
section to get the editor@using BLocal.Web
@{
Layout = null;
var local = @Html.Local(); // if you did not use IoC, you should be passing parameters here.
}
<!DOCTYPE html>
<html>
<head>
<title>Hello JsLink</title>
<!-- make sure to reference jQuery before referencing jquery.localization.js. As the name suggests, there is a dependency -->
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<!-- This line renders references to javascript and css required for in-page debugging. If you used NuGet, it will know where to find them automatically. -->
@local.JsLink()
</head>
<body>
<div>
<!-- simple paragraph -->
@local.Paragraph("helloworld")
</div>
</body>
</html>
Try to run this page, this should get you a localized value on your screen which you can edit. Reload the page to see that it was persisted. Cool, let's continue by localizing our title.
Change <title>Hello JsLink</title> into <title>@local.Value("pagetitle")</title>. Run the page. Your title is now localized. Too bad you can't hover over the page title and edit it... Or can you? Let's make another change just before </body>.
@using BLocal.Web
@{
Layout = null;
var local = @Html.Local(); // if you did not use IoC, you should be passing parameters here.
}
<!DOCTYPE html>
<html>
<head>
<title>Hello JsLink</title>
<!-- make sure to reference jQuery before referencing jquery.localization.js. As the name suggests, there is a dependency -->
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")"></script>
<!-- This line renders references to javascript and css required for in-page debugging. If you used NuGet, it will know where to find them automatically. -->
@local.JsLink()
</head>
<body>
<div>
<!-- simple paragraph -->
@local.Paragraph("helloworld")
</div>
<!-- this makes it so that all values that cannot be directly edit, can still be shown by pressing 'enter' while hovering over nothing -->
@local.JsValueSummary()
</body>
</html>
Got everything working? Go you! It's time to check out the second tutorial!