Accessing Model property in MVC View from Javascript

For example, you have following model in your MVC application:

public class Employee
{
public string EmployeeName
public int EmployeeNumber
}

You have bound this model to your MVC view (Razor/ Html), and there may be a case when you need to access "EmployeeName" in the Javascript from that view.

You can access value of "EmployeeName" property of your model by following way:

<script type="text/javascript">
function showEmployeeName()
{
alert('@(Model.EmployeeName)');
}

</script>

CodeProject

FIX: JQuery date format validation for non US dates in Chrome

Include following script in your javascript file and reference it in your page(s) to get rid of the most common error of JQuery date format validation in Chrome which doesn't allow non US dates.

    $(document).ready(function () {
jQuery.validator.methods["date"] = function (value, element) { return true; }
    })

Replacement of InnerText property, while updating display text of elements such as (span, etc) in HTML.

This article aims to provide a javascript function to update display text of controls such as (SPAN, etc) in HTML using javascript. 

Generally, we tend to update innerText  property of such elements in this scenario, but when it works perfectly as expected in IE and Chrome, it fails in Firefox. Because,it's not supported.

Instead, include below javascript function in your JS library, and call it. This is more elegant and cross-browser solution of this problem.

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

Sample call:

setTextContent($('span.displayText), result);

When should we not use MVC bundling?

As we all know MVC bundling and minification is a very powerful feature, but recently I faced a strange problem in one of the project as detailed below.

I was using Trent Richardson's Timepicker control to avail time picker functionality in my MVC 4 application. I had relevant JQuery file bundled using MVC bundling feature. I found this working quite well in development environment (Visual Studio 2012).
But when I deployed the website on IIS, I started facing a strange issue, and there was a javascript error "function expected" in that particular bundle. I could see the bundle got loaded because developer tool was showing javascript code when that bundle was selected in "scripts" tab.

Finally, when I referenced the JQuery file directly instead of bundle, it started working fine on IIS. Though the problem got solved, I was than now curious to know what was wrong with that particular file if bundled, and if MVC bundling was actually an issue, then why it was working well in development environment, but not in IIS?

Posting this on various forums gave me following two detailed answers which helped me in identifying in which situations we should avoid using bundling -

Answer 1

Minification is a complex process by making scripts/styles smaller using techniques such variable name shortening, white space elimination, comments removal, etc... It uses ASP.NET Web Optimization that depends on WebGrease for minification. Of course, there can have issues but I personnaly never noticed that.
Here are some situations, where you should not use bundling

• There is only one file in your bundle. Why bundling ?
• You are using only famous frameworks such as JQuery or jQuery UI. Do not redistribute scripts that are already served by someone else. Google/Microsoft/Amazon/... already provide CDN for the most popular, open-source JavaScript libraries.
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
• Your bundle takes only a few Bytes. Web performance Optimization suggests to limit the number of web requests. Everything has a cost. Not very optimal, but sometimes it's better to put inline scripts in your page.
• In some architectures. Bundles requests contains a unique identifier used for caching. If any file in the bundle changes, the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests for the bundle will get the latest bundle. When working with some architectures, JS updates can be frequent and will invalidate all your bundles.
• On Dev Environment. It's is really really painful to debug a bundle.

Answer 2

What bundling suppose to do is to put together the script/stylesheet files in a single bundle into a single request and send it to the client so that the browser has to make less calls to get those required script files. In a development environment, when you do debugging in visual studio. It doesn't do the above process unless you specify it to do so. But in a production environment, when the debug is set to false in the web.config file. it will start to do the above process. There can be some other reasons as well. such as the script might have two versions. one for debugging and one for production. I came across such a situation with knockout. in my development environment I had referenced the debug version of the script. But when I put it into the production environment, everything came to a hault. There was a release version for the 

knockout script file and I had to reference that to make everything work again

 

 

Hope this will help you

Vertical Scrollbar in JQuery AutoComplete UI

In most cases, we need to display a vertical scrollbar in JQuery AutoComplete UI.

JQuery and UI libraries come along with their own styling and theming, and it has its own CSS "jquery-ui-n.n.nn.css".

And we certainly need to play with the styles inside that in order to change any behaviour or styling of same.

Instead of doing any changes inside JQuery libraries, add following styling attributes in your page/ css file, and you will find vertical scrollbar.

/* setting up height for autocomplete UI */
.ui-autocomplete {
    max-height: 150px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-left: 5px;
    padding-right: 5px;
}
/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
    height: 150px;
}

Remember, changing JQuery libraries are never a good idea, because you will also need to take care of the same each time when you upgrade your libraries:

CodeProject

Convert string into a date, Add days to a date, Format date in different date format in JQuery

This article aims to explain writing a Javascript method (using JQuery functions) to achieve following:
- Convert a string into a date
- Add days to the date
- Format date into a valid date format

Prerequisites:
- JQuery library (For example, jquery-1.5.1.min.js, etc)

Source code:
<script type="text/javascript">

function ConvertToDate(strDate, dayPartIdx, monthPartIdx, yearPartIdx) {

//Pass dayPartIdx, monthPartIdx, yearPartIdx parameters depending upon the date format in strDate

//If its dd/mm/yy - pass 0,1,2 respectively.
        var day = strDate.split("/")[dayPartIdx],
        month = strDate.split("/")[monthPartIdx],
        year = strDate.split("/")[yearPartIdx];
        month = month - 1; //Date function considers 0 as January
        var convertedDate = new Date(year, month, day,0,0,0,0);
        return convertedDate;
    }

    function AddDaysToDate(strDate, numDays) {
        var dtDate = ConvertToDate(strDate, 0, 1, 2);
        var ms = dtDate.getTime() + (86400000 * numDays);
        return $.datepicker.formatDate('dd/mm/yy', new Date(ms));
    }
</script>

Sample call:
alert(AddDaysToDate('20/09/2012', 30));

P.S. - It is assumed that the passed string "strDate" is a valid date. However, you can add more validations to validate it before attempting to convert into a date.

Development and Deployment - Troubleshooting, Investigations (Series of articles)

At times, we, developers or deployment people do come across some technical problems that eat up our hours (and days sometimes).. and when we find the resolution, or real cause of the issue, it makes us feel that such issues were not worth of the time and efforts we spent.

Here, I am making a collection of such issues/ troubleshooting notes that may help us to take extra care in order to avoid that issues raising while we develop or deploy.

There are each new post for each different issue/ troubleshooting note, and this post is an index that will keep growing as I add new post in this category.

Keep checking this place regularly.

INDEX:

ASP.NET

1. ExecuteNonQuery() always returns -1

2. SelectedIndexChanged not firing up

ASP.NET MVC

1. Values do not retain in model while posting it from view to controller action in MVC