首先，我在这个领域很新，所以我的陈述似乎有些愚蠢，
我会使用UI滑块来定价， 我可以使用哪种代码或方法无关紧要，
我使用了此处显示的代码http://www.tutorialspoint.com/jqueryui/jqueryui_slider.htm 第三部分
甚至这个https://jqueryui.com/slider/ 但遗憾的是它无法在我的代码中工作，我的意思是当我在文本中复制代码然后将其保存为html时，它就像一个魅力，但当我在我的项目中复制代码时它只是不起作用。
这是我的代码：
@model Shopping.ViewModels.SearchModel
@{
ViewBag.title = "Index";
}
<!DOCTYPE html>
@using (Html.BeginForm("Index", "SearchResult", FormMethod.Post))
{
<!-- Body BEGIN -->
<body class="ecommerce">
<div class="main">
<div class="container">
<ul class="breadcrumb">
<li><a href="@Url.Action("Index", "Home")">MainPage</a></li>
<li class="active">search result</li>
<li></li>
<li>
<div>
@if (TempData["messages"] != null)
{
<div style="font-family:'Times New Roman';color:green;font-size:12pt">
<span>@TempData["messages"].ToString()</span>
</div>
}
</div>
</li>
</ul>
<div class="row list-view-sorting clearfix">
<div class="col-md-2 col-sm-2 list-view">
<a href="#"><i class="fa fa-th-large"></i></a>
<a href="#"><i class="fa fa-th-list"></i></a>
</div>
<div class="col-md-10 col-sm-10">
</div>
</div>
<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-40">
<!-- BEGIN SIDEBAR -->
<!--end sidebar-->
<div class="sidebar col-md-3 col-sm-5">
@*<div class="sidebar-products clearfix">*@
<div class="sidebar-filter margin-bottom-25">
<div class="sidebar-products clearfix">
<label class="control-label">Gender:</label>
@Html.DropDownListFor(m => m.Gender, new SelectList(Model.Genders), new { style = "width: 100%;" })
</div>
<div class="sidebar-products clearfix">
<label class="control-label">sport:</label>
@Html.DropDownListFor(m => m.Sport, new SelectList(Model.Sports), new { style = "width: 100%;" })
</div>
<div class="sidebar-products clearfix">
<label class="control-label">category:</label>
@Html.DropDownListFor(m => m.Devision, new SelectList(Model.Devisions), new { style = "width: 100%;" })
</div>
<div class="sidebar-products clearfix">
<label class="control-label">Items:</label>
@Html.DropDownListFor(m => m.ProductGroup, new SelectList(Model.ProductGroups), new { style = "width: 100%;" })
</div>
<div class="sidebar-products clearfix">
<label class="control-label">Brand:</label>
@Html.DropDownListFor(m => m.Brand, new SelectList(Model.Brands), new { style = "width: 100%;" })
</div>
<div class="sidebar-products clearfix">
<label class="control-label">Size:</label>
@Html.DropDownListFor(m => m.Size, new SelectList(Model.Sizes), new { style = "width: 100%;" })
</div>
<p>
<label for="price">Price range:</label>
<input type="text" id="price"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>
@*<p>
<label for="amount">Price Rane:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
<div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 10%; width: 40%;"></div>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 10%;"></a>
<a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 50%;"></a>
</div>*@
<div class="sidebar-filter margin-bottom-25">
<input type="submit" class="btn btn-primary" value="Search" />
</div>
</div>
<div class="sidebar-products clearfix">
<h2>Popular</h2>
<div class="item">
@if (Model != null && Model.Sales != null)
{
foreach (var item in Model.Sales)
{
<text>
<div class="owl-item" style="width: 240px;">
<div>
<div class="product-item">
<div class="pi-img-wrapper">
<img style="height:70px" src="~/Style/default/images/Sale/@(item.Barcode).jpg" class="img-responsive" alt="">
<div>
<a href="#product-pop-up@(item.Barcode)" class="btn btn-default fancybox-fast-view">Show</a>
<button type="button" class="btn btn-default" onclick="location.href='@Url.Action("AddToCart", "ShoppingCart", new { Barcode = @item.Barcode },"")'">
Buy»
</button>
@*<a href="#" class="btn btn-default fancybox-fast-view">خرید</a>*@
</div>
</div>
@*<h3><a href="shop-item.html">@item.Brand</a></h3>*@
@*<div class="pi-price">@item.PriceAfterDiscount</div>*@
@*<div style=" text-align:left">
<button type="button" style="width:34px ;height:20px" class="btn btn-success btn-sm" onclick="location.href='@Url.Action("AddToCart", "ShoppingCart", new { Barcode = @item.Barcode },"")'">
خرید »
</button>
</div>*@
@if (item.IsSale == true)
{<div class="sticker sticker-sale"></div>}
@if(item.IsNew == true)
{
<div class="sticker sticker-new"></div>
}
</div>
</div>
</div>
<!-- BEGIN fast view of a product -->
<div id="product-pop-up@(item.Barcode)" style="display: none; width: 700px;">
<div class="product-page product-pop-up">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-3">
<div class="product-main-image">
<img src="~/Style/default/images/Sale/@(item.Barcode).jpg" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-9">
<h2>@item.Brand</h2>
<div class="price-availability-block clearfix">
<div class="price">
@item.SalePrice<span>R</span>
<span>@item.PriceAfterDiscount</span>R
</div>
</div>
<div class="description">
<p>
@item.ProductName @item.Code
</p>
</div>
<div class="product-page-cart">
@*<div class="product-quantity">
<input id="product-quantity" type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
</div>*@
<button type="button" class="btn btn-success btn-sm" onclick="location.href='@Url.Action("AddToCart", "ShoppingCart", new { Barcode = @item.Barcode },"")'">
خرید »
</button>
</div>
</div>
@if (item.IsSale == true)
{<div class="sticker sticker-sale"></div>}
@if (item.IsNew == true)
{
<div class="sticker sticker-new"></div>
}
</div>
</div>
</div>
<!-- END fast view of a product -->
</text>
}
}
</div>
</div>
<!-- END SALE PRODUCT -->
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="col-md-9 col-sm-7">
<!-- BEGIN PRODUCT LIST -->
<div class="row product-list">
@if (Model != null && Model.Result != null)
{
foreach (var item in Model.Result)
{
<text>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="product-item">
<div class="pi-img-wrapper">
@*@using Shopping.Helpers;
@Html.ImageActionLink("LinkText", "Index", "ShopItem", item, null, "~/images/@(item.PicID).jpg")
<a href="@Url.Action("Index", "ShopItem", new { PicID = @item.PicID, Barcode=@item.Barcode })"></a>*@
<a href="@Url.Action("Index", "ShopItem", new { Barcode=@item.Barcode})">
@*String.Format(<img src="~/images/'{0}{1}'" alt="">, @item.PicID, .jpg)*@
<img style="width:205px; height:210px" src="~/images/@(item.PicID).jpg" class="img-responsive" alt="">
</a>
</div>
@*<h3><a dir="ltr">@item.Brand</a></h3>*@
<div class="price-availability-block clearfix" style="text-align:center">
<div class="price" style="text-align:center">
<strong style="text-align:center">@item.PriceAfterDiscount<span>R</span></strong>
<em style="text-align:center"> <span>@item.SalePrice R</span></em>
</div>
</div>
<div class="description" style="text-align:center">
<p>
@item.ProductName @item.Code
</p>
</div>
<button type="button" class="btn btn-success btn-sm" onclick="location.href='@Url.Action("AddToCart", "ShoppingCart", new { Barcode = @item.Barcode },"")'">
خرید »
</button>
@* <a href="@Url.Action("AddToCart", "ShoppingCart", new { Barcode=@item.Barcode})">افزودن به سبد کالا</a>*@
@if (item.IsSale == true)
{<div class="sticker sticker-sale"></div>}
@if (item.IsNew == true)
{
<div class="sticker sticker-new"></div>
}
</div>
</div>
<!-- BEGIN fast view of a product -->
<div id="product-pop-up@(item.PicID)" style="display: none; width: 700px;">
<div class="product-page product-pop-up">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-3">
<div class="product-main-image">
<img src="~/images/big/@item.PicID+.+jpg" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-9">
<h2>@item.Brand</h2>
<div class="price-availability-block clearfix">
<div class="price">
<strong><span>R</span>@item.PriceAfterDiscount</strong>
<em>R<span>@item.SalePrice</span></em>
</div>
</div>
<div class="description">
<p>
@item.ProductName
</p>
</div>
<div class="product-page-options">
<div class="pull-left">
<label class="control-label">اندازه:</label>
<div class="form-control input-sm">
@Html.DropDownListFor(m => m.Size, new SelectList(Model.Sizes), new { style = "width: 100%;" })
</div>
</div>
</div>
<div class="product-page-cart">
<div class="product-quantity">
<input id="product-quantity" type="text" value="1" readonly name="product-quantity" class="form-control input-sm">
</div>
<button class="btn btn-primary" type="submit">افزودن به سبد کالا</button>
</div>
</div>
@if (item.IsSale == true)
{<div class="sticker sticker-sale"></div>}
@if (item.IsNew == true)
{
<div class="sticker sticker-new"></div>
}
</div>
</div>
</div>
<!-- END fast view of a product -->
</text>
}
}
</div>
<!-- END PRODUCT LIST -->
<!-- BEGIN PAGINATOR -->
@*<div class="row">
<div class="col-md-4 col-sm-4 items-info"></div>
<div class="col-md-8 col-sm-8">
<ul class="pagination pull-right">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>*@
<!-- END PAGINATOR -->
</div>
<!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->
</div>
</div>
<script>
$(function () {
$("#slider-3").slider({
range: true,
min: 0,
max: 500,
values: [35, 200],
slide: function (event, ui) {
$("#price").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#price").val("$" + $("#slider-3").slider("values", 0) +
" - $" + $("#slider-3").slider("values", 1));
});
</script>
</body>
<!-- END BODY -->
}
这也是我的_Layout页面的Head部分，它可以找到UI滑块所需的JS，
<head>
<meta charset="utf-8">
<title>adidas</title>
@RenderSection("scripts", required: false)
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-theme.min.css" />
<script type="text/javascript" src="jquery-2.1.1.js"> </script>
<script type="text/javascript" src="bootstrap.min.js"> </script>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="~/Scripts/jquery-ui-1.12.0/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<meta property="og:site_name" content="-CUSTOMER VALUE-">
<meta property="og:title" content="-CUSTOMER VALUE-">
<meta property="og:description" content="-CUSTOMER VALUE-">
<meta property="og:type" content="website">
<meta property="og:image" content="-CUSTOMER VALUE-"><!-- link to image for socio -->
<meta property="og:url" content="-CUSTOMER VALUE-">
<link rel="shortcut icon" href="favicon.ico">
<!-- Fonts START -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|PT+Sans+Narrow|Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900&subset=all" rel="stylesheet" type="text/css"><!--- fonts for slider on the index page -->
<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
<script src="../../assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/back-to-top.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../assets/frontend/layout/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<!-- Fonts END -->
<!-- Global styles START -->
<link href="~/assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-rtl.min.css">
<link href="~/assets/global/plugins/bootstrap/css/bootstrap-rtl.css" rel="stylesheet">
<!-- Global styles END -->
<!-- Page level plugin styles START -->
<link href="~/assets/global/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet">
<link href="~/assets/global/plugins/carousel-owl-carousel/owl-carousel/owl.carousel-rtl.css" rel="stylesheet">
<link href="~/assets/global/plugins/slider-layer-slider/css/layerslider.css" rel="stylesheet">
<!-- Page level plugin styles END -->
<!-- Theme styles START -->
<link href="~/assets/global/css/components-rtl.css" rel="stylesheet">
<link href="~/assets/frontend/layout/css/style.css" rel="stylesheet">
<link href="~/assets/frontend/pages/css/style-shop.css" rel="stylesheet" type="text/css">
<link href="~/assets/frontend/pages/css/style-layer-slider.css" rel="stylesheet">
<link href="~/assets/frontend/layout/css/style-responsive.css" rel="stylesheet">
<link href="~/assets/frontend/layout/css/themes/red.css" rel="stylesheet" id="style-color">
<link href="~/assets/frontend/layout/css/custom.css" rel="stylesheet">
<meta name="viewport" content="width=device-width" />
<!-- Theme styles END -->
</head>
希望能拯救我的生命我真的被困在其中:(