So I have login with LinkedIn and I'm trying to add a Facebook one.
I already have the "Signin with LinkedIn" button working, and am trying to add the Facebook one:
<div id="socialLoginList">
<p>
#foreach (AuthenticationDescription p in loginProviders)
{
var source = "~/Img/" + p.AuthenticationType + ".png";
<input type="image" src="#source" border="0" id="#p.AuthenticationType" name="provider" value="#p.AuthenticationType" style="max-height: 100%; max-width: 100%">
}
</p>
</div>
If I don't build the path like this, and give it src="~/Img/Facebook.png" or src="~/Img/LinkedIn.png" they work. How can I write the path so the pictures don't appear as broken elements on the page?
src="#Url.Content(String.Format("~/Img/{0}", source))"
If you are using c# 6.0 than you can use Interpolated Strings it'll give you same thing but in much cleaner way
src="#Url.Content($"~/Img/{#source}")"
Related
hello I have a question following the advice of you Razor View dynamic table rows, I made my table with foreach but not and could manage to make you create new columns, if I add a record is put in the same column, does not make a jump for another column, What can I do in this case? So I have my view on razor
<div>
<table>
<tr>
#foreach (var item in product)
{
<td>
<div class="card" style="width: 18rem; margin-top:3rem; margin-right:3rem; margin-bottom:2rem; margin-left:3rem; position:initial">
<img src="https://scontent.fntr8-1.fna.fbcdn.net/v/t1.0-9/107865247_704094323779323_2201784036865521556_n.jpg?_nc_cat=101&_nc_sid=8bfeb9&_nc_ohc=FwSgbE0cEAAAX92rcFt&_nc_ht=scontent.fntr8-1.fna&oh=4ec8b36ac7d0080b2f2bb3096b7b38cc&oe=5F37D400" class="card-img-top" alt="...">
<div class="card-body">
<h2 class="card-title">#item.ProductName</h2>
<p class="card-text">#item.Description</p>
<h4 class="card-text">Stock</h4>
<p class="card-text">#item.UnitInStock</p>
<h4 class="card-text">Color</h4>
<p class="card-text">#item.Color</p>
<h3 class="card-text" style="align-content:center">$#item.Price</h3>
<p class="card-text">#item.CreationDate.ToShortDateString()</p>
<AuthorizeView>
<Authorized>
Editar
<button class="btn btn-danger" #onclick="#(() => EliminarProduct(item.Id))">Eliminar</button>
</Authorized>
<NotAuthorized>
</NotAuthorized>
</AuthorizeView>
</div>
</div>
</td>
count++;
if (count % 3 == 0)
{
#:</tr>
#:<tr>
}
}
</tr>
</table>
</div>
I have a bit of difficulty understanding your question; I am sure you are doing your best to explain your problem.
So excuse me if this does not answer your question.
I think I see what you are trying to do there; placing 3 blocks in a row then followed by 3 other blocks.
One of the problems I foresee is that when you have exactly %3 items (so you have for instance 6 items), the last one will add a to your html and then the loop will end and add one more . So rather than checking %3 you should also check if you aren't at the last item; So something like this
if (count % 3 == 0 && count != product.Count())
May I make a suggestion that you use divs instead of a table? Just generate a div for each block and use css to style them. Depending on your solution you could even number your divs with a different class name (like: class1, class2, class3) and give them each a specific css or you could add float: left to each div and add clear: both; to the first one in your row.
The best way however would be using css where you would place any number of objects on a row as much as the width of the page permits you.
One more thing; if you want to list items in blazor it is wise to add the #key tag to each div or tr.
I'm using jansy bootstrap to replace the asp.net FileUpload. I've successfully retrieved the file using HttpPostedFile with the help of this answer:
HttpPostedFile image = Request.Files["myFile"];
Now, how do I allow multiple files to be selected? With the asp.net FileUpload it was simply adding AllowMultiple="True" parameter and then in the code behind I simply looped through:
foreach (var image in FileUpload1.PostedFiles)
{...}
How do I do this with a custom control? THis is my current html (which is the first Image Upload Widget example):
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" id="myFile" name="myFile"></span>
Remove
</div>
</div>
You can add multiple attribute and set its value to multiple to allow select of multiple files
<input type="file" id="myFile" name="myFile" multiple="multiple">
How to force new page with HTML in NReco PdfGenerator with C#?
Maybe specific class or id, like this works for pagination:
<div style='height: 60px;'>Seite <span class='page'></span> von <span class='topage'></span></div>
Thanks.
Page break may be forced with the following css:
<div style="page-break-after:always"></div>
<div class="thumbnail" style="height: 70px; background-color: #EEEDED">
<div style="font-weight: bold;font-size: 20px;text-align: center">
#Html.Label(exam.ExamName,new{#style="cursor: pointer;color: #FF8627 "})
</div>
<div style="font-size: 15px;text-align: center;color: #505050">
#Html.Label("Total Tests: " + exam.TestInfoes.Count(), new{#style="cursor: pointer"})
</div>
</div>
I have above HTML block, I want to put this whole block in tagin my mvc4 application.
We can do it using maually writing whole block in between tag but I also want to pass some value in the link which will be created for tag
<a href="~/Exam/SingleExam/" + some value from my model>
how do we do it ?
Also How can we achieve this using ActionLink ?
You can do this by using Partials or Editor/Display Templates
To render the partial you can use:
#Html.RenderPartial("partialname", model);
An article can be found here:
http://www.codeproject.com/Tips/617361/Partial-View-in-ASP-NET-MVC
To use templates you can use a custom defined Html.DisplayFor template.
There is an article about the subject here:
http://www.hanselman.com/blog/ASPNETMVCDisplayTemplateAndEditorTemplatesForEntityFrameworkDbGeographySpatialTypes.aspx
The main thing about the templates is that the template must mach the name of the class of the object.
With both methods you can pass your model.
I hope this helps.
well I created link like this
<a href="~/Exam/SingleExam/#exam.Id">
<div class="thumbnail" style="height: 70px; background-color: #EEEDED">
<div style="font-weight: bold;font-size: 20px;text-align: center">
#Html.Label(exam.ExamName,new{#style="cursor: pointer;color: #FF8627 "})
</div>
<div style="font-size: 15px;text-align: center;color: #505050">
#Html.Label("Total Tests: " + exam.TestInfoes.Count(), new{#style="cursor: pointer"})
</div>
</div>
</a>
Instead of using action link I just used html tag & passed id using #exam.id which created proper url for me.
I have about a hundred short-text data items (this number can vary substantially) that I would like to put in a page and have the browser manage that into three columns within a surrounding div, arranged with the items going down and then across, like this:
A F L
B G M
C H N
D I O
E K ...
Is there a way to render this out as li's (or maybe just individual lines), and have the browser automatically collate it into three equal-height columns, possibly using CSS?
Are there any browser compatibility issues?
Without browser compatibility issues:
<% var rows = source.Count() % 3 == 0 ? source.Count / 3 : (source.Count / 3) + 1; %>
<table>
<% for(int i=0; i<rows; i++) { %>
<tr>
<td><%= source.Skip(i).FirstOrDefault() %></td>
<td><%= source.Skip(i+rows).FirstOrDefault() %></td>
<td><%= source.Skip(i+rows*2).FirstOrDefault() %></td>
</tr>
<% } %>
</table>
We use the modulus operator to let us know if the division is even or not... if it is not, we're not going to add an extra row for the leftover columns. For more information, see http://msdn.microsoft.com/en-us/library/0w4e0fzs.aspx
For example look at https://stackoverflow.com/users HTML source - it uses <table>
In the CSS world this is the only way I know to do three columns outside of a table of course.
<html>
<div style="width:100px">
<div style="float:left; width:33%;">a</div>
<div style="float:left; width:33%;">bsdf</div>
<div style="float:left; width:33%;">c</div>
<div style="float:left; width:33%;">d</div>
<div style="float:left; width:33%;">e</div>
<div style="float:left; width:33%;">f</div>
<div style="float:left; width:33%;">g</div>
</div>
</html>
Clearly you wouldn't use all those style tags, instead you'd use an actual style. Notice the 33% as the width.
I tried this in IE and FirFox and no probs on either.
After Xandy suggested Javascript, I did some googling for jQuery plugins, and found this:
Newspaper Columns JQuery Plugin
http://www.webmeisterei.com/petznick/2007/05/16/newspaper-columns-jquery-plugin/
Usage:
You need a Container with Elements like
<div id="npContainer">
<div class="npItem">Item1</div>
<div class="npItem">Item2</div>
</div>
...and you need the Columns
<div id="npColumn1"></div>
<div id="npColumn2"></div>
<div id="npColumn3"></div>
In Javascript just call:
jQuery().npColumns();
A web page that uses the plugin
http://www.bregenzerwald-news.at/?classifieds=1
<div style="float: left">A</div>
<div style="float: left">B</div>
<div style="float: left">C</div>
<div style="float: left">D</div>
<div style="float: left">...</div>
Then place these into a div that has its width correctly set.
html can be (actually doesnt really matters):
<div class="3col_vert">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
...
</div>
In javascripts (example in jquery in particular), you have to wrap them with cols, so that the resulting html (after manipulation of javascript) will become:
<div class="3col_vert">
<div class="col_left">
<div>a</div> ...
</div>
<div class="col_centre">
<div>e</div> ...
</div>
<div class="col_right">
<div>g</div> ...
</div>
</div>
Jquery to mainpulate will be:
var vert_divs = $(".3col_vert div");
// Remove them from parent
$(".3col_vert").empty()
.append("<div class='col_left'></div>") // append the wrapper cols to parent
.append("<div class='col_center'></div>")
.append("<div class='col_right'></div>");
// Now place them to the wrappers
var totalDivs = vert_divs.length; // count number of match divs
vert_divs.each(function(i) {
if (i < totalDivs / 3)
$(this).appendTo(".3col_vert div.col_left");
else if (i<totalDivs * 2/3)
$(this).appendTo(".3col_vert div.col_center");
else
$(this).appendTo(".3col_vert div.col_right");
});
The code above isn't too optimised ( I am sure lots of better algorithm can do), but the idea is there, you use javascript to manipulate the html into something like the above one, by putting the first 1/3 to left column, second 1/3 to center, and the rest to right. The last job is use CSS to make them into 3 columns, which I am not going to cover here but there's tons of tutorials out there, for instance, this one is one of those examples.
You can't do this in CSS alone - though #griegs has shown how to do across then down.
If you always want 3 columns this should be easy with a little server side code and CSS - basically for each item you write something like:
<li>item</li>
Then at count/3 and count*2/3 add:
</ul><ul>
So you end up with something like:
<style>
.three-column-panel > ul {
float:left; width:33%; list-style-type: none; text-indent:0; }
</style>
<div class="three-column-panel">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<ul>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<ul>
<li>g</li>
<li>h</li>
</ul>
</div>