ASP.NET control rendering HTML attributes - html

I have a custom control in an ASP.NET Web Forms project that inherits from System.Web.UI.Control.
I want to add attributes in the markup that to not correspond to properties of that control e.g.
<myControls:Hyperlink runat=server custom-client-side-attr="1"></<myControls:Hyperlink>
The problem I am having is that the exception
Type 'myControls.Hyperlink' does not have a public property named
'custom-client-side-attr'.
I have tried PersistChildren(false), but that does not fix it. It has been a while since I have been in the depths of ASP.NET Web Forms and cannot remember how this is done.

You have to add those in server-code:
hl1.Attributes["custom-client-side-attr"] = "1";
You can still do it in the markup - you'd have to do it prior to the the declaration:
<% hl1.Attributes["custom-client-side-attr"] = "1"; %>
<myControls:Hyperlink ID="hl1" runat=server custom-client-side-attr="1"></<myControls:Hyperlink>

If you want an attribute like this, you have to create a property in for the user control. You may use viewstate or hidden control to keep the property persistent. Your code may look something like this:
public string custom_client_side_attr
{
get {
if (ViewState["custom_client_side_attr"] != null)
{
return ViewState["custom_client_side_attr"].ToString();
}
return string.Empty;
}
set
{
ViewState["custom_client_side_attr"] = value;
//set custom atribute for the hyperlink here
}
}
And access the property through markup:
<myControls:Hyperlink id="myCustomControl" runat=server custom_client_side_attr="1"></<myControls:Hyperlink>
or in the code:
myCustomControl.custom_client_side_attr="1";

If your custom control derives from WebControl it seems to work as you want.

Related

Angular 10 | Add class name as variable to ngClass

I have 20+ elements, which all should use the same class (animate.css)
It is super annoying to change all classes if I want to edit the animation, so I saved the animation class in my service in a variable:
animClassSecond = "animate__animated animate__bounceInUp";
But I cant figure out how to add it to [ngClass], this does not work:
[ngClass]="{'select_elem':true, 'btn_2':true, 'dataService.animClassSecond':true}"
[ngClass]="{'select_elem':true, 'btn_2':true, 'this.dataService.animClassSecond':true}"
[ngClass]="{'select_elem':true, 'btn_2':true, this.dataService.animClassSecond:true}"
[ngClass]="{'select_elem':true, 'btn_2':true, dataService.animClassSecond:true}"
Its either a template error or it does not resolve to the variable. Any ideas?
P.S.: Adding a second [ngClass] attribute also does not work, because the first one is ignored.
is:
[ngClass]="dataService.animClassSecond"
But remember that you need declare the service public in the constructor
constructor(public dataService:DataService){}
NOTE you can use class and [ngClass] in the same tag:
class="select_elem btn_2" [ngClass]="dataService.animClassSecond"
This is probably not achievable in the template since the Angular template language is quite limited.
Just move the logic of ngClass object into your component.ts. There you can use all TypeScript's power
ngOnInit() {
this.ngClassObj = { [dataService.animClassSecond]: true };
}
or if you need it to be dynamic (use this one carefully because it might become a performance issue)
get ngClassObj() {
return { [dataService.animClassSecond]: true };
}
and then
[ngClass]="ngClassObj"

Why does returning partial view affect my styles from being applied to my partial view?

So,
I have bools for when to display a certain partial view and I noticed for one of my partial views, it displays correctly with the correct CSS styles and classes.
However, my other partial view does not display correctly (I get no errors in console too) and I have narrowed it down to this line of code seeing how this makes the difference:
#Html.ActionLink(#Culture.GetString("ResetPasswordViaQuestionAnswer"), "GetUserName", "Account", new { style = "color:black; background: none;" })
OR
#Culture.GetString("ResetPasswordViaQuestionAnswer")
Whenever I use #Html.ActionLink or #Url.Action to call my action to return my partial view, the CSS style breaks. None of my classes get properly added to my inputs and form elements.
The above calls this action:
[AllowAnonymous]
public ActionResult GetUserName()
{
LoginModel loginModel = new LoginModel();
GetUserName getUserName = new GetUserName();
loginModel.getUserName = getUserName;
loginModel.DisplayResetPasswordDialog = true;
return PartialView("Login", loginModel);
}
Which then goes to my Login partialview which inside a div contains:
#if(Model.DisplayChangePasswordDialog == true){
#Html.Partial("PasswordExp",new ViewModels.PasswordChangeViewModel())
}else if (Model.DisplayResetPasswordDialog == true){
#Html.Partial("ResetUserPassword", new ViewModels.GetUserName())
}else{
#Html.Partial("_login", Model)
}
Something in what I have done above is breaking the CSS styles and classes from being attached to my inputs. The view is loaded but the view is loaded incorrectly. No styles or classes are applied.
Why?
You can't (or shouldn't) redirect to a partial view because you're not going to be getting your _Layout file that contains your css and js.
Instead you should redirect to a view containing your partial view. That view should have a reference to your layout file.

generating page title with razor script - umbraco

So I am trying to create a script whereby depending on the document type of the page a certain pre-defined title tag format will appear, if there is nothing already written in an overwriting custom title input. I have inserted the macro within the title tag on my master template but keep on getting an Error loading Razor Script message .
Html
<title>
<umbraco:Macro Alias="NewPageTitle" runat="server"></umbraco:Macro>
</title>
Script -
#inherits umbraco.MacroEngines.DynamicNodeContext
#using umbraco.MacroEngines
#{
if(String.IsNullOrEmpty(#Model.tabName.ToString()) == false )
{
#Model.tabName
}
else if(#Model.DescendantsOrSelf("Country"))
{
<text>
Holidays in #Model.Name
</text>
}
else
{
#Model.Name;
}
}
Any help would be greatly appreciated.
Try this code out. The problem with your original code is that you were using "#Model.DescendantsOrSelf("Country")" as a boolean, and it is a list. I also removed your comparison for if(String.IsNullOrEmpty(#Model.tabName.ToString())).
Also, if you add ?umbDebugShowTrace=true to the end of your URL, you can get some valuable debugging information. There is a Chrome Extension called "Umbraco Debug" that I use to quickly access that query string and information. You may find it useful.
#inherits umbraco.MacroEngines.DynamicNodeContext
#using umbraco.MacroEngines
#{
if(String.IsNullOrEmpty(#Model.tabName.ToString()))
{
#Model.tabName
}
else if(#Model.DescendantsOrSelf("Country").Count() > 0)
{
<text>
Holidays in #Model.Name
</text>
}
else
{
#Model.Name;
}
}
its very simple just add following code into your title tag
#Umbraco.Field("pageName")
will display pageName,you may also add custom properties from document type.
e.g. you have added new property like "metaKeywords" with value "html,javascript,xml",fetch that values as following way...
#Umbraco.Field("metaKeywords")
even you don't need to add custom properties in your model

Forced to use template?

This code from Dart worries me:
bool get isTemplate => tagName == 'TEMPLATE' || _isAttributeTemplate;
void _ensureTemplate() {
if (!isTemplate) {
throw new UnsupportedError('$this is not a template.');
}
...
Does this mean that the only way I can modify my document is to make it html5?
What if I want to modify an html4 document and set innerHtml in a div, how do I achieve this?
I am assuming you are asking about the code in dart:html Element?
The method you are referring to is only called by the library itself, and only in methods where isTemplate has to be true, for example this one. If you follow this link, you can also read what other fields/methods work like this.
innerHtml is a field in every subclass of Element which supports it, for example DivElement
Example:
DivElement myDiv1 = new DivElement();
myDiv1.innerHtml = "<p>I am a DIV!</p>";
query("#some_div_id").innerHtml = "<p>Hey, me too!</p>";

Remove attributes using HtmlAgilityPack

I'm trying to create a code snippet to remove all style attributes regardless of tag using HtmlAgilityPack.
Here's my code:
var elements = htmlDoc.DocumentNode.SelectNodes("//*");
if (elements!=null)
{
foreach (var element in elements)
{
element.Attributes.Remove("style");
}
}
However, I'm not getting it to stick? If I look at the element object immediately after Remove("style"). I can see that the style attribute has been removed, but it still appears in the DocumentNode object. :/
I'm feeling a bit stupid, but it seems off to me? Anyone done this using HtmlAgilityPack? Thanks!
Update
I changed my code to the following, and it works properly:
public static void RemoveStyleAttributes(this HtmlDocument html)
{
var elementsWithStyleAttribute = html.DocumentNode.SelectNodes("//#style");
if (elementsWithStyleAttribute!=null)
{
foreach (var element in elementsWithStyleAttribute)
{
element.Attributes["style"].Remove();
}
}
}
Your code snippet seems to be correct - it removes the attributes. The thing is, DocumentNode .InnerHtml(I assume you monitored this property) is a complex property, maybe it get updated after some unknown circumstances and you actually shouldn't use this property to get the document as a string. Instead of it HtmlDocument.Save method for this:
string result = null;
using (StringWriter writer = new StringWriter())
{
htmlDoc.Save(writer);
result = writer.ToString();
}
now result variable holds the string representation of your document.
One more thing: your code may be improved by changing your expression to "//*[#style]" which gets you only elements with style attribute.
Here is a very simple solution
VB.net
element.Attributes.Remove(element.Attributes("style"))
c#
element.Attributes.Remove(element.Attributes["style"])