通过输入价格范围，来筛选汽车，主要方法是通过点击“查询”按钮，触发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 } ); }

效果图：

根据价格范围筛选汽车(路由以及JS与Jquery)的更多相关文章

  1. NodeJS路由(server.js + router.js)

    手动路由... server.js 创建http服务器,解析pathname,传递给router处理. var http = require("http"); var url = ...

  2. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  3. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  4. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  5. label用js，jquery取值赋值，以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  6. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  7. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  8. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  9. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

随机推荐

  1. 07_例子讲解：rlCoachKin + rlCoachMdl

    RL提供了2个相当简单的基于socket的虚拟化机器人,是socket服务端. rlCoachKin是用于D-H运动链(在rlkin\*xml中定义的). rlCoachMdl相当于任意几何的工具链. ...

  2. CI获取ip的API

    header("Content-type:text/html;charset=utf-8"); // p($this->input->ip_address()); // ...

  3. svn执行clean up 操作时报错 "Previous operation has not finished; run 'cleanup' if it was interrupted"解决如下！

    今天在项目中更新的时候,突然间爆了一个svn的这个错误,当时提示我去clean up操作,结果我执行clean up操作时候,还是报错,后来坚持出来,是因为ios项目中的一个图标出了问题,使svn进入 ...

  4. AVAudioRecorder 录制音频

    AVFoundation 中使用AVAudioRecorder 类添加音频录制功能是非常简单的, AVAudioRecorder构建与Audio Queue Services之上是一个功能强大且代码简 ...

  5. 一个月时间整理《深入浅出Node.js》

    今天终于把朴灵老师写的<深入浅出Node.js>给学习完了, 这本书不是一本简单的Node入门书籍,它没有停留在Node介绍或者框架.库的使用层面上,而是从不同的视角来揭示Node自己内在 ...

  6. python引入导入自定义模块和外部文件

    参考:http://blog.csdn.net/devil_2009/article/details/15816237 项目中想使用以前的代码,或者什么样的需求致使你需要导入外部的包 如果是web 下 ...

  7. SQL sum case when then else【转】

    数据库 t 表     b 表内容        Id        Name      胜负        1          张三     胜        2          李四     ...

  8. Tomcat安装与配置图文教程

    安装Tomcat之前先配置JDK,JDK的JAVA_HOME变量都必须设置好,以便Tomcat找到JDK.关闭防火墙等. 一:安装版Tomcat 1. 先下载tomcat,到http://tomcat ...

  9. 2014年度辛星css教程夏季版第四节

    接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...

  10. 上传图片+浏览+裁切 Demo(无后台处理部分)

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...