I am working on my MVCOnlineShop Project, i made a product list page, now i want to show an image for each product, so i made an image table in SQL, in it imageID and imagepath, and in the product table i added imageID, i have searched on how to fetch the images from the database , but didn't understand that much, so can you please help me with my actionresult in my controller?
this is my productList PartialView:
#model MVCOnlineShop.Models.Category
#{
ViewBag.Title = "ProductList";
}
<script src="~/Scripts/Productjs/bootstrap.min.js"></script>
<script src="~/Scripts/Productjs/jquery.js"></script>
<link href="~/Content/Productcss/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/Productcss/2-col-portfolio.css" rel="stylesheet">
<div class="container">
<!-- Page Header -->
<div class="row">
#foreach (var Product in Model.Products)
{
<div class="col-md-6 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
#Html.ActionLink(Product.ProductName, "Details", new { id = Product.CategoryID })
</h3>
</div>
}
</div>
</div>
this view will show each product but with the same image, i want to change it to get the images in database.
Thanks in advance :)
Assuming every product has at least one image (otherwise you need to check for it's existence), and you use lazy loading in your EF model (otherwise you will need to "Include" the Images property) change this:
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
into this:
<img class="img-responsive" src="#Product.Images.First().Imagepath" alt="">
You may need to change the spelling of the various properties, I had to guess at them.
Related
I use Grapesjs editor. And now I know only 1 way to store the content.
The situation is the following:
I have Grapesjs block 'About us' which I populate with child cards components. And then I get the content with editor.getHtml() and I may get something like this:
<section class="sect-home-about">
<div class="container">
<div class="title-sect"><h2>Über uns</h2></div>
<div class="about-wrap">
<div class="about-line" id="i94s">
<div class="about-itm">
<div class="about-itm-inner">
<a href="#" class="about-itm-photo"><span class="img-inner-box" id="im8d1">
<img src="/css/img/square.png" alt="base"/>
<img src="/img/about/1.png" alt="" title="" class="main-img"/></span></a>
<div class="about-itm-txt">
<div class="about-itm-name">Andrea</div>
<div class="about-itm-brief">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
und Konsonantien leben die Blindtexte. Abgeschieden wohnen sie mehr lesen
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And this I can save to DB and then show on front-end. But I don't want to store useless html. Here the editable items should be .title-sect, .about-itm-name, .about-itm-bries and image data. I would like to store only json data and then display it on front-end with correct html, because html is the same and I know it..
Is there such a solution ?
After your GrapesJS is initialized, inside your event add the following code for getting the JSON data output.
JSON.stringify(editor.getComponents())
Here, Component overrides the toJSON function, hence this works.
i dont know much about website design but here is what i have. I am creating a blog page and i have created an array with the title and summary. I want to add an image to that then create a card layout for it. I cannot seem to find code where i can also add an image. here is what i have done so far,
<div class="card">
<div class="imgheader"></div>
<div class="container">
<div id="title">[[item.title]]</div>
<div id="summary">[[item.summary]]</div>
<div id="image" img src="[[item.image]]"></div>
</div>
</div>
</template>
<app-footer></app-footer>
</template>
<script>
class BlogPage extends Polymer.Element {
static get is() { return 'blog-page'; }
static get properties() {
return {
_blogPosts: {
type: Array,
value: function () {
return [
{title: 'Mt. Mckinley', summary: ' A journey to the top of Denali. ', image:'web/images/Mckinley.jpg', },
{title: 'Fishing', summary: 'Catching your largest trout', },
{title: 'Camping', summary: 'Camping with the family', },
i have tried iron image and img src inside the image tag for the first array please let me know of a better way to do this, i dont have much knowledge of polymer i just finished a course on html and css, and i barely know java. any help would be appreciated.
If you are trying to show in loop of <dom-repeat> below code
<template is="dom-repeat" items="{{_blogPosts}}">
<div class="card">
<div class="imgheader"></div>
<div class="container">
<div id="title">[[item.title]]</div>
<div id="summary">[[item.summary]]</div>
<div id="image" img src="[[item.image]]"></div>
</div>
</div>
</template>
try to change as :
<template is="dom-repeat" itmes="{{_blogPosts}}">
<div class="card">
<div class="imgheader"></div>
<div class="container">
<div id="title">[[item.title]]</div>
<div id="summary">[[item.summary]]</div>
<div id="image">
<img src="[[item.image]]">
</div>
</div>
</div>
</template>
Also check _blogPosts array has an image value or empty.
I have a problem. I have Index page where i load different pages in <div ng-view></div>.I have sidebar, so while im waiting that ng-view load page sidebar goes on left side and i dont want that.
In index i have <div ng-view></div> and right side menu:
<div class="col-lg-3 col-md-3">
<div class="right-sidebar">
#foreach (var item in Model.SideAccountBanners)
{
<div class="promo">
<a href="#item.LinkTo">
<div class="image">
<img class="resize" src="#item.BannerPath" alt="" />
<h1 class="title">#MvcHtmlString.Create(Html.Encode(item.Title).Replace("-", "<br />"))</h1>
<p class="description">#MvcHtmlString.Create(Html.Encode(item.Description).Replace("-", "<br />"))</p>
</div>
</a>
</div>
How can i set default size for that <div ng-view></div> or set something like document ready? idk
You should be able to do this with css:
[ng-view] {
min-height: 100%;
}
Something like the above.
EDIT: If you have multiple ng-views you will want to change the css.
I am new to mobile applications, and since i have a strong html, js, css background i decided to try cordova using angularjs. Anyway, i have hit a road block and i don't know the best way to handle this.
I have this block that is setup to repeat; x.large and x.thumb are pulled from a json file via Angular.
<div class="gallery" ng-controller="imagelistController">
<div class="thumbnail" ng-repeat="x in urls">
<img src="{{x.thumb}}">
</div>
</div>
I want to setup a single page using a query string href links to a page such as image.html?id=1. In image.html i want it do display image 1. If you change the id to 2, it would show image 2.
<div ng-controller="imagelistController">
<img src="{{x.large}}">
</div>
<ul class="social-share">
<li><button onclick="window.plugins.socialsharing.share(null, null, '{{x.large.url}}', null)">image only</button></li>
</ul>
<script type="text/javascript" src="js/SocialSharing.js"></script>
I currently have a static slider implemented in a partial view under the shared folder:
#{
ViewBag.Title = "_SliderPartial";
}
#*slider*#
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<img src="~/Content/images/ads/banner1.jpg" />
</div>
<div class="item">
<img src="~/Content/images/ads/banner2.jpg" />
</div>
<div class="item">
<img src="~/Content/images/ads/banner3.jpg" />
</div>
<div class="item">
<img src="~/Content/images/ads/banner4.jpg" />
</div>
</div>
<!-- Carousel nav -> toont navigatie pijlen op slider-->
#* <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>*#
</div>
I render this view in the _BootstrapLayoutcshtml which can be found in
following pastebin: http://pastebin.com/AvxMeVQS (line 100) and it works perfectly fine.
My problem is that I want the slider to be dynamically filled with images stored in
the ads folder based on certain parameters (I only want to displays ads that are active,
they all have a start and end date, stored in a database). I know how to code this
but the issue is that I don't have any controller (because shared doesn`t need one I guess?) to gather the ads and send them.
I would be amazing if somebody could help me because I am fairly new to MVC, thanks in advance!
Solution explorer: http://i46.tinypic.com/2cwt02h.png
I did something similar, in order to follow a decent working practice you will need a Model and controller. You would probably want an Image view model for example (pseudo code below)
namespace Models
{
public class adsImage
{
public int ID {get; set;}
public string src {get; set;}
}
}
public class HomeController : Controller
{
public ActionResult RenderAds()
{
List<Models.adsImage> imgList = new List<adsImage>();
imgList.add(new adsImage({ src = ""});
return PartalView("YourPartialView",imgList);
}
}
}
Dont forget to bind model to view (add this to your partial view)
#model List
Last thing to do is render the partial view via your action method
#{ Html.RenderAction("RenderAds","Home"); }