Develop Reference

Bootstrap switch height automatically changes after postback

I have bootstrap switch control that opens and closes some panel in asp.net project. My code as follows:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
</div>
After build, my markup code looks like:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
</div>
But after postback, this control's height automatically increases.
I tried to access the control via markup or code behind, but the height controlled by the element which added up by build. Also I digged css files, but appeared nowhere.
Appreciate for your help.

thats sounds weird
one solutions should be define a static height for that element in your css like
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
as referenced on this post
height issue in bootstrap switch,
also you can inspect the element and deactivate classes in browser then when you identify which is making it, you can search for that class in your css files

Displaying an image in a foreach

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}")"

How to dynamically create link with Count Bubbles in MVC with Jquery Mobile

Need advice from u all very badly already wasted 2 days in this. No idea what to do. I need to keep count bubbles in button in mvc4 using jquerymobile. I did it in static like
Code.
<div class="ui-grid-c">
<div class="ui-block-a">
<a class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white" onclick="location.href='#Url.Action("Index", "DirectPutawayDetails")'">
DK-01
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
3
</span>
</a>
</div>
<div class="ui-block-b">
<a href="url.html" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
DK-02
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
11
</span>
</a>
</div>
<div class="ui-block-c">
<a href="url.html" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
DK-03
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">12</span>
</a>
</div>
<div class="ui-block-d">
<a href="url.html" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
DK-04
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
145
</span>
</a>
</div>
Which works great and got below output.
Now i need to generate all the button dynamically and bring similar look and feel. I used list and brought all the values to my view like below image.
But no idea how to transform the value in list to dynamic button with bubble count. Guide me.

https://dotnetfiddle.net/d0KH3g Check this fiddle
I have created a temporary model and dynamically generated DIV based in the model values,try to apply this in your Model
#{
string test ="";
for(int i=0;i<#Model.countBubbleDataList.Count;i++)
{
string divTest="";
divTest+="<div class='ui-block-a' style='width:25%'><a class='ui-li-has-count' data-role='button' data-ajax='false' data-mini='true'";
divTest+=" style='background-color:#52616D;color:white' onclick='location.href='#Url.Action('Index', 'DirectPutawayDetails')'>";
divTest += Model.countBubbleDataList[i].Name+"<span class='ui-li-count ui-btn-up-c ui-btn-corner-all' style='background-color:white;color:#52616D'>3</span></a> </div></div>";
#Html.Raw(divTest);
}
}

Simply add a class like:
<span class=" GridBubbleCount ui-li-count ui-btn-up-c ui-btn- corner-all" style="background-color:white;color:#52616D">
.GridBubbleCount {
background-color: #F7F7F8 !important;
color: #2C343B !important;
border-radius: 35%;
-moz-border-radius: 35%;
-webkit-border-radius: 35%;
height: 15%;
width: auto;
text-align: center;
font-family: Arial;
}

Why don't you use partial view template? Here is the way to do it -
First create a partial view template for DirectedPutaway inside Views/Shared/DisplayTemplate folder and name it DirectedPutaway.cshtml.
Inside this partial view define model to be DirectedPutaway. It is absolutely important that you should place this inside DisplayTemplate folder and name it exactly as the class name to work.
Then add your html and other model properties to render to the file, so the final file should look like this -
#model DirectedPutaway
<div class="ui-block-a">
<a class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white" onclick="location.href='#Url.Action("Index", "DirectPutawayDetails")'">
#Html.DisplayFor(m=>m.ReceivingName)
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">
#Html.DisplayFor(m=>m.NoOfMuf)
</span>
</a>
</div>
Ok, so far we have the template and since it is createed inside shared displaytemplate and has proper name, its really easy to use it. Just after getting the list add a line to render the list, MVC will automatically look for the template and render it -
#{
var myPutaway = (List<DirectedPutaway>)ViewBag.DirectePutaway;
}
<div class="ui-grid-c">
#Html.DisplatFor(m=> myPutaway)
<div>
This is probably the most recommended MVC way.
Finally, If you want to know how display templates and editor templates work in ASP.Net MVC, you can checkout the doc here, these two blogs show how to use templates. -
http://blogs.msdn.com/b/nunos/archive/2010/02/08/quick-tips-about-asp-net-mvc-editor-templates.aspx
http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-1-introduction.html

C# RegEx - find html tags (div and anchor)

I have to retrieve several div section (of specific class name "row ") with it's content, and additionally find all anchor tags (link urls) (with class "underline red bold").
Shortly speaing : get section of:
<div class = "row ">
... (divs, tags ...)
<a class="underline red bold" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534895,p">
and
collections of urls
string[] urls = {"/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534895,p"}
the entire page looks like that:
<html>
... a lot of stuff
<div class="row ">
<div class="photo">
<a rel="nofollow" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534895,p">
<img alt="alt msg" src="/b/s/b9/03/b9038292d147a582add07ee1f0607827.jpg">
</a>
</div>
<div class="desc">
<div class="l1">
<div class="icons">
</div>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div class="fleft">
<a class="underline red bold" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534895,p">
Culture And Gender <br>Intimate Relation</a>
</div>
<div class="fleft">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="l2">
<div>
</div>
<div>
<div class="but">
</div>
</div>
</div>
<div class="l3">
Long description
<a class="underlinepix_red no_wrap" rel="nofollow" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534895,p">
more<img alt="" src="/b/img/arr_red_sm.gif">
</a>
</div>
</div>
</div>
<div class="omit"></div>
<div class="row ">
<div class="photo">
<a rel="nofollow" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534899,p">
<img alt="alt msg" src="/b/s/b9/03/b9038292d147a582add07ee1f06078222.jpg">
</a>
</div>
<div class="desc">
<div class="l1">
<div class="icons">
</div>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td>
<div class="fleft">
<a class="underline red bold" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod5653489225,p">
Culture And Gender <br>Intimate Relation</a>
</div>
<div class="fleft">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="l2">
<div>
</div>
<div>
<div class="but">
</div>
</div>
</div>
<div class="l3">
Long description
<a class="underlinepix_red no_wrap" rel="nofollow" href="/searchClickThru?pid=prod56534895&q=&rpos=109181&rpp=10&_dyncharset=UTF-8&sort=&url=/culture-and-gender-intimate-relation-ksiazka,prod56534895,p">
more<img alt="" src="/b/img/arr_red_sm.gif">
</a>
</div>
</div>
</div>
Can anybody help me to create suitable reg ex?

Regular expressions are not well suited for this.
Due to the nested nature of HTML, a regular expression that does what you ask would be very (very very) long and complicated. Use a HTML Parser instead.

The answer to this question is roughly the same as the answer to this question:
RegEx match open tags except XHTML self-contained tags

Alternatively, if you've managed to get into LINQ and like the power of LINQ, there appears to be a LINQ-to-HTML Library available for download. I haven't tried it yet, so I cannot speak to its ability.

Check out the HTML Agility Pack
This is an agile HTML parser that
builds a read/write DOM and supports
plain XPATH or XSLT (you actually
don't HAVE to understand XPATH nor
XSLT to use it, don't worry...). It is
a .NET code library that allows you to
parse "out of the web" HTML files. The
parser is very tolerant with "real
world" malformed HTML. The object
model is very similar to what proposes
System.Xml, but for HTML documents (or
streams).

Is it NECESSARY to use regular expressions? If not, then why don't you use an HTML parser like Html Agility Pack... it will be MUCH easier to get what you want if you use a parser instead of regular expressions.

How do I create a two-column snaking layout in ASP.NET MVC?

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>