How to stop attribute to change case in html
let test1 = document.createElement('div');
test1.innerHTML = '<div [ngClass]>Test</div>';
console.log('--------dynamic', test1.innerHTML);
Here, [ngClass] change to ngclass.
This code
test1.innerHTML = '<div [ngClass]>Test</div>';
is entirely pointless. Angular won't do anything with [ngClass].
Angular processes Angular specific markup only when it compiles a components template, but not when it is added to the DOM.
If you want to add Angular specific markup at runtime, you need to dynamically create and compile a component.
For more details see How can I use/create dynamic template to compile dynamic Component with Angular 2.0?
HTML attribute names are case-insensitive.
There is no way to stop browsers from normalising them when you give them some HTML to parse into a DOM and then serialise that DOM back to HTML.
If you want to process Angular's template language and maintain case sensitivity, then don't do so using tools that are designed to deal with HTML.
Related
I need to create some automated testing tags for an angular web application. Basically, I intend to create a bunch of html ids for the components of interest in my unit test. What would be best practice for this activity? Does the angular template syntax <html-tag #variable ... work in the same way as <html-tag id="variable" ... ?
#variable is used for creating template reference variable - and will not be available at run time when HTML is rendered. You are better off using id="variable" to identify HTML elements in your tests.
The <html-tag #variable pick up the reference to HtmlElement or superior. It can be marked on the property exportAs
The <html-tag id="variable" attribute represents the element's identifier, reflecting the id global attribute
Is there a way to make part of markup ignored during Angular2 compilation? The issue is i have additional library that uses jQuery and <template> tags and because of Angular the <template> html tags are not present in DOM when the library tries to reach it with $('template') selector.
A workaround is to inject needed HTML markup after containing container init. So i've made simple $('container')[0].innerHtml = 'markup with <template></template>' in one of my angular2 components in ngOnInit method.
Is it possible to use the HAP (HTML Agility Pack) to:
Grab a collection of nodes e.g. all <a> elements which are children of <li> elements
Iterate over the collection
Add CSS class references into the class attribute for each element e.g. class &= "foo"
Update the nodes in their original position within the HTML
For point 4, I need to know whether:
When I grab a collection of nodes, am I working with copies?
If so, can I easily update the nodes in their original position within the HTML
Finally, would it be practical to do this when rendering a page in an ASP.NET website, considering:
I will need to modify the class references for no more than 100
elements
I am not working with large HTML documents
I plan to select my nodes starting at a div e.g. div[2] where body
contains 4 divs
I realise that this may seem like a bunch of separate questions but really it is just a breakdown of the following two questions:
Can I easily modify the HTML output of an ASP.NET page e.g. to insert class references?
Would it be practical to do this on 50 - 100 elements WRT speed e.g. no more than 2 seconds cost?
Many thanks.
Check out my CsQuery project: https://github.com/jamietre/csquery or on nuget as "CsQuery".
This is a C# (.NET 4) port of jQuery. Selectors are orders of magnitude faster than HTML Agility Pack; in fact, my initial purpose in writing it was to do exactly what you want to do: manipulate HTML in real time. As it happens, from a CMS with html generated by ckeditor.
To intercept HTML in webforms with CsQuery you do this in the page codebehind:
using CsQuery;
using CsQuery.Web;
protected override void Render(HtmlTextWriter writer)
{
// the CsQueryHttpContext object is part of the CsQuery library, it's a helper
// than abstracts the process of intercepting base.Render() for you.
CsQueryHttpContext csqContext =
WebForms.CreateFromRender(Page, base.Render, writer);
// CQ object is like a jQuery object. The "Dom" property of the context
// returned above represents the output of this page.
CQ doc = csqContext.Dom;
doc["li > a"].AddClass("foo");
// write it
csqContext.Render();
}
There is basic documentation on GitHub, but apart from getting HTML in and out, it works pretty much like jQuery. The WebForms object above is just to help you handle interacting with the HtmlTextWriter object and the Render method. The general-purpose usage is very simple:
var doc = CQ.Create(htmlString);
// or
var doc = CQ.CreateFromUrl(url);
.. do stuff with doc, a CQ object that acts like a jQuery object
string html = doc.Render();
Don't do that ! ASP.NET is not meant to be used that way, there is a better ways to do this task depending on how do you create that markup in witch you want change or add css classes. ASP.NET uses aspx templates, basically html markup and there you can intervene with code executing on server, here you can set css class statically or use server side scripts to set css class on markup with some code.
You can also create controls in code behind and set css to controls if anchor control have parent that is list item control (you will have to use server side controls).
To do it your way you will have to make Response Filter (example here) and after request is done do your parsing and write results and changes back to response stream. It's much easier using common ASP.NET techniques.
I'm using ASP.NET MVC 3 RTM. Is it possible to change the HTML rendered from a View Model, by using an attribute?
Example:
public class Product
{
[AddHtmlAttribute(Name = "disabled", Value = "disabled")]
public string Name { get; set; }
}
I want the attribute to be able to change the rendered HTML, that property results in. I know it properly can't be done with an attribute alone. I probably have to hook into the system by implementing an interface, but where should I look?
I know MVC uses the default editor templates, and I've looked at them in the MVC 3 source code, but I haven't been able to figure out if it would be possible to somehow hook into the rendered element and add some attributes. I know the validation system does this, by adding custom HTML attributes to support unobtrusive validation.
I guess I just need a pointer to where I should look, or what interface I should take a look at.
Thank you so much.
Update: I'm using the standard HTML helper Html.EditorFor(model => model.Name) for my fields, and haven't overriden any editor templates. I would really prefer if I didn't have to change or override the default templates.
You may checkout the following blog post which illustrates how to achieve this by writing a custom DataAnnotationsModelMetadataProvider, attribute and overriding the default templates.
If I write
<form wicket:id="form" id="form>
or even
<form wicket:id="form>...
Then the rendered HTML shows the id 'form' appended with different numbers whenever the page is refreshed e.g.
<form id="form7"....
Is there a way to disable this behavior of the Wicket framework?
We set markup ids by hand extensively on our project to ease automatic testing with Selenium testing framework. It definitely works.
Component.setOutputMarkupId(true); // write id attribute of element to html
Component.setMarkupId("someid"); // id attribute of element is "someid"
This is the behavior you want in most cases when using wicket. The dynamic id is meant to prevent id collisions when Ajax behaviors are added to components or added to ajax responses for refreshing. For any of these situations, you really need both the client response and the server side state to be in cahoots. If there are external js resources you need the id of a component for dom lookup, then I would suggest adding a custom wicket component behavior that would then generate the js call to a function passing in the generated id.
I realize what I'm going to describe leads you more into the forest of Wicket. But I have been more than happy with the ajaxy stuff that Wicket opens up for you out of the box.
This is Wicket desing feature. You can use class for linking styles and components.
<form wicket:id="form" id="form>
Also you can to try (I never did it) setMarkupId . I'm not sure that it good way.
It has been a while since I worked with Wicket, but I remember that when wicket uses ajax elements, its ids are auto-generated (the id of the tag, not the wicket:id). You can control the id of the tag when not using and ajax element. In your case, since there is no code, I would guess that you will have to change any AjaxButton or Ajax* from your form.
Yes you can write custom JavaScript... you just need to implement it according to the 'Wicket way'. You can decorate components, Ajax calls etc. with custom JavaScript, then it all plays nicely.