通过输入价格范围，来筛选汽车，主要方法是通过点击“查询”按钮，触发chaxun()方法，利用Jquery和JS获取输入的值，然后为相应的div加载相应的动作，通过更改路由的路径，以此来实现筛选车辆，然后将筛选出来的车辆显示在相应的div上
、Models
public class CarBF
{
private MyDBDataContext _context = new MyDBDataContext();
public List<car> Select(decimal Low,decimal Upp) //通过价格范围查询
{
var query = _context.car.Where(P=>P.price>Low&&P.price<Upp); //价格范围
if (query.Count() > )
{
return query.ToList();
}
else
{
return null;
}
} } 、Controllers
namespace MvcApplication2.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index() //主要的界面
{
return View();
}
public ActionResult Select(decimal Low,decimal Upp) //筛选汽车
{
List<car> list =new CarBF().Select(Low,Upp);
return PartialView(list);//为相应的div加载分部视图 }
}
} 、Views Index：
@{
Layout = null;
} <!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body> <div>
最低价格：@Html.TextBox("Low") <br>
最高价格：@Html.TextBox("Upp") <br>
<input id="Submit2" type="button" value="查询" onclick="chaxun()" /> </div> <div id="cx"></div>
</body>
</html>
<script src="~/Script/jquery-1.11.2.min.js"></script>
<script>
function chaxun()
{
var a = document.getElementById("Low").value;//获取到Id为Low对象的值(JavaScript方法)
var b = $("#Upp").val();//获取到Id为Upp对象的值(Jquery方法)
$("#cx").load("/find/Home/Select/" + a + "/" + b);//为Id为cx的对象加载前缀为find,控制器为Home,动作为Select的动作，并把获取到的两个值作为参数传过去，中间的"/"不能乱写，必须和路由里写的格式一样 }
</script> Select：
@using MvcApplication2.Models;
@model List<car>
<div>
<ul>
@foreach(car data in Model)
{
<li>@data.name</li>
}
</ul>
</div> 、路由设置
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default1",
url: "find/{controller}/{action}/{low}/{upp}", //路由格式
defaults: new { controller = "Home", action = "Index", low = 0, upp = 100 } //defaults 默认
); routes.MapRoute( name: "Default", url: "{controller}/{action}/{id}", defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional } ); }
效果图：
