通过输入价格范围，来筛选汽车，主要方法是通过点击“查询”按钮，触发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. 【html】【16】高级篇--毛玻璃效果[模糊]

    参考: http://www.zhangxinxu.com/wordpress/2013/11/%E5%B0%8Ftip-%E4%BD%BF%E7%94%A8css%E5%B0%86%E5%9B%BE ...

  2. C# 高精度乘法 支持小数（待优化）

    将N*N乘法转化为(N*n1)+(N*n2)....(N*nn) 乘完后在补充小数点 public static char[] Quadrature(string a, string b) { ] { ...

  3. Poj 1054 The Troublesome Frog / OpenJudge 2812 恼人的青蛙

    1.链接地址: http://poj.org/problem?id=1054 http://bailian.openjudge.cn/practice/2812 2.题目: 总时间限制: 10000m ...

  4. 开发日志系列：一个表单页面的呈现与提交（一）——JSON的操作

    JSON操作 引子 最近在做一个表单页面,大概是这个样子的 这里打算用一个JSON存储所有的信息,我们可以理解为,所有东西都存在一个字符串里面.方便,快捷,易读,数据库操作也方便了.甚至,可以将很多不 ...

  5. <meta name="viewport" content="width=device-width, initial-scale=1" />

    今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得 ...

  6. PHP知识分享之session && cookie

    <?php /* * @Content : session && cookie * @author : Mr.xml * @time : 2015-3-17 09:53:49 * ...

  7. javascript 弹出的窗口返回值给 父窗口

    直接上代码,有些地方可以用到: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <H ...

  8. Java知识总结--Servlet&JSP

    1MVC的各个部分都有哪些技术来实现?如何实现? MVC是Model-View-Controller的简写.“Model”代表的是应用的业务逻辑(通过JavaBean,EJB组件实现),“View”是 ...

  9. 关于WPF中Popup控件的小记

    在wpf开发中,常需要在鼠标位置处弹出一个“提示框”(在此就以“提示框”代替吧),通过“提示框”进行信息提示或者数据操作,如果仅仅是提示作用,使用ToolTip控件已经足够,但是有些是需要在弹出的框中 ...

  10. mysql索引使用笔记

    1.使用explain语句查看性能mysql> explain select product_id from orders where order_id in (123, 312, 223, 1 ...