I'm trying to make a menu for my app, and I'm trying to avoid repeating the same HTML code, so I want to put some data into array and loop it. It works fine for text, but I'm having trouble passing Bootstrap icons which are written in <i> markups.
I'm working on an MVC .NET project in cshtml file.
Here is what I have:
#{
string[] menuItems= {"Clients"};
}
<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
<i class="bi bi-people-fill clients"></i>
<span class="menu-item-text">#menuItems[0]</span>
</a>
And I'm trying to achieve something like this:
#{
string[,] menuItems= {"Clients", "<i class="bi bi-people-fill clients"></i>"};
}
<a class="nav-link menu-item" asp-area="" asp-controller="Calendar" asp-action="Calendar">
#menuItems[0,1]
<span class="menu-item-text">#menuItems[0,0]</span>
</a>
Is there a way to make HTML read the string as part of the code?
By default any text being emitted from the server is HTML-encoded. You can bypass this by using Html.Raw():
#Html.Raw(menuItems[0,1])
Note that this should be used with caution, because if you use this to output anything that's provided by user input or in any way editable by users then you are exposing your users to security risks.
This could be a good opportunity for you to investigate other ways to achieve the same functionality without this potential risk. For example, you could already have the markup in the view and use the dynamic data to show/hide the markup. Or not even rely on server-side code at all and style/change menu items client-side.
Related
I would like the change the layout of a web application but it is UTF-8 encoded. I have managed to use some online decoders and I know which part to modify but the decoding doesn't seem fully complete to work.
I want to move the div tag marked with * inside the previous one so instead of two lines I can have the data on one line which gives more on screen space.
<li class='ipsDataItem chat_row {{#callme}}ipsDataItem_new{{/callme}}' id='{{id}}'>
<div class='ipsPad_half {{#memberPhoto}}ipsPhotoPanel ipsPhotoPanel_tiny{{/memberPhoto}} ipsClearfix'>
{{#memberPhoto}}
<a href='{{memberUrl}}' class='ipsUserPhoto ipsUserPhoto_tiny' id='ips_uid_{{memberID}}'>
<img src='{{memberPhoto}}' alt=''>
</a>
{{/memberPhoto}}
<div>
<a href='#' data-action='mention' data-member='{{memberName}}'>{{{memberNameFormat}}}</a>
<span class='ipsPos_right'>
<span class='ipsType_small ipsType_light'>{{time}}</span>
{{#canEdit}}<a href='#' data-action='editMSGButton' data-id='{{id}}'><i class='fa fa-pencil-square'></i></a>{{/canEdit}}
{{#canDelete}}<a href='#' data-action='remove' data-id='{{id}}'><i class='fa fa-minus-square'></i></a>{{/canDelete}}
</span>
* <div class='ipsList_inline' id='chatraw_{{id}}' data-id='{{id}}' {{#canEdit}}data-action='editMSG'{{/canEdit}}>{{{message}}}</div>
</div>
</div>
</li>
This is the original encoded xml: https://pastebin.com/papiW75B
and this is what I managed to decode: https://pastebin.com/q24UfAEn. As you can see, the beginning part (line 1) is still a total mess but from line 2 forward it's all good.
What am I missing here? Should I do the decoding in another way?
I wouldn't describe that as being "UTF-8 encoded". It looks to me like obfuscated Javascript. It looks to me as if it's been deliberately obfuscated in order to prevent you doing what you are trying to do -- which I would describe more as reverse engineering rather than decoding. (Indeed, what you are trying to do might well be technically illegal unless you have permission from the copyright owner).
You've already done quite a good job at defeating the intentions of the people who created this application, and I don't think I can help you do any better.
I'm using the library JQuery Filer. It can upload files pretty well and can display the upload files.
I'm using templates to show the files icons (Like this example).
I tried put a link to download file by clicking over the icon. So I put the href for itemAppend template, but I need put the url.
<a href=" ? ">
<div class="jFiler-item-inner">
...
</div>
</a>
Because I retrieve a Json object like this:
{
"name":"appended_file.jpg",
"size":5453,
"type":"image\/jpg",
"file":"191a1a.jpg",
"url":"http:\/\/dummyimage.com\/720x480\/f9f9f9\/191a1a.jpg"
}
But I don't found a way to use a *fi-** personalized variable ti insert the url in href. I would like something like 'fi-url' to generate the link:
<a href='{{fi-url}}'>
<div class="jFiler-item-inner">
...
</div>
</a>
I think it would be a good feature. Anyone knows if JQuery filer allows personalized fi-* variables or there another method to put the link.
Thanks
I'm using the Froala editor v2 and I'm running into a very frustrating and intermittent problem. I'm embedding a custom HTML widget (a rich preview when the user enters a URL on its own line). But when I retrieve the final HTML to be saved to our database, it seems Froala decides to "clean up" my HTML before giving it to me. When I inspect the editor instance while I'm editing the content, all the markup is in good shape. But when I call $('.froala-editor').froalaEditor('html.get') to retrieve the HTML, the HTML for the URL preview widget is completely mangled.
My suspicion is that, since the entire preview is wrapped in an <a> tag to make the whole thing linked (and I don't have any nested <a> tags in it because that's bad HTML), Froala is taking the other structural elements like the divs, h# tags, p tags, etc and placing copies of the wrapping <a> tag inside all of them (as you'll see in the code samples) because it doesn't think you're allowed to have an <a> wrapping all that stuff. But that's just a guess.
And to top it all off, sometimes Froala will give me the HTML intact and other times it won't.
I don't think it makes any difference, but I'm using React to generate the widget and then injecting the resulting HTML into the editor. I've removed all the data-reactid attributes to reduce the clutter.
Original injected HTML (the outermost <p> tags are there because Froala seems to like to wrap everything in semantic block level tags):
<p>
<a href="http://www.google.com" target="_blank" class="embedly-preview" title="http://www.google.com" data-source-url="http://www.google.com">
<span class="ui media content-item-wrapper content-summary post-body">
<span class="media-left content-summary-image post-image">
<img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com%2Fimages%2Fbranding%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
</span>
<span class="media-body content-summary-body">
<h2 class="content-summary-title content-title post-title">Google</h2>
<p class="content-summary-content post-content">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</p>
<p class="content-summary-link">http://www.google.com</p>
</span>
</span>
</a>
</p>
What Froala gives me:
<p>
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">
<span class="ui media content-item-wrapper content-summary post-body">
<span class="media-left content-summary-image post-image">
<img src="https://res.cloudinary.com/peerlyst/image/fetch/http%3A%2F%2Fwww.google.com…randing%2Fgooglelogo%2F1x%2Fgooglelogo_white_background_color_272x92dp.png">
</span>
<span class="media-body content-summary-body"></span>
</span>
</a>
</p>
<h2 class="content-summary-title content-title post-title">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Google</a>
</h2>
<p class="content-summary-content post-content">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.</a>
</p>
<p class="content-summary-link">
<a class="embedly-preview" data-source-url="http://www.google.com" href="http://www.google.com" target="_blank" title="http://www.google.com">http://www.google.com</a>
</p>
The problem is not the editor, but the HTML structure you have. You have used a H2 tag inside a P tag which browsers do not allow (see https://stackoverflow.com/a/8696078/1806855 for more details) You could check that in a very basic jsFiddle: https://jsfiddle.net/0jLzm2b0/.
Instead it should work just fine if you'd use a DIV tag instead: https://jsfiddle.net/0jLzm2b0/1/. You can see the output is no longer changed.
After digging into the Froala code using a breakpoint to isolate the point at which the HTML gets mangled, turns out it's actually jQuery that's mangling my HTML. Effectively, given the original HTML from above in the variable html:
$(html).html() !== html
What's even more interesting is that (taking the relevant snippet from Froala's code where it wraps the fetched HTML in a div before processing):
$('<div>' + html + '</div>').html() !== $(html).html() !== html
(Clearly, wrapping html in a <div> will make the HTML not equal to the others, but even the HTML inside the <div> that is output is mangled from the original)
So the jQuery constructor is the thing being "helpful" by retooling my HTML for me.
So this is actually a very tricky concept to portray so here is my attempt.
I am utilizing an HTML form template in LANDesk Service Desk - tool is irrelevant but important to note that there is back-end code that I cannot touch that is generating HTML.
So basically, the tool is pulling data from a back-end database containing a list of objects. It then inputs this data into an HTML form template that I have created using variables as placeholders for the objects. The HTML is then built on the fly with however many objects are in the database. Thus, I have no way of accessing the head - (which means native JS, and inline CSS).
My template looks like this...
<div class="my-template">
<a class="my-template my-link">My Link</a>
</div>
<script>
var myLinks = document.getElementsByClassName('my-link');
for (var i = 0 ; i < myLinks.length ; i++) {
myLinks[i].style.display = "none";
}
</script>
When I view the source on the loaded page it looks something like this...
<body>
<!--misc. page stuff-->
<!--First Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
<!--Second Item-->
<div class="auto-create">
<div class="my-template">
<a class="my-template my-link">My-Link</a>
</div>
</div>
</body>
All of the elements are formatted the way I want them to be...besides the last element on each page. I have determined that this is because each time the tool is running the object through the template, it is running the script. The issue is, there is a stupid default button that they place at the bottom of each object that is broken. (This is why I have the script changing the style to display: none..should have mentioned this earlier). Basically I want to delay the execution of the script until not only the object has been run through the template...but the entire page has loaded...but I can't seem to get the last button to go away.
I know that this is a lot of poorly written words trying to form an explanation, but I really think this is impossible...but I am convinced there has to be a way. (Also, the company isn't providing us with any help in finding a workaround, so I had to basically MacGyver this one
I am working on building an application which has a few HTML components.
Use Case:
I am trying to achieve something similar what is present here. I want to call the HTML components on click of a menu and apply some actions like drag and resize, etc.
Research:
I was advised to take an object-oriented approach for building the application and hence while going through Google came across class.js for JavaScript inheritance.
I went through the initial tutorials, but I am not sure how and where can I store the HTML initially that will hold the structure for the HTML components?
In the reference application they have used backbone.js and require.js, but I am a bit short on time to learn these.
My Work So Far:
What I have tried is creating a file components.js and creating the outer HTML structure for a component like this:
var textBox = '<div class="structure-textBox">
<div class="editable">
<p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
<ol>
<li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
<li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
</ol>
<p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
<p><span style="font-size:14px;">Click on the <strong><u>Design Assistance</u></strong> link for further help.</span></p>
</div>
</div>';
This is a text box stored in a JavaScript variable that I want to add when user clicks on a menu. But how can it be achieved using class.js's inheritance pattern?
I have a canvas page created and menus for the components. Now I am stuck at this part of getting the html content and displaying it on the canvas.
I don't see that what you're asking has anything to do with inheritance.
There are several simple ways to put something on your web page using JavaScript.
For instance, if you have the following on your page somewhere <div id='target'></div>, you could write this:
var textBox = '<div class="structure-textBox">
<div class="editable">
<p><span style="font-size:20px;"><span style="font-family: arial,helvetica,sans-serif;"><strong>Text Box</strong></span></span></p>
<ol>
<li><span style="font-size:14px;">Double Click on the <strong>Text Box</strong> to Edit Text.</span></li>
<li><span style="font-size:14px;">For easy use of the text editor click on the "i" (to the left of the x close) and watch a 30 sec video tutorial.</span></li>
</ol>
<p><span style="font-size:14px;"><span style="color:#7cba0c;">Enjoy web designing with GoBiggi.</span></span></p>
<p><span style="font-size:14px;">Click on the <strong><u>Design Assistance</u></strong> link for further help.</span></p>
</div>
</div>';
document.getElementById('target').innerHTML = textBox;
For best results, I would suggest learning to use a library like jQuery. These tools are designed to make it easier to manipulate the HTML of the page, among other things.