通过输入价格范围，来筛选汽车，主要方法是通过点击“查询”按钮，触发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. 03静态链表_StaticLinkList--(线性表)

    #include "string.h" #include "ctype.h" #include "stdio.h" #include &qu ...

  2. （poj）1064 Cable master 二分+精度

    题目链接:http://poj.org/problem?id=1064 Description Inhabitants of the Wonderland have decided to hold a ...

  3. Poj/OpenJudge 1094 Sorting It All Out

    1.链接地址: http://poj.org/problem?id=1094 http://bailian.openjudge.cn/practice/1094 2.题目: Sorting It Al ...

  4. ubuntu的syslog为空，停止写入解决方法

    修改syslog权限: chown syslog:adm syslog

  5. leetcode Permutations II 无重全排列

    作者:jostree  转载请注明出处 http://www.cnblogs.com/jostree/p/4051169.html 题目链接:leetcode Permutations II 无重全排 ...

  6. Entity Framework 插入数据 解决主键非自增问题

    http://blog.csdn.net/educast/article/details/8632806 与Entity Framework相伴的日子痛并快乐着.今天和大家分享一下一个快乐,两个痛苦. ...

  7. JS判断输入框值是否为空

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

  8. 使用.htaccess进行浏览器图片文件缓存

    对于图片类网站,每次打开页面都要重新下载图片,慢不说,还非常浪费流量.这时就需要用到缓存,强制浏览器缓存图片文件 缓存文件,提问网站访问数度,减少流量消耗,现提供2中缓存代码 打开.htaccess文 ...

  9. JAVA获取当前日期以及将字符串转成指定格式的日期

    /* * To change this template, choose Tools | Templates * and open the template in the editor. */ pac ...

  10. 同样的一句SQL语句在pl/sql 代码块中count 没有数据，但是直接用SQl 执行却可以count 得到结果

    pl/sql 代码块: SELECT count(distinct t2.so_nbr) INTO v_count2 FROM KFGL_YW_STEP_qd t2 WHERE t2.partitio ...