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

    <!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...

  2. 12_CXF入门

    [CXF] Apache CXF = Celtix + Xfire,开始叫 Apache CeltiXfire,后来更名为 Apache CXF 了,以下简称为 CXF.Apache CXF 是一个开 ...

  3. bash 脚本

    一.英文版 1.Advanced Bash-Scripting Guide 二.中文 1.BashGuide for Beginners 中文版

  4. 英语中的 姓氏/Surname

    .Chomsky (Belarusian: Хомскі, Russian: Хомский, Ukrainian: Хомський, Hebrew: חומסקי‎‎, "from (V ...

  5. java.util.AbstractStringBuilder源码分析

    AbstractStringBuilder是一个抽象类,是StringBuilder和StringBuffer的父类,分析它的源码对StringBuilder和StringBuffer代码的理解有很大 ...

  6. vsftpd.conf配置详解

    根据 /etc/vsftpd/vsftpd.conf默认配置给出设定功能   # Example config file /etc/vsftpd/vsftpd.conf # The default c ...

  7. ASP.NET 实现简单的图片防盗链介绍

    在此,网站图片防盗链的方法是,通过获取Http请求头中的 Referer 标头与本网站域名比较,来判断用户是否来自本站跳转过来的 . 创建一个全局处理程序,用来处理images目录下的图片的直接请求: ...

  8. HTML5-原声拖放

    最早在网页中引入js拖放功能的是IE4,并且只可以拖放图像和某些文本.IE5.5以后网页中的任何元素都可以进行拖放.HTML5以IE为实例制定了拖放规范.FireFox3.5.Safari3+和Chr ...

  9. 关于静态库和动态库的理解(C++)

    库的存在,是软件模块化的基础. 库存在的意义: } 库是别人写好的现有的,成熟的,可以复用的代码,你可以使用但要记得遵守许可协议.      } 现实中每个程序都要依赖很多基础的底层库,不可能每个人的 ...

  10. javascript进阶——Ajax

    统的Web 页面和应用中,用户每点击页面上的某个部分,浏览器就会向服务器发出一个请求,等待服务器做出响应,然后返回一个完整新网页,但在大多数情况下用户不得不忍受页面闪烁和长时间的等待.随着Web技术的 ...