asp.net literal.text using multiple lines of html code - asp.net

I am trying to initialize a literal with a big sequence of html code.
for example this is working just fine:
Literal1.Text.= "<ul><li>home<li/><ul/>";//just fine
But:
When i have more than one lines it doesn't work:
Literal1.Text.= "<ul><li>home
</li></ul>";//error
I know a simple solution which is this:
Literal1.Text.= "<ul><li>home"+
"</li></ul>";//nice but time wasting for many lines
But:
When i have 100 lines for example i don't want to spend my time concatenating the strings.Is there any more practical solution?
Specifically my html code is the folowing:
Literal1.Text.= "<ul id="nav">
<li class="current">Home</li>
<li>People
<ul>
<li>Customers
<ul>
<li>View</li>
<li>Edit</li>
<li>Print</li>
<li>Delete</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Edit</li>
<li>Print</li>
<li>Delete</li>
</ul>
</li>
</ul>
</li>
<li>Quotations
<ul>
<li>Create</li>
<li>Edit</li>
<li>View</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Create</li>
<li>Edit</li>
<li>View</li>
</ul>
</li>
<li>Receipts
<ul>
<li>Create</li>
<li>Edit</li>
<li>View</li>
</ul>
</li>
<li>Statements
<ul>
<li>Create</li>
</ul>
</li>
<li>About Us</li>
<li class="style1">Contact Us</li>
</ul>";

For a small number of lines of code, I generally use StringBuilder. That way there are no performance issues with concatenating large immutable strings.
StringBuilder sb = new StringBuilder();
sb.Add("<ul><li>home");
sb.Add("</li></ul>");
For a large number of lines, don't put them in your code at all. Read them in using System.IO.File, so that you can edit your HTML without worrying about doubling your quotes. If you're using the code a lot, read it in once using a static class so that you're not causing a lot of extra IO usage. Something like this (untested):
public static class HTMLStringClass
{
private static string html;
public static string GetHtmlString()
{
if (string.IsNullOrEmpty(html))
html = File.ReadAllText("path/to/file");
return html;
}
}
And then call it by doing this:
Literal1.Text = HtmlStringClass.GetHtmlString();

Use a verbatim string literal (one that starts with #):
Literal1.Text = #"<ul><li>home
</li></ul>";

Related

Difficulty in making Python dictionary (xpath/CSS selector)

I have a below code and would like to make a dictionary as {"100":"ABC"} and {"200":"DEF"}
<ul class="net">
<li id="100">
<a>ABC</a>
</li>
<li id="200">
<a>DEF</a>
</li>
</ul>
I tried with below code but I don't know how to pass a variable in xpath attribute.
list_of_id = response.css('ul.net>li::attr(id)').extract()
for i in list_of_id:
j = dict()
j[i] = response.xpath('//ul/li[#id="i"]/a/text()').extract()
Please help.
Change this:
j[i] = response.xpath('//ul/li[#id="i"]/a/text()').extract()
to this:
j[i] = response.xpath("//ul/li[#id="+i+"]/a/text()").extract()
You can use selectors to serve the purpose. Give it a shot:
html='''
<ul class="net">
<li id="100">
<a>ABC</a>
</li>
<li id="200">
<a>DEF</a>
</li>
</ul>
'''
from lxml.html import fromstring
tree = fromstring(html)
for item in tree.cssselect(".net li"):
num = item.attrib['id']
name = item.cssselect("a")[0].text
item={num:name}
print(item)
Results:
{'100': 'ABC'}
{'200': 'DEF'}

access parent sub array key handlbars

I have the following array / sub array structure
"filters": {
"types": {
"34": "Ford",
"22": "Jeep",
"18": "Porsche",
},
"locations": [
"Earth",
"Mars",
"Moon",
]
}
and the following handlebars template
{{#if filters}}
{{#each filters}}
<div class="cars">
<ul class="cars__list">
<li class="cars-{{#key}}__title">Filter by {{#key}}:</li>
<li class="cars-{{#key}}__filters">
<ul>
<li class="cars-{{#key}}">View All</li>
{{#each this}}
<li class="cars-{{*want to access filters[key]*}} color={{#key}}">{{this}}</li>
{{/each}}
</li>
</li>
</ul>
</div>
{{/each}}
{{/if}}
I'm having trouble accessing the filters[types] and filters[locations] within the each this loop.
In my CSS I'm using a classes called .cars-type and .cars-location. I want to be able to style each list separately and unfortunately target each li with a class. I want to apply these styles within the each this loop.
I can do it within the filters loop by using {{#key}} but not in the each this loop
I've tried
<li class="cars-{{../filters}}">{{this}}</li>
but this just returns the car type like ford - I want the key ie. '34' in this case
<li class="cars-{{lookup ../filters #index}}">{{this}}</li>
using handlebars helper lookup but again no luck
<li class="cars-{{../this}}">{{this}}</li>
and the above which gives me [object Object]
I've checked out handlebars - is it possible to access parent context in a partial?, handlebars.js: relative paths in partials not working and Lookup helper in handlebars but no luck with any of the solutions
EDIT Here's the HTML output that I want to produce
<div class="cars">
<ul class="cars__list">
<li class="cars-types__title">Filter by types:</li>
<li class="cars-types__filters">
<ul>
<li class="cars-types">View All</li>
<li class="cars-types color-34">Ford</li>
<li class="cars-types color-22">Jeep</li>
<li class="cars-types color-18">Porsche</li>
</ul>
</li>
</ul>
<ul class="cars__list">
<li class="cars-locations__title">Filter by locations:</li>
<li class="cars-locations__filters">
<ul>
<li class="cars-locations">View All</li>
<li class="cars-locations color-0">Earth</li>
<li class="cars-locations color-1">Mars</li>
<li class="cars-locations color-2">Moon</li>
</ul>
</li>
</ul>
</div>
You should reconsider your HTML because a ul cannot be a direct child of another ul. See https://developer.mozilla.org/en/docs/Web/HTML/Element/ul#Usage_context
With that said, we can solve your problem. The Handlebars docs have our answer:
Nested each blocks may access the interation variables via depth based
paths. To access the parent index, for example, {{#../index}} can be
used.
Therefore, your problematic line should look like the following:
<li class="cars-{{#../key}} color-{{#key}}">{{this}}</li>

Handlebars - partial template not getting the context

I have pre compiled all my templates into one js file and loaded the js in the page.
I have 3 templates
Template 1 - a.handlebars
<ul>
{{#each this}}
<li class="a">
{{#key}}
{{> b}}
</li>
{{/each}}
</ul>
Template 2 - b.handlebars
<ul>
{{#each this}}
<li class="b">
{{#key}}
{{> c}}
</li>
{{/each}}
</ul>
Template 3 -c.handlebars
<ul>
{{#each this}}
<li class="c">
{{ this }}
</li>
{{/each}}
</ul>
I have the following JS which load data to the template
var menu= {
a1:{
b1:[c1, c2, c3],
b2: [c4, c5, c6]
},
a2:{
b3:[c7, c8],
b4: [c9]
}
};
Handlebars.templates.a(menu);
The first template (a.handlebars) loads a1 and a2. But when the first template loads the partials b.handlebars it fails. I tried to put a log statement to see what is that I am getting for "this". I got 4 spaces and it was of type string.
I do not understand why b.handlebar is getting a string when I thought I will be getting (example for a1)
{
b1:[c1, c2, c3],
b2: [c4, c5, c6]
}
Previously,I did not pre compile the handlebars. I had all the handlebars in my html and compiled it using Handlebars.compile it worked fine. I do not know why the code is failing after per compiling.
Any help is highly appreciated.
I am trying to get his as my final result:
<ul>
<li class="a">a1
<ul>
<li class="b">b1
<ul>
<li class="c">c1</li>
<li class="c">c2</li>
<li class="c">c3</li>
</ul>
</li>
<li class="b">b2
<ul>
<li class="c">c4</li>
<li class="c">c5</li>
<li class="c">c6</li>
</ul>
</li>
<li class="b">b3</li>
</ul>
</li>
<li class="a">a2
<ul>
<li class="b">b3
<ul>
<li class="c">c7</li>
<li class="c">c8</li>
</ul>
</li>
<li class="b">b4
<ul>
<li class="c">c9</li>
</ul>
</li>
</ul>
</li>
</ul>
But I am getting this. Since the b.handlebars is not getting the object data.
<ul>
<li class="a">a1
<ul>
</ul>
</li>
<li class="a">a2
<ul>
</ul>
</li>
</ul>
My apologies for the very lengthy post. I have been trying to find a solution for this for a while now. Again, any help to resolve this issue would be great.
Thanks.
The issue was caused due to compiling the handlebar/template files using grunt.
Command: "grunt handlebars"
Once I compiled the files using handlers itself, the code started working.
Command: handlebars template_files -f output_file
If anyone knows how to make the compiled code work using grunt command I would definitely would like to know. Thanks.

How to dynamically set a menu item class name with MVC4?

For a new application we are using Bootstrap v3.0, which has the navigation menu defined as follows:
<div id="sidebar">
<ul>
<li class="active"><i class="icon-home"></i> <span>Dashboard</span></li>
<li class="submenu">
<i class="icon-beaker"></i> <span>UI Lab</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Interface Elements</li>
<li>jQuery UI</li>
<li>Buttons & icons</li>
</ul>
</li>
<li class="submenu">
<i class="icon-th-list"></i> <span>Form elements</span> <i class="arrow icon-chevron-right"></i>
<ul>
<li>Common elements</li>
<li>Validation</li>
<li>Wizard</li>
</ul>
</li>...
This is currently sitting in a shared _Layout.cshtml, and don't currently see a need to move this into its own shared view.
The layout template consists of several static files with <li class="active"> hard coded for the corresponding menu item within that file.
Since I'm building this with MVC4, I would like to know how to dynamically set this, based on the view being displayed.
Not sure best practice on this. You could try something like this:
<li class="#( RouteVariable.CurrentController.Equals("Home") ? "active" : "")">
Or RouteVariables.CurrentAction may be of use.

Logic for displaying infinite category tree in nested <ul>s from Self Join Table

Please help me solve my big problem.
in my on-line shopping project i created a dynamic Category List (with Infinite Level Depth) Implemented in a Single Table in DB with Self join.
the schema is like below:
(source: aspalliance.com)
Update
I want to use a JQuery plugin to make a Multi Level Menu bar. this plugin uses <ul> and <li> elements so I should transform the DB table to <ul> and <li>. the result should like this:
<ul>
<li>Clothing 1
<ul>
<li>Trousers 2
<ul>
<li>Mens trousers 3</li>
<li>Ladies trousers 3</li>
</ul>
</li>
<li>Jackets 2</li>
<li>Shirts 2</li>
<li>Shoes
<ul>
<li>Mens shoes 3
<ul>
<li>Mens formal shoes 4</li>
<li>Mens casual shoes 4</li>
</ul>
</li>
<li>Kids shoes 3</li>
<li>Ladies shoes 3</li>
</ul>
</li>
</ul>
</li>
<li>Cars 1
<ul>
<li>Small cars 2</i>
</ul>
</li>
</ul>
I can use a nested data control(like repeater control) but you know, with this solution i just can implement a list with non-infinite hierarchical tree structure.
please help me! any suggestion?? I googled the web but not a suitable way found. I use ASP.net 3.5 and LINQ.
what is the best way?
Use this recursive method
private string GenerateUL(IQueryable<Menu> menus)
{
var sb = new StringBuilder();
sb.AppendLine("<ul>");
foreach (var menu in menus)
{
if (menu.Menus.Any())
{
sb.AppendLine("<li>" + menu.Text);
sb.Append(GenerateUL(menu.Menus.AsQueryable()));
sb.AppendLine("</li>");
}
else
sb.AppendLine("<li>" + menu.Text + "</li>");
}
sb.AppendLine("</ul>");
return sb.ToString();
}
like this
DataClasses1DataContext context = new DataClasses1DataContext();
var s = GenerateUL(context.Menus.Where(m => m.ParentID == null));
Response.Write(s);
I think ASP.NET TreeView is your friend.
Take a look here too.
Also, you might want to use a dynamically created nested DataGrid or Repeater, here is an example (you can make it dynamic, so the nested (or even the parent) repeaters are genenerated programmatically.
void GenerateChildren(Menu menu)
{
//Create DataGridRow/RepeaterRow/TreeViewNode/whatever for this menu
menu.Children.Load();
foreach (var child in menu.Children)
{
GenerateChildren(child);
}
}
Update
See example 5 on this page.
I would recommend generating the jQuery code by server, so it's easier for you to control both the menus and the jQ generated menus.

Resources