Thursday, December 1, 2016

ASP .Net MVC wrap text in DisplayFor

If  the content displayed within a DisplayFor is too long you can wrap the text using following simple trick.

<div style="word-wrap:break-word;">
 @Html.DisplayFor(ModelItem => item.Text)
</div> 


cheers
Samitha

Friday, November 18, 2016

ASP.Net MVC set maximum upload file size

ASP.NET MVC provides some configuration settings that enable to upload larger files. Adding following code snippet to web.config file will increase the maximum file upload size.

 <location path="controller/action">
   <system.web>
     <!-- specified in kilobytes (KB)  -->
    <httpRuntime maxRequestLength="15360" />  <!-- 15MB -->
   </system.web>
  <system.webServer>
     <security>
       <requestFiltering>
         <!-- specified is in bytes (B)  -->
         <requestLimits maxAllowedContentLength="15728640"/>  <!-- 15MB -->
       </requestFiltering>
     </security>
   </system.webServer>
 </location>

Cheer,
Samitha

Friday, November 11, 2016

Multiline Button Text

If you ever wanted to display a long button text in multiple lines  CSS comes to assist you. You can achieve the effect using following style.

#button_id {
    white-space: normal;
    width: 100px;
  height: 80px;
}

Make sure you have set the with and height for the button .

cheers
Samitha

Thursday, November 3, 2016

loop through all hyperlink elements using jQuery

If you ever wanted to loop through all the hyperlink elements in a page, jQuery provides .each() function which will provide you the desired result.

e.g
$("a").each(function(){
    //access the element here.
});

This can also be done in a more cleaner way as displayed below.

$("a").attr("href", function(i, hRef) {
  //access the element here.
});

I prefer the second option as will not create additional object when iterating elements.

Cheers,
Samitha

Tuesday, October 11, 2016

Social Network Sharing using jQuery

I have already posted an article about sharing content in Facebook few weeks back. Here I am going to use free jQery plugin to achieve same objective.


The major reason for switching on to using a jQery plugin is because you need to have a Facebook application developed and that will need to be managed separately. This will become somewhat troublesome as some companies will not like to have Facebook account maintained for different reasons.


There are several jQery plugins available, here I am focusing on jsSocials Social Network Sharing Plugin. Integrating this plugin is really easy for either classic ASP.Net or ASP.Net MVC.

1. To configure the plugin follow the steps in start using page. I prefer use use of CDN instead of downloading the bunch of files.

When data binding the div tag that used to populate the social media icons you can use following technique to dynamically data bind.

  @{ var shareUrl = string.Format("{0}://{1}{2}/{3}/{4}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"),   "Job/Details", @item.field1);}

<div id="shareRoundIcons" data-url="@shareUrl" data-text="@item.field2"> </div>

If you are trying to do this in classic ASP.Net you might try this as follows

 <div id="shareRoundIcons" data-url="<%#Container.DataItem("field1")%>"
data-text="<%#Container.DataItem("field2")%>"></div>

when it comes to configure the plugin in jQuery trying following trick will ensure that all divs are showing the social media icons (even if you are trying it on a grid or table this will work)

<script type="text/javascript" >
  $(function () {

$('[id^=shareRoundIcons]').each(function () {
                $(this).jsSocials({
                    url: $(this).data('url'),
                    text: $(this).data('text'),
                    showLabel: false,
                    showCount: false,
                   shares:  [ "facebook","twitter",  "linkedin"]
                });
            });
});
</script&;gt

2.Some social media uses meta tags to grab the featured image used in sharing.  Make sure the page has og: tags specified.

e.g.
<meta property="og:type" content="website">
<meta property="og:site_name" content="YOUR SITE NAME">
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="http://www.abc.com/Job/Details/">
<meta property="og:image" content="http://www.abc.com/Content/Styles/Logo.jpg" />

 More information can be found here.

3. Make sure you have included the Open Graph XML namespace extension to your HTML declaration.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

See the entire discussion in this stack overflow post.

Cheers,
Samitha

Tuesday, September 20, 2016

Visual Studio enable Edit and continue

Visual Studio provides built-in support for editing code behind files at run time.  But I was surprised to realize that this actually works when the setting (which can be found in Tools -> Options -> Debugging -> Edit and Continue > Enable Edit and Continue )  is turned off (unchecked).

Cheers,
Samitha

Friday, August 19, 2016

Asp.net Share page content in Facebook

Modern web pages includes sharing content in various social media networks so that your friends can see your pages of interest.

This can be achieved in using

1. Third party websites.
There are plenty of websites that provide sharing functionality by just copying some code to your site.
 http://addthis.com/
 http://www.sharethis.com/
2. using Javascript
This involves creating an application in Facebook integrating some JavaScript to initialize the sharing dialog. Following article gives you a detailed description of the implementation.

Cheers,
Samitha