jQuery UI的滑塊顯示錯誤

Question

你好的人時遇到的MVC3一個問題，我的jQuery的滑塊顯示以下錯誤的地方，我需要滑塊：

[object Object] 

滑塊不visable jquery的劇本我已經加入如下：

<script type="text/javascript"> 

    $(function() { 
     $("#slider-range-max").slider({ 
      range: "max", 
      min: 1, 
      max: 10, 
      value: 2, 
      slide: function (event, ui) { 
       $("#Score").val(ui.value); 
      } 
     }); 
     $("#Score").val($("#slider-range-max").slider("value")); 
    }); 
    </script> 

其指的這個領域在我看來：

<div class="editor-label"> 
     @Html.LabelFor(model => model.Score) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.Score) 
     @Html.ValidationMessageFor(model => model.Score) 
    </div> 

我已經添加了以下的jQuery腳本到我的觀點：

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"</script> 
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css"/> 
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.core.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.widget.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.slider.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.ui.mouse.js" type="text/javascript"></script> 
<script src="../../Scripts/modernizr-1.7.js" type="text/javascript"></script> 

如果您需要addtional信息請諮詢我謝謝

Answer 1

首先，你需要添加下面的jQuery腳本：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script> 

第二加你的看法：

<script type="text/javascript"> 
    $(function() { 
     $("#slider-range-max").slider({ 
      range: "max", 
      min: 1, 
      max: 10, 
      value: 2, 
      slide: function(event, ui) { 
       $("#PutYourValueHere").val(ui.value); 
      } 
     }); 
$("#PutYourValueHere").val($("#slider-range-max").slider("value")); 
    }); 
    </script> 

它說PutYourValueHere sh自己以上 - 與model.PutValueHere一致。

@Html.EditorFor(model => model.PutYourValueHere) 

按照這些步驟應該工作。