Friday 26 October 2012

After getting the Ajax result from the Action Method the the view is not updating in mvc3/mvc4

One of my friend while doing a task of a project , he implemented the Ajax call to send request to the  action method. he had done it and resend the model to the client side, but the data is not updating in the view.

So, I thought of a while and scrutinized it and found that the model is updated when the data comes from the action method but it is not updating the view. so, here is the trick how to do it.

$.ajax({
                data: { retailLocation: $("#ddlLanguages").val().split('-')[1] + "-" + this.value },
                url: '/App/index',
                success: function (result) {
                    $("#container").empty().html(result);
                    $('#container').fadeIn('fast');


                },
                complete: function (result) {
                    $("#RetailPartnerLocation option:contains(" + currentselection + ")").attr('selected', 'selected');
                },
                Error: function (result) { alter("Error occured while processing"); }
            });


Here you need to empty the container where the previous data exist and bind the new data to it.

How to Show the date like facebooks shows when you provide comments such as 1 min ago, 2 days ago, 1 Month Ago in Asp.Net/ Asp.Net MVC 2/MVC 3/ MVC 4

While working on a project , I need to show the comments published or updated as 1 min ago, 1 Hours ago, so on. So in order to do it I had written a helper class to do it for me.

Here is the code below:
 public static string GetFormattedDate(string date)
        {
            string formattedDate = string.Empty;
            TimeSpan ts = System.DateTime.Now - DateTime.Parse(date);
            int weeks = (int)(DateTime.Now - DateTime.Parse(date)).TotalDays / 7;

            if (ts.Minutes == 0)
                formattedDate = "Few Seconds Ago";
            if (ts.Minutes > 0 && ts.Minutes < 59)
                formattedDate = ts.Minutes + (ts.Minutes == 1 ? " Minute Ago" : " Minutes Ago");
            if (ts.Hours > 0 && ts.Hours < 24)
                formattedDate = ts.Hours + (ts.Hours == 1 ? " Hour ago" : " Hours ago");
            if (ts.Days >= 1 && ts.Days<30)
            {
                if (ts.Days == 1)
                {
                    formattedDate = "Today";
                }
                else if (ts.Days>1 && ts.Days < 7)
                {
                    formattedDate = ts.Days + (ts.Days == 1 ? " Day ago" : " Days ago");
                }
                else
                {
                    formattedDate = (ts.Days / 7).ToString() + ((ts.Days / 7).ToString() == "1" ? " Week Ago" : " Weeks Ago");
                }
            }
            else if (ts.Days >= 30 && ts.Days<365)
            {
                formattedDate = ts.Days/30 + ( ts.Days<60 ? " Month ago" : " Months ago");
            }
            else if(ts.Days>=365)
            {
                formattedDate = ts.Days / 365 + ( ts.Days < 730 ? " Year ago" : " Years ago");
            }
          
            return formattedDate;
        }

How to Write a Extension method to strip html-tags from a rich text Editor in ASP.Net/ MVC

Today while working with CKEditor , I find out that what ever I provide in the Editor body and saved, it is not properly translating the html tags such as paragraph in the Editor body.

So to fix it I had written an extension method to strip the HTML tags as :


        public static string StripHtml(string inputString)
        {
            if (!string.IsNullOrEmpty(inputString))
                return Regex.Replace(inputString, "<.*?>", string.Empty);

            return string.Empty;

        }


How to call: Classname.StripHtml("some string");

How to Minimize Long Title or Overflowed text with less text followed with ellipsis using Jquery or CSS


While working on a project I got a requirement  of showing a limited amount of text followed with ellipsis(...)  in  a telerik grid, to do it I thought I will use the CSS property  text-overflow: ellipsis; but unable to succeed. I thought a lot and at last done it with CSS.

What I had done with CSS:
So in order to get the text as "Hello Hai how Are..." I used the following CSS

#divContainer td:first-child + td {height: 45px;width:280px;max-width: 280px;overflow: hidden;
text-overflow: ellipsis; display:block;white-space: nowrap;}

Here divContainer is the Container and td:first-child + td  : refers to the second column of a table. InOrder to make it work you need to specify the width,max-width(for IE), white-space and Overflow:hidden and text-overflow: ellipsis;

The output is:
 


 *Note: Here We get the desired result with single line only but I need multiple line with  ellipsis, so to do it I followed JQuery.


What I had done with JQuery:

In order to fix this issue I just write below the two line to get multiple lines followed with ellipsis(...)

$("#divContainer td:first-child + td").each(function() {
            $(this).text($(this).text().substr(0,75)+"...");
        });


The Output is: