Solved

MVC 5 Razor Values and Jquery Progress Bar?

Posted on 2014-07-23
2
3,866 Views
Last Modified: 2014-07-27
I've read the docs and the tried examples and still cannot get MVC 5 Razor variables to work with Jquery Progress bar.  This progress bar is used for a charity drive to show the Goal, Raised, Progress (goal-raised) and percentage in text. This very typical behavior I know. Help...

_________________________________________________________________________________________
||||||||||||||| 40% |||||||||||                                                                                        |
-----------------------------------------------------------------------------------------

Open in new window


Here's what I have so far...

View
known values:
        alert(@Model.Raised);   //  750
        alert(@Model.Goal);     //   100000
        alert(@Model.Progress); // 99250

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></script>
<script src="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css"></script>
<script type="text/javascript">

//basic jquery example which works...
 $(function () {
     $("#progressbar > .ui-progressbar-value").animate({
              width: "77%",
              value: "11"
          }, 600);
     });
</script>

<style>
    .progress-bar 
    {       
        height: 20px;
        border: 1px solid #ddd;
        border-radius: 5px;
        overflow: hidden;
        display: inline-block;
        margin: 0px 10px 5px 5px;
        vertical-align: top;
    }

Open in new window

0
Comment
Question by:WorknHardr
2 Comments
 
LVL 78

Accepted Solution

by:
David Johnson, CD, MVP earned 500 total points
ID: 40216475
Here is some working code http://screencast.com/t/HHQItmfl
http://jqueryui.com/progressbar/#download

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Download Dialog</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
var progressTimer,
progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" ),
dialogButtons = [{
text: "Cancel Download",
click: closeDownload
}],
dialog = $( "#dialog" ).dialog({
autoOpen: false,
closeOnEscape: false,
resizable: false,
buttons: dialogButtons,
open: function() {
progressTimer = setTimeout( progress, 2000 );
},
beforeClose: function() {
downloadButton.button( "option", {
disabled: false,
label: "Start Download"
});
}
}),
downloadButton = $( "#downloadButton" )
.button()
.on( "click", function() {
$( this ).button( "option", {
disabled: true,
label: "Downloading..."
});
dialog.dialog( "open" );
});
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( "Current Progress: " + progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Complete!" );
dialog.dialog( "option", "buttons", [{
text: "Close",
click: closeDownload
}]);
$(".ui-dialog button").last().focus();
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + Math.floor( Math.random() * 3 ) );
if ( val <= 99 ) {
progressTimer = setTimeout( progress, 50 );
}
}
function closeDownload() {
clearTimeout( progressTimer );
dialog
.dialog( "option", "buttons", dialogButtons )
.dialog( "close" );
progressbar.progressbar( "value", false );
progressLabel
.text( "Starting download..." );
downloadButton.focus();
}
});
</script>
<style>
#progressbar {
margin-top: 20px;
}
.progress-label {
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
.ui-dialog-titlebar-close {
display: none;
}
</style>
</head>
<body>
<div id="dialog" title="File Download">
<div class="progress-label">Starting download...</div>
<div id="progressbar"></div>
</div>
<button id="downloadButton">Start Download</button>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:WorknHardr
ID: 40223080
That code gives me many good solutions, thx...
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now