ASP.NET, ASP.NET MVC, Core .NET, and SQL Server: October 2012

Monday, October 22, 2012

FIX: IE Document Mode changes to IE 7 while opening a remotely hosted ASP.NET (or MVC) website in Internet Explorer 8

A recent issue I faced while I deployed my ASP.NET MVC application on production server.

I hosted my MVC application on a web server having IIS 7.
While I tried to access that website on the server itself using "localhost" in URL within IE 8 browser, it was getting displayed perfectly. But when I tried to access it remotely in IE 8 browser, the layout got disturbed, and it was appearing too messy.

I did a lot of investigations, and could found this is because by default browser was opening the website under "IE 7" document mode.

In order to prevent this, I did following changes <system.webServer> section in web.config file of my application, and that successfully resolved this issue:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=edge" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

HTML tags to set page layout according to device/ page size and resolutions

Use following HTML tags in <head> section in order to make your web page appearing same on different screen resolutions on different devices. This will resize webpage, and all underlying controls according to the device size and resolution. This is very useful when you aim designing your website targeting range of devices like, Mobile screens, tablet screens, and traditional desktop or laptop screens.

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width" />

Friday, October 5, 2012

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.

Thursday, October 4, 2012

Issue Troubleshooting: "HttpPost action of a controller gets hit twice" while using @Html.RenderAction and JQuery

Following is the exact scenario in my application:

And this is an attempt to get assistance from various developers across in order to fix this issue.

I believe the issue is self-descriptive from the image above itself. Still if you have any question regarding understanding the issue, please feel free to post the same.

Thanks for visiting, and for your help

SOLUTION:

Having posted in StackOverflow and ASP.NET Forums, I got responses that helped me fixing the issue:

http://stackoverflow.com/questions/12722971/httppost-action-of-a-controller-gets-hit-twice

Following is the revised JQuery method, that worked:

            $('form').submit(function (event) {
                event.preventDefault();
                $.ajax({
                    url: 'EditEntryInline',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function (result) {
                        if (result.success) {
                            window.location.reload();
                        } else {
                            alert('Entry Could not be Saved');
                        }
                    }
                });
            });

The main issue was that, the event.preventDefault() was missing.
Also, the suggestions were of not to wireup event for in button click event, though keeping above method inside $('.buttonInlineSave').click(function () { .... }) was also working pretty well.

Hope it helps someone.

ASP.NET, ASP.NET MVC, Core .NET, and SQL Server