通过输入价格范围，来筛选汽车，主要方法是通过点击“查询”按钮，触发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. JavaScript基础-对象<1>

    1.JavaScript内部对象属性和方法 (1)内置String对象 String 对象是JavaScript的核心对象之一. 创建一个sting对象: var a="this defin ...

  2. OpenJudge 2754 八皇后

    1.链接地址: http://bailian.openjudge.cn/practice/2754 2.题目: 总时间限制: 1000ms 内存限制: 65536kB 描述 会下国际象棋的人都很清楚: ...

  3. 阿里云 CentOS 安装JDK

    初用阿里云,使用centOS linux64操作系统 . 自己上传jdk文件总是安装失败,原因估计是因为我的网络不好,导致文件损坏. 解决办法,直接在linux命令行模式下,到官网下载 jdk,命令如 ...

  4. USB初始化

    //USB初始化void CFileManagerDlg::usbinit(){ #define BUFFER_SIZE 64 struct usb_bus *bus; struct usb_devi ...

  5. 手机的touch事件(基于jquery)

    javascript代码: $.swipe=function(opt){   var o = $.extend({     mainSelector:"",     swipeLe ...

  6. CSS 之 @media

    @media 版本:CSS2 兼容性:IE5+ 语法: @media  sMedia  {sRules} 取值: sMedia : 指定设备名称.请参阅设备类型 all, aural, braille ...

  7. PHP LINUX Notice: undefined $_GET完美解决方法

    PHP Notice: undefined 平时用$_GET[‘xx’] 取得参数值时,如果之前不加判断在未传进参数时会出现这样的警告: PHP Notice: undefined index xxx ...

  8. Challenge Checkio（python）—初尝python练习网站

    最近在找点python语言练习的网站,发现这个网站不错 http://www.checkio.org/ 页面设计的也比较漂亮,比较适合学习python的语法知识.不过注册这个网站 开始就得解决一个py ...

  9. python函数的返回值 讲解

    我们一起来聊聊python函数返回值的特殊情况,之前我也碰到过类似方面的问题,到后来查阅了一些资料后,发现原来是这样. 首先,写函数的时候,一定要写函数的文档,这样方便我们识别函数是做什么的.我记得很 ...

  10. 9.MVC框架开发（关于ActionResult的处理）

    1.在Action处理之后,必须有一个返回值,这个返回值必须继承自ActionResult的对象 2.ActionResult,实际就是服务器端响应给客户端的结果 ViewResult(返回视图结果) ...