Solved

MVC 5 Razor Values and Jquery Progress Bar?

Posted on 2014-07-23
2
4,073 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 79

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Microsoft Active Directory, the widely used IT infrastructure, is known for its high risk of credential theft. The best way to test your Active Directory’s vulnerabilities to pass-the-ticket, pass-the-hash, privilege escalation, and malware attacks …
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…

809 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