How to get href value in using HtmlAgilityPack? - html-agility-pack

How do I retrieve the values of HREF Tag using HTML AgilityPack?
<div class="row">
<div class="col-sm-24 businessCapsule--ctas">
<a href="http://www.xyz.coo.in" data-tracking="FLE:WL:CLOSED" class="businessCapsule--ctaItem" target="_blank" rel="nofollow noopener">
<div class="icon icon-Business-website" title="Website"></div> Website</a>
<div class="businessCapsule--telephone">
<div class="business--telephone business--telephone-noMarginRight">
<span class="icon icon-phone business--telephoneIcon"></span>
<div class="business--telephoneContent">
<span class="business--telephonePrefix">Tel</span>
<span class="business--telephoneNumber" itemprop="telephone">154 75 695 451 </span>

Try with a.Attributes.First().Value;
Where "a" is the HtmlNode that you want

Related

In Laravel how can I make a side bar when pressed goes to the page content link but still is the current page

I want to have the same mechanism like this https://www.w3schools.com/html/default.asp but in laravel application
This is my code on routes/web.php
Route::get('tutorial', function(){
$tutorial = Tutorial::get();
return view('tutorial.index')->with('tutorial', $tutorial);
})->name('index-tutorial');
// Show one Tutorial by Id
Route::get('tutorial/{id}', function($id){
$tutorial = Tutorial::findOrFail($id);
return view('tutorial.show')->with('tutorial', $tutorial);
})->name('show-tutorial');
for my Blade template
tutorial/show.blade.php
<div class="container">
#foreach($tutorial as $tutorial)
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3" role="group">
<form class="mx-3" action="{{route('delete-tutorial', $tutorial->id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('edit-tutorial', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
#endforeach
</div>
tutorial/index.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-
auto text-white text-decoration- none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($tutorial as $link)
<li class="nav-item">
<a href="{{route('show-tutorial', $link->id)}}" class="nav-
link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
I been researching a lot about having this mechanism
This one is different from other questions because i don't use controllers for this
Have you tried using example tamplates from Bootstrap?
Check here https://getbootstrap.com/docs/5.3/examples/
it's quite easy actually, you just need to copy the html code from bootstrap tamplate and tweak here and there. use
#include to add your desired components, #yield for your desired content page. and use #extends and #section inside your content pages.
roughly like this.
your main blade view
<!doctype html>
<html lang="en">
<head>
</head>
<body>
#include('partials.adminNav')
<div class="row">
#include('partials.adminSideBar')
</div>
<div class="container">
#yield('container')
</div>
</body>
#include('partials.footer')
</html>
for your side bar you just need to put links for your desired page
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">
<span data-feather="home" class="align-text-bottom"></span>
//Home
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="file" class="align-text-bottom"></span>
//links name
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="//your links/route for page content">
<span data-feather="edit" class="align-text-bottom"></span>
//Links name
</a>
</li>
</ul>
</div>
</nav>
in like this in your content pages
#extends('layouts.adminMain')
#section('container')
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div class="py-4">
// your content here
</div>
</main>
#endsection
make use of the #include and #yield build in function. this way you'll have a consistent navbar/sidebar but can changes the content within.
Hope this works for you :)
Instead of using route closures, I manage to convert them to a TutorialController
Route::resource('tutorial', TutorialController::class);
for the aside bar routes/web
view()->composer('layout.sidebar', function($view){
$tutorial = Tutorial::all();
$view->with('links', $tutorial);
});
layout/sidebar.blade.php
<main class="d-flex flex-nowrap">
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark"
style="width: 280px;">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto
text-white text-decoration-none">
<svg class="bi pe-none me-2" width="40" height="32"><use
xlink:href="#bootstrap"></use></svg>
<span class="fs-4 text-white">MySql Lessons</span>
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
#forelse($links as $link)
<li class="nav-item">
<a href="{{ route('tutorial.show', $link->id)}}" class="nav-link">
<p class="text-white bg-dark">{{$link->title}}</p>
</a>
</li>
#empty
<p class="text-white bg-dark">No available lesson</p>
#endforelse
</ul>
</div>
</main>
in my index.blade and show.blade you can add #include('layout.sidebar')
#extends('layout.app')
#section('title', "Show Tutorials")
#section('content')
#include('layout.sidebar')
<div class="container">
<h1>{{$tutorial->title}}</h1>
<p>{{$tutorial->title_description}}</p>
<p>{{$tutorial->title_lesson}}</p>
<div class="btn-group btn-group-lg d-flex justify-content-end mb-3"
role="group">
<form class="mx-3" action="{{route('tutorial.destroy', $tutorial-
>id)}}" method="POST">
#csrf
#method('DELETE')
<button class="btn btn-danger" name="Delete">Delete</button>
</form>
<form action="{{route('tutorial.edit', $tutorial->id)}}" method="GET">
#csrf
<button class="btn btn-primary" name="Edit">Edit</button>
</form>
</div>
#endsection

How can I display vue.js data in blade

I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component

How to extend views with shared Layout in Laravel?

I have a collection of views that i want them to share a specific layout.
I created the layout master.blade.php ,in a folder i named it layouts.
From the docs , i found that i need to add the tag #extends and section('content') in my view so it fits under the layout :
#extends('layouts.master')
#section('content')
<div style="background-color:white;width:963px;height:100%">
<div style="padding-top:100px;padding-bottom:200px">
<h2 style="color:sandybrown; text-align:center"><b style="padding-right:40px">Contactez nous</b></h2>
<br />
<hr width="50%" color="gris" />
<div class="row">
<div class="col-md-6" style="padding:5%">
<form method="post" asp-controller="Home" asp-action="RegisterContact" style="padding-left:20px">
<label><span style="color:blue">Nom et prenom</span></label>
<br />
<input size=" 40" style="border-color:darkorange" asp-for="Name"/>
<br />
<label><span style="color:blue">E-mail</span></label>
<br />
<input size=" 40" asp-for="Email" style="border-color:darkorange" />
<br />
<label><span style="color:blue">Message</span></label>
<br />
<textarea rows="10" cols="40" style="border-color:darkorange" asp-for="Message"></textarea>
<br />
<button style="background-color:blue;"><span style="color:white">ENVOYER</span></button>
....
#endsection
but when i click in the link in the view's link in the navbar , this is what i get ?:
so is there a missing part in the logic ?
Update:
the view and the layout are both under the same folder :
C:\xampp\htdocs\laravel\resources\views\layouts
the view's name wasn't ending with .blade.php , but doing so now i get an exception :
InvalidArgumentException in FileViewFinder.php line 137: View [layouts.WhoWeAre] not found.
this is the body code of the layout :
</div>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<div class="navbar-collapse collapse w-50">
<ul class="navbar-nav ml-auto">
<li class="nav-item navbar1 ">
<a class="nav-link" href="{{action('HomeController#WhoWeAre')}}"><span style="text-decoration: underline;"><B>Acceuil</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link" ><span style="text-decoration: underline;"><B>Qui somme nous</B></span></a>
</li>
<li class="nav-item navbar1">
<a class="nav-link"><span style="text-decoration: underline;"><B>Specialités</B></span></a>
</li>
</ul>
</div>
<div>
<img src="images/decoupage/nawrass-logo.png " class="rounded-circle bg-light">
</div>
<div class="navbar-collapse collapse w-50 ">
<ul class="navbar-nav mr-auto">
<li class="nav-item navbar2">
<a class="nav-link" >
<span style="text-decoration: underline;"><B>Contactez-nous</B></span>
</a>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/location.png" style="padding-top: 7px">
<span style="padding-top: 15px">Djerba Houmet Souk</span>
</li>
<li class="nav-item navbar2">
<div class="row">
<div class="col-md-3" style="padding-top: 7px">
<img src="images/decoupage/phone.png">
</div>
<div class="col-md-8" style="font-size: 16px;">
<span>75 620 660 </span>
<br>
<span>98 816 962</span>
</div>
</div>
</li>
<li class="nav-item navbar2">
<img src="images/decoupage/fb.png" style="padding-top: 7px">
</li>
</ul>
</div>
</nav>
<div class="container " style="min-height:100%; padding-left:120px;flex:1;display:flex;flex-direction:column;">
<div style="flex:1;display:flex;flex-direction:column;">
#yield('content')
</div>
</div>
<div id="footer">
<div class="jumbotron " style="margin-top:0 ; background-color:blue">
<div class="container ">
<div class="row">
<div class="col-md-6">
<div class="card mb-3 " style="background-color: blue">
<div class="row no-gutters">
<div class="col-md-3 ">
<img src="images/decoupage/logo-white.png" class="card-img" alt="my card image">
</div>
<div class="col-md-9 ">
<div class="card-body ">
<p class=" card-text text-white " style="font-size: 14.45px">
Bienvenu a centre de formation ennawres: formation en coiffure hommes et dames Langues {francais, anglais...} ,photographie..et plusieurs d'autres..
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2"></div>
<div class="col-md-4 ">
<br/>
<img src="images/decoupage/phone.png">
<span class="text-white">
75620660-98815952
</span>
<br>
<br>
<img src="images/decoupage/location.png">
<span class="text-white">
Houmet Souk Djerba,1Km Ajim
</span>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-4 text-white">
PROPULSE PAR MOSAIQUE WEB COPYRIGHT 2019
</div>
</div>
</div>
</div>
</div>
For information the click in the navbar "Qui sommes nous" link trigger this controller method:
public function WhoWeAre()
{
return view('layouts/WhoWeAre');
}
and this is routes.php :
Route::get('/', function () {
return view('welcome');
});
Route::get('/whoweare', 'HomeController#WhoWeAre');

xpath specific selection with condition

this might be simple, but I would like to select everything within <div class="rc-box-citations-body"> under the condition that it must belong to <div class="definitionBox" id="meaning-1-1">, thereby uniquely identifying it. How can I do that with xpath? Thanks.
<div class="definitionIndent">
<div class="definitionNumber">1.a</div>
<div class="definitionIndent">
<div class="definitionBox" id="meaning-1-1">
<span class="textmedium">
<span class="stampNoBorder">text</span>
<span class="definition">text</span>
</span>
</div>
<div class="definitionBox">
<div class="rc-box-citations">
<div class="rc-box-citations-top">
<span class="rc-citations-north-west"> </span>
<span class="rc-citations-north-east"> </span>
</div>
<div class="rc-box-citations-body"><span class="citat">text</span> <a class="sourcepop" href="javascript:void(0);"><span class="source">text</span><span class="popup">text</span></a></div>
<div class="rc-box-citations-bot">
<span class="rc-citations-south-west"> </span>
<span class="rc-citations-south-east"> </span>
</div>
</div>
</div>
</div>
</div>
If I modify your xml slightly, and take under the condition that it must belong to to mean that is a descendant of.... then this xpath works
//div[#class='definitionBox'][#id='meaning-1-2']//div[#class='rc-box-citations-body']
The XML is
<?xml version="1.0" encoding="utf-16"?>
<div class="definitionIndent">
<div class="definitionNumber">1.a</div>
<div class="definitionIndent">
<div class="definitionBox" id="meaning-1-1">
<span class="textmedium">
<span class="stampNoBorder">text</span>
<span class="definition">text</span>
</span>
</div>
<div class="definitionBox" id="meaning-1-2">
<div class="rc-box-citations">
<div class="rc-box-citations-top">
<span class="rc-citations-north-west"></span>
<span class="rc-citations-north-east"></span>
</div>
<div class="rc-box-citations-body">
<span class="citation">text</span>
<a class="sourcepop" href="javascript:void(0);">
<span class="source">text</span>
<span class="popup">text</span>
</a>
</div>
<div class="rc-box-citations-bot">
<span class="rc-citations-south-west"></span>
<span class="rc-citations-south-east"></span>
</div>
</div>
</div>
</div>
</div>
The tool I used is XPathVisualizer:

HtmlAgilityPack - selecting single node from a node collection using XPath

i have been fighting with this code for a few hours now....
Sample Node for results:
<div class="left vcard" sizcache="1" sizset="32">
<h2 class="clearfix fn org url" sizcache="1" sizset="32">
<a id="listItemTitle_11310540" href="/marcali/viragok-viragkuldes/11310540/ANDOK_MATYAS/hirdetes.mtt">ANDÓK MÁTYÁS</a> <a class="removeFromList" href="#">törlés</a>
</h2>
<p class="description">
2009 decemberében nyitottuk meg az Ezerszirom Virágbolt-ot Marcaliban a Petőfi Sándor u.11-ben. Szeretettel várja a kedves vásárlókat Horváth Györgyike virágkötő, aki 15 éve kápráztatja el kreatíva...</p>
<ul class="profession" sizcache="1" sizset="34">
<li sizcache="1" sizset="34">Virágok, virágküldés </li>
</ul>
<div class="clearfix margined" sizcache="1" sizset="35">
<p class="address adr">
<span>Cím:</span> 8700 Marcali, Petőfi S. utca 11 .</p>
<ul class="nav clearfix" sizcache="1" sizset="35">
<li class="mapLink" sizcache="1" sizset="35"><span>-</span><a class="mapLink" href="/terkep/11310540/ANDOK_MATYAS">térképen mutat</a> </li>
<li class="routeplanner" sizcache="1" sizset="36"><em>útvonaltervezés</em> <span>-</span> <a onclick="window.location = '/redirect.jspv?method=Redirect&routePlanCount=11310540&url=%2Futvonalterv.jspv%3Fto%3D%26from%3D8700+Marcali%2C+Pet%C5%91fi+S.+utca+11+.%26fromX%3D17.414611005499122%26fromY%3D46.57928886409497%26activeTab%3DrouteSearch&activeTab=routeSearch'" href="#">innen</a> <strong>/</strong> <span>-</span> <a onclick="window.location = '/redirect.jspv?method=Redirect&routePlanCount=11310540&url=%2Futvonalterv.jspv%3Ffrom%3D%26to%3D8700+Marcali%2C+Pet%C5%91fi+S.+utca+11+.%26toX%3D17.414611005499122%26toY%3D46.57928886409497%26activeTab%3DrouteSearch'" href="#">ide</a> </li>
</ul>
<div class="contacts" sizcache="1" sizset="38">
<div class="phoneHolder clearfix" sizcache="1" sizset="38">
<div class="dt phone">
Telefonszám:
</div>
<div class="dd phoneValue tel" sizcache="1" sizset="38">
<span>(70) 326 2843</span> <a class="clickToCall" onclick="javascript:openECS('11310540');" href="#">Hívja ingyen!</a>
</div>
</div>
<div class="webLinkHolder" sizcache="1" sizset="39">
<div class="dt webLink clearfix">
Weboldal:
</div>
<div class="dd webLinkValue" sizcache="1" sizset="39">
http://www.ezerszirom.hu
</div>
</div>
</div>
</div>
</div>
And my code:
results = htmlDoc.DocumentNode.SelectNodes("//div[contains(#class, 'vcard')]");
if (results != null)
{
foreach (var node in results)
{
Response.Write(node.SelectSingleNode("//p[#class='description']").InnerText + "<br>");
}
}
the problem ?
since i am iterating over the results, each node should have its own description,
but i am getting the InnerText of the first node.
any idea why?
In XPath, // stands for "recursively search from the root". Therefore the query doesn't search from the node you have, but gets the first from the document.
Try this:
node.SelectSingleNode("descendant::p[#class='description']")

Resources