ASP.NET MVC C# show image from text url in database - c#

I have been searching for an answer for this but can't seam to find one.
<div class="text-center">
<img src="#Html.DisplayFor(model => model.Image)" class="img-thumbnail">
</div>
This is the section I'm using. Basically I'm inputting the url as text into the database and when I use the above code (in the details page) it shows the image in Internet Explorer, but not in Chrome.
I'm VERY new to this so I'm unsure how to do this.
Thanks

Use Url.Content as shown below since Model.Image has the URL:
<div class="text-center">
<img src="#Url.Content(Model.Image)" class="img-thumbnail">
</div>

Related

Is it possible to give name to Quasar Uploader in <form>

I have a <form> where I am using Vue.js and Quasar, and submits in as a HTML form in asp .net core 3.1
The problem is when I am using Quasar Uploader (https://quasar.dev/vue-components/uploader).
The functionality works fine, but when I submit the form (post i C# and .net core).
I cant get the the file in the controller.
As you can see from this example: https://codepen.io/cbrown___/pen/GRZwpxw
When the Uploader is rendered it does not have the attribute name. From the example above you have this input:
<input tabindex="-1" type="file" title="" class="q-uploader__input overflow-hidden absolute-full">.
I guess that is why I cant get it from my Controller. How can I solve this when I am using .net Core 3.1 to submit this form?
And I see no good solutinos in letting people upload files through my API before the record is created.
Is it a option here I do not see?
EDIT:
The <input> is on the plus-icon. So by using inspect elements you should be able to see that no name occurs.
EXAMPLE CODE:
HTML
<div id="q-app">
<div class="q-pa-md">
<div class="q-gutter-sm row items-start">
<q-uploader
url="http://localhost:4444/upload"
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
color="teal"
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="No thumbnails"
color="amber"
text-color="black"
no-thumbnails
style="max-width: 300px"
></q-uploader>
</div>
</div>
</div>
JS:
new Vue({
el: '#q-app'
})
If any body else need this I ended up with using this:
:name="'file_description[' + index + ']'"
That way each one got one name...and from another array I knew how many file_description it would be.

How do I download the HTML code of the url with the images NOT being hidden

I am trying to do some webscraping but when I download the html of the url the images are hidden but in my browser they are not "user-ad-row__image image image--is-hidden" instead of "user-ad-row__image image image--is-visible". Was seeing if webclient changed anything. Using the HtmlAgilityPack.
var url = "https://www.gumtree.com.au/s-motorcycles-scooters/wa/drz+400/k0c18322l3008845";
var httpClient = new HttpClient();
var html = await httpClient.GetStringAsync(url);
var htmlDocument = new HtmlAgilityPack.HtmlDocument();
WebClient client = new WebClient();
htmlDocument.LoadHtml(client.DownloadString(url));
<div class="user-ad-row__main-image-wrapper user-ad-row__main-image-wrapper--has-image"><img class="user-ad-row__image image image--is-hidden" src="" alt="Suzuki Drz-400E"></div>
</div>
<div class="user-ad-row__details">
<div class="user-ad-row__info">
<p class="user-ad-row__title">Suzuki Drz-400E</p>
<div class="user-ad-price user-ad-price--row"><span class="user-ad-price__price">$4,250</span>
<!-- -->
<!-- --><span class="user-ad-price__price-negotiable user-ad-price__price-negotiable--with-price">Negotiable</span>
<!-- -->
<!-- -->
<!-- -->
</div>
<ul class="user-ad-attributes">
<li class="user-ad-attributes__attribute">Learner Approved</li>
<li class="user-ad-attributes__attribute">6000 km</li>
</ul>
<p id="user-ad-desc-MAIN-1228533281" class="user-ad-row__description user-ad-row__description--regular">For sale 2008 Drz-400E excellent condition, well looked after starts first time evertime serviced about a month ago. Just paid 3 months rego. Call or text </p>
</div>
<div class="user-ad-row__extra-info">
<div class="user-ad-row__location"><span class="user-ad-row__location-area">Perth City Area</span>Perth<span class="user-ad-row__distance"> </span></div>
<p class="user-ad-row__age">15/09/2019</p>
</div>
</div>
<button id="" type="button" class="user-ad-row__watchlist-heart-wrapper watchlist-heart Button__buttonBase--3YR6h Button__button--2NsdC Button__buttonBasic--3CSBx" role=""><span class="" aria-hidden="true"><span class="icon-heart heart"></span></span>
</button>```
The website that you provided loads images using Javascript and according to an internet search it appears that HtmlAgilityPack only renders the HTML but is unable to run Javascript.
Some solutions would be:
WebBrowser Class
It's kind of tricky if you want to mix it with the HtmlAgilityPack but provides decent performance.
Selenium
You can use Selenium+a webdriver for your prefered browser (Chrome, Firefox, PhantomJS). It is somewhat slow but is very flexible.
Javascript.Net
It allows you to run scripts using Chrome's V8 JavaScript engine. Near the bottom of the page there will be something like <script src="/latest/resources/react/app.full.something.js"></script>
If you are able to figure out how that loads then you should be able to get all of the images.

asp.net core html not updating

my html code:
<div class="header"></div>
<div class="tiles"></div>
<div class="list"></div>
<div class="footer"></div>
changed to:
<div class="header"></div>
<div class="content">
<div class="tiles"></div>
<div class="list"></div>
</div>
<div class="footer"></div>
I made a content div around tiles and list.
My problem is by doing that my html won't update in my browser.
and yes i already cleared my browser cache, I disabled caching in devtool.
I added no cache meta tag. I rebuild my solution, clean solution no luck. Whatever code i add or delete nothing happens. My css is updated not the html.
I tested it by just deleting my content and when I run my project I still had every content on my browser. What else can I do to fix this?

HtmlAgilityPack (C#) can't read past hidden text

using the following url:
link to search results page
I am trying to first scrape the text from the a tag from this html that can be seen from the source code when viewed with Firebug:
<div id="search-results" class="search_results">
<div class="searchResultItem">
<div class="searchResultImage photo">
<h3 class="black">
<a class="linkmed " href="/content/1/2484243.html">加州旱象不减 开源节流声声急</a>
</h3>
<p class="resultPubDate">15.10.2014 06:08 </p>
<p class="resultText">
</div>
</div>
<p class="more-results">
But what I get back when I scrape the page is:
<div class="search_results" id="search-results">
<input type="hidden" name="ctl00$ctl00$cpAB$cp1$hidSearchType" id="hidSearchType">
</div>
<p class="more-results">
Is there anyway to view the source the way Firebug does?
How are you scraping the page? Use something like Fiddler and check the request and the response for dynamic pages like these ones. The reason why Firebug sees more is because all of the dynamic elements have loaded already when you are viewing it in your browser, when in fact your scraping method is only one piece of the puzzle (the initial HTML).
Hint: For this search page, you will see that the request for the results data is actually a) a separate GET request with b) a long query string and c) a cookie on the header, which returns a JSON object containing the data. This is why the link you posted just gives me "undefined," because it does not contain the search data.

MVC 3 application hosted in web browser control on CE 6 not displaying images correctly

I have an MVC 3 application that we run on our handhelds inside a web browser control. The devices run either CE5 or CE6.
When an image is requested on CE5, the image is displayed fine, but on CE 6 the image appears to download but doesn't actually appear until the page is clicked.
Once this happens, the image is cached (somehow) and is fine going forward for that session.
Has anyone else encountered this problem?
This is the only other page I can find that mentions the issue but no solution is mentioned:
http://social.msdn.microsoft.com/Forums/en-US/vssmartdevicesvbcs/thread/0396d869-2ac2-4d38-8565-2d308eb8573a/
EDIT:
The view code is below. Model.DisplayItem would return a string like:
~/Areas/R2D2Picking/Content/images/M00119.jpg
The actual images are on a separate drive (rather than part of the solution) so we access these by creating the folder structure in the solution, excluding this from the build and creating a virtual directory under the relevant root in IIS. We use this method in many of our applications so I don't believe that this would itself be an issue.
#using R2D2Picking.Models.ViewModels;
#using System.IO;
#using System.Net;
#model ItemImageVM
<div class='backImage'>
<a href="#Url.Action("PickSelectedItems", "Common")" onfocus="if(this.blur)this.blur()">
<img alt='' src="#Url.Content("~/Areas/R2D2Picking/Content/ButtonImages/BackButton.bmp")" /></a>
</div>
<div class='smallPrompt'>
<p>#Model.DisplayLiteral</p>
</div>
#if (Model.ImageExists())
{
<div class='itemImage'>
<a href="#Url.Action("PickSelectedItems", "Common")">
<img alt='' src="#Url.Content(#Model.DisplayItem)" /></a>
</div>
}
else
{
<div class='noImage'>
<a href="#Url.Action("PickSelectedItems", "Common")">
<img alt='' src="#Url.Content("~/Areas/R2D2Picking/Content/ButtonImages/no_picture.bmp")" /></a>
</div>
}
A sample image is below:

Categories

Resources