javascript code insight header in mvc3

Question

Hey friends any one please help me for this issue.in this javascript code i m getting 2 arrays IDs array and percentage array from controller and convert them into javascript array now i wana dynamically changing css property of an element but i need succeed.If anyone find error in this code please tell me

@section javascript{
        <script  type="text/javascript">
         $(document).ready(function() {
                @{
                    string data = "";
                    int length = ViewBag.length;
            }

              var percent = new Array();
            @for (int j = 0; j < length; j++)
            {
                data += "percent[" + j + "]=\"" + ViewBag.percentage[j] + "\";";
            }         
             @MvcHtmlString.Create(data);  
              var ids = new Array();
            @for (int i = 0; i < length; i++)
            {   
                data += "ids[" + i + "]=\"" + ViewBag.IDs[i] + "\";";
            }   
              @MvcHtmlString.Create(data);
             //get current date day for javascript
            var date  = new Date();
            var day = date.getDay();
            var dayper = (day/30)*100;
            //**************************************************************//
            //Remaining amount in percentage variable as percent[i] is spend//
            //amount percentage so subtracting spend percentage from 100 wil//
            // return remaing amount percentage                             //
            //**************************************************************//
            var rA;
            var per;
            var id;
             for(var k = 0;k<ids.length;k++)
             {
                per = percent[k];
                id  = ids[k];
                document.getElementById(id).style.width = parseInt(per)+"%";
                rA = 100 - parseInt(percent[k]);
                if(rA - dayper > 40)
                {
                    document.getElementById(id).style.background = "red";
                }
                else if((rA - dayper)>20 && (rA - dayper) < 40)
                {
                    document.getElementById(id).style.background = "yellow";
                }           
                else
                document.getElementById(id).style.background = "green";
             }            
          });


        </script>

Have you considered adding a class to your elements and then changing the class? This is how I've done it. You can use jQuery then like this. Remove your existing class (you can use if $(id).hasClass('greenBG') $(id).removeClass("greenBG") $(id).addClass("RedBG"). — Jeff Reddy
– Jeff Reddy, Commented Jun 27, 2012 at 19:56

Darin Dimitrov · Accepted Answer · 2012-06-28 08:04:48Z

1

What you have shown is an absolutely horrible mixture of server side and client side code. Sorry to say it but that's abominable code. Please separate those concerns. Also since you seem to be already using jQuery, I cannot find any reasonable explanation of why you are not taking advantage of it, but writing some à la 90s javascript code.

So let's see how we could improve this:

@section javascript {
    <script type="text/javascript">
        $(document).ready(function() {
            var percents = @Html.Raw(Json.Encode(ViewBag.percentage));
            var ids = @Html.Raw(Json.Encode(ViewBag.IDs));

            var date  = new Date();
            var day = date.getDay();
            var dayper = (day / 30) * 100;

            $.each(ids, function(index, id) {
                var percent = parseInt(percents[index], 10);
                var element = $('#' + id);
                element.css('width', percent + '%');
                var rA = 100 - percent;
                var color = 'green';

                if (rA - dayper > 40) {
                    color = 'red';
                } else if (rA - dayper > 20 && rA - dayper < 40) {
                    color = 'yellow';
                }

                element.css('background-color', color);
            });
        });
    </script>
}

edited Jun 28, 2012 at 8:04

answered Jun 28, 2012 at 7:35

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zaheer ahmad Over a year ago

Actually brother i m beginner in javascript and jquery that is y this happening can u also tell me any gud source for jquery learning and thnx alot for this kind help.

zaheer ahmad Over a year ago

brother it gives error at line conditional compilation is turned off var percents = @Html.Raw(Json.Encode(ViewBag.percentage)); var ids = @Html.Raw(Json.Encode(ViewBag.IDs));

zaheer ahmad Over a year ago

Error is conditional compilation is turned off

Darin Dimitrov Over a year ago

That's not an error. It's a warning. You could ignore it. It's Visual Studio syntax highlighting that has problems. The code should work.

Collectives™ on Stack Overflow

javascript code insight header in mvc3

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related