Please note I'm not interested in a Polymer-, Angular- or route-based solution here. I'm trying to learn "pure" Dart here, and while I'll likely switch to using one of those frameworks down the road, I need to have a good understanding of the fundamentals first.
In Dart, is it possible to download a whole bunch of HTML "snippets" (see below) all at once (at app startup), and then load them into the browser (either the entire window or just inside a particular <div> element, etc.) dynamically?
For instance, my HTML file might have a <div> element:
<body>
<!-- lots of HTML -->
<div id="container"></div>
<!-- more HTML -->
</body>
And I would like to download two "snippets" (DOM subtrees, HTML templates) of HTML, and dynamically load either one of them into the container div tag. Perhaps one of the snippets looks like this:
<h1>I'm Snippet #1!!!</h1>
<input type="button" name="redPillButton" value="Red Pill!" />
And another snippet my look like:
<h1>I'm Snippet #2!!!</h1>
<input type="button" name="bluePillButton" value="Blue Pill!" />
Can the two snippets be inside their own HTML file, or do I have to put them inside one big file and extract out the "snippet" that I want to load? Either way, how do I accomplish this in a Dart web app?
You can keep each parts in their own file and load them like that :
HttpRequest.getString("part.html").then((html) {
querySelector('#container').innerHtml = html;
});
Related
For example, I have a piece of code like this:
String_test="
<template>
<label> {{count2}} SSSSSSSSSSSSSSSSSSSSSSSSS </label>
<input id="input1" type='text' value='{{count2}}'>
</template>"
and I want to assign String_test to another element, like:
DivElement span2 = new Element.tag("div");
span2.setInnerHtml(String_test);
_content.nodes.add(span2);
However, the "< template >' tag is not recognized, nothing will show up.
NOTE: My purpose is to use setInnerHtml to dynamically add contents to the webpage with data-binding still OK.
Any ideas?
Thanks!
It appears that you are including raw html in your Dart program files. This is not how Dart works. Dart has code (kept in .dart files) that is referenced to via a tag in the HTML file. This very quick tutorial will show you how to do that: https://www.dartlang.org/docs/tutorials/connect-dart-html/
Templating is found in the Dart Polymer library. It is too long of a process to go into here but you can find a short tutorial at: https://www.dartlang.org/docs/tutorials/polymer-intro/
I would also mention that Angular comes in a Dart flavor and I find it more accessible than the Polymer libraries. The tutorials and documentation are also much better. Angular is a more comprehensive suite of libraries and it's tutorials can be found here: https://github.com/angular/angular.dart.tutorial/wiki
I've seen numerous sources stating that it's incorrect / bad practice to put scripts in Partial Views, but this raises a huge question...
How are you supposed to run scripts that interact with Partial Views? I've tried using #section scripts { } or something like that, but it doesn't work. At all. The section contains the scripts just fine, but they don't get rendered when the Partial is loaded into the full View.
In addition, I can't render the scripts my Partial View needs on my full View because the scripts pull values from the Model, which is only rendered on the Partial View, since it's the piece of the puzzle that actually works with data.
I hope that doesn't sound too complicated... How can I effectively, efficiently, and correctly render scripts for use with my Partial View's elements and Model?
#keyCrumbs I will not give you a direct answer, but something for you to analyze.
One of the most biggest problems in you call scripts for you partial view is replication of code.
Think you'll use ajax to get the partial view and you will continue doing this for a while. In every call you'll download the script code, and you put it in html. Every time you reset the script block in html, the functions are reset, the variables are reset. It's can be a big problem depending on your js code.
Other point is the size of the response, you can say, but js has a small size, and I'll say multiply this size for every call of a user and next multiply for ever user connected.
So finally, a solution for you, in this case is: create function in the page and call the function in partial view like this:
Your page: Page.cshtml
<script type="text/javascript">
function myPartialView_Load() {
$("birth").datepicker();
$("phone").mask("000-0000");
}
</script>
<!-- Some other code here -->
<div>
<!-- Or you can call from a ajax or other way... -->
#Html.Action("MyActionPartialView")
</div>
Your partial view: MyPartialView.cshtml
<script type="text/javascript">
$(function () { myPartialView_Load(); });
</script>
<form>
<input type="text" name="birth" id="birth" />
<input type="text" name="phone" id="phone" />
</form>
So as you see the problem lies not in putting js in partial view, but the way as you do it. All rules of good practice has a "why" behind, if you understand the "why" you can determine how far the rule is a help and not a burden. And decide break it or not.
Like a said, I'm not given you a ultimate answer but something you thing about. You can use other ways to contour the problem.
i have xml file created in other asp.net project,these file include some controls and their attributes.i need to show those controls on my mvc project,
xml file format may be like below.
<div style='left:84px;top: 50px;' ><input id='Text1' type='text' value='Mr.Temp'/></div>
<div style='left:8px;top: 50px; position: fixed;' >Name</div>
<div style='left:84px;top: 650px;' ><input id='Text1' type='text' value='30'/></div>
<div style='left:8px;top: 65px; position: fixed;' >Age</div>
<div style='left:84px;top: 90px;' ><input id='Text1' type='text' value='Singapore'/></div>
<div style='left:8px;top: 90px;' >Address</div>
i need to show these controls depend on their type and location like this.
Name Mr.Temp
Age 30
Address Singapore
So,i read xml file and write ,my problem is i can create controls based on their type,but i don't know how to
assign their position correctly?Their old location can't use any more because mine is asp.net mvc project.
Give me right way,please.
regards
Indi
Have you considered using xslt? Then you can write rules around all that.
Or, if you don't want to use xslt, then consider using jQuery and write your own plugin to look through your xml and transform that to html.
edit
Well with a plug in you can check out how to write a jQuery plugin here.
Essentially what you'll be doing is giving the xml to the plugin and then the plugin will generate the html for you.
It's a bit too involved for here but you can "each()" on the div, store the first one, then the second and generate html for the pair then move to the next two.
$(xmlDoc).find("div").each(function(){
//this will get each div. now you need to create html for each and return the
//whole as a string to be rendered.
});
I'm trying to add some Model properties into my JavaScript within my content page:
$(document).ready(function () {
createPager(1, <%=Model.TotalPages %>);
createUnprocessedPager(1, <%=Model.TotalUnprocessedPages %>);
});
Does anyone know if this is by design? Are you not meant to combine Model properties with JavaScript? Or is this a bug?
This works as expected. However, I do not have any Intellisense within the <% ... %> tags when actually writing the code. If I write any code within <script> tags, then there's no Intellisense. If I go directly under the tag </script> and type <% Model.... %> then boom, I have Intellisense again.
UPDATE: 22/10/2010
Just read Scott Guthrie's latest blog post and it appears this functionality is coming out soon with the up coming release of ASP.Net MVC 3 (possibly for the beta as well):
Note: Visual Studio Code/Markup
Intellisense and Colorization within
Razor files aren’t enabled yet with
the Beta earlier this month. You’ll
see this show up in a few weeks though
– and it will support full code
intellisense for HTML, JavaScript, CSS
and C#/VB code within Razor files.
There is also no syntax highlighting I think. Not sure if that's a bug or a feature, but AFAIK, combining the code this way isn't a good practice. Generally inline javascript is not a good practice, but if you go with it, combine Model properties with it, and later decide to extract the scripts into a separate js file, your code will break. Therefore, it is quite common to populate hidden fields with your Model properties and read them in your js with jQuery, e.g.:
<input type="hidden" id="valTotalPages" value="<%=Model.TotalPages %>" />
<input type="hidden" id="valTotalUnprocessedPages" value="<%=Model.TotalUnprocessedPages %>" />
...
// in js
$(document).ready(function () {
createPager(1, $("#valTotalPages").val());
createUnprocessedPager(1, $("#valTotalUnprocessedPages").val());
});
So lack of syntax highlighting and intellisense might be a bug, but might as well be a way of discouraging certain code patterns.
You will loose you Intellisense in the views inside quotes "" like attributes.
<input type="text" value="<%= DateTime.Today.ToShortDateString() %>" />
or if it appears inside of Javascript blocks.
<script type="text/javascript">
<%= DateTime.Today.ToShortDateString() %>
</script>
It is my opinion that there should be Intellisense in these scenarios, so I would say it is a bug and hope future updates to Visual Studio will address and resolve this.
I've created a pseudo user control for a site written in classic asp. The control is simply an asp page (with full HTML headers and body) that resides within an iframe in the parent page. The point was to create an AJAX-like interface for uploading files asynchronously (the parent page contains a large form and I didn't want to have to upload the files and submit the rest of the form at the same time).
The problem is, I'm running into a lot of issues with relative urls being used in the iframe page/user control. Depending on what page the iframe is a child of, the relative url base location seems to change according to the directory that particular page is in.
Example:
www.website.com/directory1/application1.asp
...
<form>
<input>
...
<iframe src="../controls/FileUpload.asp"/>
...
</form>
...
www.website.com/directory1/directory2/application2.asp
...
<form>
<input>
...
<iframe src="../../controls/FileUpload.asp"/>
...
</form>
...
www.website.com/controls/FileUpload.asp
...
<form method="post" enctype="multipart/form-data" action="FileUpload.asp"><!--problem here-->
<input type="file">
<input type="submit"/>
</form>
The iframe src paths work correctly (notice the one that's buried a directory deeper has an extra double dot). But in the code for the FileUpload.asp page, relative URLs don't work consistently. The URL I have in the action attribute for the form tag works if you simply load the page as-is, not in an iframe of another page. You can change it to "../controls/FileUpload.asp" and it will work on the first application page, but you have to add another "../" for it to work on the second application page.
I was wondering if maybe there's a way with vbscript to find the absolute URL to a certain file. I do use an include file into which I could hard-code this, but I'd rather not if that's possible. Any other ideas?
You could also just put in an absolute path from the root such as
action="/controls/FileUpload.asp"
I'm not sure if you are perhaps looking for
<%
Response.Write Server.MapPath("./foo.txt")
%>
Some usefull code from Thorarin
that I just saw in a different post
Look for ThisPage() Function