I have to integrate a design that includes this kind of menu item:
<div class="cell first">
<a href="#">
<div id="m_account" class="img"></div>
<div class="menu_item">my account</div>
</a>
</div>
How can I make an ActionLink to provide this kind of code?
I sometimes use areas so some links must have new {area = "MyAccount"} attribute.
Thanks.
You can do this:
<div class="cell first">
<a href="#url.Action("YourAction")">
<div id="m_account" class="img"></div>
<div class="menu_item">my account</div>
</a>
</div>
There is no link in this HTML that an ActionLink can replace :
<div class="cell first">
<a href="#">
<div id="m_account" class="img"></div>
<div class="menu_item">my account</div>
</a>
</div>
if you wanted to do something like this:
<a href="myAccount/Login" class="img" id="m_account"/></a>
that would be written like:
#Html.ActionLink("ActionName", "ControllerName", new { id = "m_account", #class = "img" })
you just put any attribute name and values in the second part of the ActionLink
Instead of using Html.ActionLink, use Url.Action
<div class="cell first">
<a href="#(Url.Action("ActionName", "ControllerName"))">
<div id="m_account" class="img"></div>
<div class="menu_item">my account</div>
</a>
</div>
Related
I wish to create a UI like this using .NET core MVC framework.
what should my view be like?
i tired looping through each data model and embedding razor code into the same bootstrap tempate but i'm not getting anywhere near the desired functionality.
<div class="container h-100 w-100">
<div class="row w-100 ml-0 mr-0 mt-0 mb-0">
<div class="col-3">
<div class="list-group" id="list-tab" role="tablist">
#{
foreach(var user in Model)
{
<a class="list-group-item list-group-item-action" id="list-#user.FirstName-list" data-toggle="list" href="##user.FirstName" aria-controls="#user.FirstName" role="tab">
#Html.DisplayFor(modelItem => user.FirstName)
</a>
}
}
</div>
</div>
<div class="col-9">
<div class="tab-content" id="nav-tabContent">
#{
foreach(var user in Model)
{
<div class="tab-pane fade show " id="list-#user.FirstName" role="tabpanel" aria-labelledby="list-#user.FirstName-list">
<p>#Html.DisplayFor(modelItem => user.FirstName)</p>
</div>
}
}
</div>
</div>
</div>
</div>
The first part of the list group is getting displayed but when i try clicking on it, i dont get to see the description
First, you are appending "list-" to id of your .tab-pane, while the href for list item does not have that prefix.
Second, you can make the first active selection via JavaScript. Avoid putting fade show in your razor code, or put the condition in loop such that it should add it to only first element.
HTML :
<div class="col-3">
<div class="list-group" id="list-tab" role="tablist">
#foreach (var user in Model)
{
<a class="list-group-item list-group-item-action" id="list-#user.FirstName-list" data-toggle="list" href="##user.FirstName" aria-controls="#user.FirstName" role="tab">
#Html.DisplayFor(modelItem => user.FirstName)
</a>
}
</div>
</div>
<div class="col-9">
<div class="tab-content" id="nav-tabContent">
#foreach (var user in Model)
{
<div class="tab-pane" id="#user.FirstName" role="tabpanel" aria-labelledby="list-#user.FirstName-list">
<p>#Html.DisplayFor(modelItem => user.FirstName)</p>
</div>
}
</div>
</div>
</div>
</div>
JS :
<script>
$(".tab-pane").first().addClass("fade show active");
$(".list-group-item").first().addClass("active");
</script>
I know there are a lot of questions surrounding this topic online however I cannot get any of the solutions to work for me.I have tried numerous way suggested online. I have a master page with my navigation bar code and I want the active link to be highlighted in green when I am on a particular page of the website. I can't figure out what I am doing wrong or missing to get this to work. I am new to ASP.Net and C# so any help would be appreciated.
Here is my current code in body tags of my master page:
<script>
$(document).ready(function () {
var url = window.location;
$('.sidebar .nav').find('.active').removeClass('active');
$('.sidebar .nav li a').each(function () {
if (this.href == url) {
$(this).parent().addClass('active');
}
});
});
</script>
<form id ="form1" runat="server">
<div class="wrapper">
<div class="sidebar" data-color="green" data-image="../assets/img/side-navship.jpg">
<div class="logo">
<a href="Default.aspx" class="simple-text">
Speed-E
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="">
<a href="<%= Page.ResolveUrl("~/Default.aspx") %>">
<i class="material-icons">dashboard</i>
<p>Home</p>
</a>
</li>
<li class="">
<a href="<%= Page.ResolveUrl("~/NewCert.aspx") %>">
<i class="material-icons">content_paste</i>
<p>New Certificate</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-transparent navbar-absolute">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> </a>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<asp:ContentPlaceHolder ID="BodyContent"runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>
<div class="col-xs-6 text-right margin-top-x5">
<div class="adduser pointer" data-url="#Url.Action("Register","Account")"><span class="glyphicons glyphicons-user"></span> Add New User</div>
</div>
On FireBug i can see but it not going to that action.
<div class="adduser pointer" data-url="/Account/Register">
If you want a div to be clickable, you have to give it some code to do something when the user clicks it.
$(function() {
$("[data-url]").click(function() {
location.href = $(this).data("url");
});
}
Alternatively, just use an anchor:
<a class="adduser pointer" href="#Url.Action("Register","Account")">
<span class="glyphicons glyphicons-user"></span> Add New User</a>
#Url.Action("Register","Account") is supposed to only print out the URL of the respective action at the specific place.
What you need instead is #Html.Action. Read more about it here
Are you possibly attempting to use an anchor?
<div class="col-xs-6 text-right margin-top-x5">
<a class="adduser pointer" href="#Url.Action("Register","Account")">
<span class="glyphicons glyphicons-user"></span> Add New User</div>
Or you could use a Html.ActionLink
<div class="col-xs-6 text-right margin-top-x5">
<span class="glyphicons glyphicons-user" />
#Html.ActionLink("Add New User", "Register", "Account", null, new { #class = "adduser pointer" })
I have in an aspx page, some constructions like this:
<div class="weather time-morning active">
<div class="icon">
<i class="sun"></i>
</div>
<div class="content">
<h3>Morning</h3>
<div class="degrees">- 1</div>
<div class="data">
<h2>Sunny</h2>
<div>Wind: E 7 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>
I want in code behind to apply various classes to the tag (and/or add more than one tags, in conjunction to various conditions:
switch (response.currently.summary.ToString())
{
case ("Partly Cloudy"):
//do something
//< i class="cloud windy"></i>
break;
case ("Sunny"):
//do something
//<i class="sun"></i>
//<i class="cloud"></i>
//<i class="sprinkles"></i>
break;
}
I have to say that I started from a static HTML page that mimic the behaviour I want.
Any hints please?
L.E.
For being more precise the whole HTML construction is (statically) like this:
<section>
<div class="weather time-morning active">
<div class="icon">
<i class="sun"></i>
</div>
<div class="content">
<h3>Morning</h3>
<div class="degrees">- 1</div>
<div class="data">
<h2>Sunny</h2>
<div>Wind: E 7 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>
<div class="weather time-day">
<div class="icon">
<i class="sun"></i>
<i class="cloud windy"></i>
</div>
<div class="content">
<h3>Day</h3>
<div class="degrees">+ 3</div>
<div class="data">
<h2>Mostly Sunny</h2>
<div>Wind: N 5 mph</div>
<div>Humidity: 45%</div>
</div>
</div>
</div>
<div class="weather time-evening">
<div class="icon">
<i class="sun"></i>
<i class="cloud"></i>
<i class="sprinkles"></i>
<i class="sprinkles"></i>
<i class="sprinkles"></i>
<i class="sprinkles"></i>
</div>
<div class="content">
<h3>Evening</h3>
<div class="degrees">0</div>
<div class="data">
<h2>Rainy</h2>
<div>Wind: W 12 mph</div>
<div>Humidity: 91%</div>
</div>
</div>
</div>
<div class="weather time-night">
<div class="icon">
<i class="moon"></i>
<i class="cloud"></i>
<div class="snowflakes">
<i class="snowflake"></i>
<i class="snowflake"></i>
<i class="snowflake"></i>
<i class="snowflake"></i>
</div>
</div>
<div class="content">
<h3>Night</h3>
<div class="degrees">- 2</div>
<div class="data">
<h2>Cloudy</h2>
<div>Wind: N 2 mph</div>
<div>Humidity: 47%</div>
</div>
</div>
</div>
</section>
and here conditionally I have to change the tags accordingly to the switch values.
Initially, you have to make your div elements enabled for server side control. In terms of code:
<div id="DivId" runat="server"></div>
Then you could make your checks in your server side code and add the class you want like below:
DivId.CssClass="the name of the css class";
The 'nice' way of doing this would be to change the control you are trying to modify to runat="server" in your aspx
<div id="weatherDiv" runat="server">
And then in your code behind, you can now access the div:
weatherDiv.CssClass = "weather time-morning active";
You can also hack a more MVC Razor paradigm to this with Bind <%#, without the need for a control:
.cs Code Behind
protected string GetWeatherClass(bool extraSprinkles)
{
return extraSprinkles
? "extraSprinkesClass"
: "";
}
.ASPX
<div class="weather <%# GetWeatherClass(true) %>">
based on suggestions, finally I have this approach (don't know if the best, but at least it woks)(MorningTime, MorningDay etc. are ID for corespinding tags):
switch (response.currently.icon.ToString())
{
case ("clear-day"):
//do something
MorningTime.Attributes.Add("class", "sun");
MorningType.Attributes.Add("class", "sun");
DayTime.Attributes.Add("class", "sun");
DayType.Attributes.Add("class", "sun");
break;
case ("partly-cloudy-day"):
//do something
MorningTime.Attributes.Add("class", "sun");
MorningType.Attributes.Add("class", "cloud windy");
DayTime.Attributes.Add("class", "sun");
DayType.Attributes.Add("class", "cloud windy");
EveningTime.Attributes.Add("class", "sun");
EveningType.Attributes.Add("class", "cloud windy");
NightTime.Attributes.Add("class", "moon");
NightType.Attributes.Add("class", "cloud windy");
break;
case ("rain"):
and so on.
This question already has answers here:
RegEx match open tags except XHTML self-contained tags
(35 answers)
Closed 9 years ago.
I am trying to scrape specific html tags including their data from a google products page. I want to get all the <li> tags within this ordered list and put them in a list.
Here is the code:
<td valign="top">
<div id="center_col">
<div id="res">
<div id="ires">
<ol>
<li class="g">
<div class="pslires">
<div class="psliimg">
<a href=
"https://www.google.com">
</a>
</div>
<div class="psliprice">
<div>
<b>$59.99</b> used
</div><cite>google auctions</cite>
</div>
<div class="pslimain">
<h3 class="r"><a href=
"https://www.google.com">
google</a></h3>
<div>
dummy data </div>
</div>
</div>
</li>
<li class="g">
<div class="pslires">
<div class="psliimg">
<a href=
"https://www.google.com">
</a>
</div>
<div class="psliprice">
<div>
<b>$59.99</b> used
</div><cite>google auctions</cite>
</div>
<div class="pslimain">
<h3 class="r"><a href=
"https://www.google.com">
google</a></h3>
<div>
dummy data </div>
</div>
</div>
</li>
<li class="g">
<div class="pslires">
<div class="psliimg">
<a href=
"https://www.google.com">
</a>
</div>
<div class="psliprice">
<div>
<b>$59.99</b> used
</div><cite>google auctions</cite>
</div>
<div class="pslimain">
<h3 class="r"><a href=
"https://www.google.com">
google</a></h3>
<div>
dummy data </div>
</div>
</div>
</li>
<li class="g">
<div class="pslires">
<div class="psliimg">
<a href=
"https://www.google.com">
</a>
</div>
<div class="psliprice">
<div>
<b>$59.99</b> used
</div><cite>google auctions</cite>
</div>
<div class="pslimain">
<h3 class="r"><a href=
"https://www.google.com">
google</a></h3>
<div>
dummy data </div>
</div>
</div>
</li>
</ol>
</div>
</div>
</div>
<div id="foot">
<p class="flc" id="bfl" style="margin:19px 0 0;text-align:center"><a href=
"/support/websearch/bin/answer.py?answer=134479&hl=en">Search Help</a>
<a href=
"/quality_form?q=Pioneer+Automotive+PF-555-2000&hl=en&tbm=shop">Give us
feedback</a></p>
<div class="flc" id="fll" style="margin:19px auto 19px auto;text-align:center">
Google Home <a href=
"/intl/en/ads">Advertising Programs</a> <a href="/services">Business
Solutions</a> Privacy & Terms <a href=
"/intl/en/about.html">About Google</a>
</div>
</div>
</td>
I want to get all the <li class="g"> tags and the data in each of them. Is that possible?
instead of using a regex using something like an xml parser may be more useful to your situation. Load it up into an xml document and then use something like SelectNodes to get out your data you are looking for
http://msdn.microsoft.com/en-us/library/4bektfx9.aspx
I wouldn't use regex for this particular problem.
Instead I would attack it thus:
1)Save off page as html string.
2)Use aforementioned htmlagilitypack or htmltidy(my preference) to convert to XML.
3)Use xDocument to navigate through Dom object by tag and save data.
Trying to create a regex to extract data from a possibly fluid HTML page will break your heart.
Instead of using regex you can use HtmlAgilityPack to parse the HTML.
var doc = new HtmlDocument();
doc.LoadHtml(html);
var listItems = doc.DocumentNode.SelectNodes("//li");
The code above will give you all <li> items in the document. To add them to a list you'll just have to iterate the collection and add each item to the list.