Solved

MVC 5 Razor Values and Jquery Progress Bar?

Posted on 2014-07-23
2
4,240 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 80

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

730 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