用DapperExtensions和反射来实现一个通用搜索 - yt1983(2)_H5之家

public class Predicate { 列名 ColumnItem { get; set; } 操作符 OperatorItem { get; set; } 值 Value { get; set; } }

4.然后通过反射Account类的属性加载到前台列名的DropDownList，再增加一个操作符的DropDownList

5.前台界面实现代码

<!DOCTYPE html>
<html>
<head>
    <title>DapperExtensions通用搜索</title>
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        Date.prototype.format = function (format) {
            var o = {
                "M+": this.getMonth() + 1, //month
                "d+": this.getDate(), //day
                "h+": this.getHours(), //hour
                "m+": this.getMinutes(), //minute
                "s+": this.getSeconds(), //second
                "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
                "S": this.getMilliseconds() //millisecond
            }

            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            }

            for (var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        }
    </script>
    <style type="text/css">
        ul
        {
            list-style: none;
            padding: 0px;
            margin: 0px;
            width: 590px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #99CC00;
            border-top: 0px;
            font-size: 12px;
        }
        ul li
        {
            display: block;
            width: 25%;
            float: left;
            text-indent: 2em;
        }
        .th
        {
            background: #F1FADE;
            font-weight: bold;
            border-top: 1px solid #99CC00;
        }
    </style>
    <script type="text/javascript">
        var predicates = [];
        var index = 0;
        $(document).ready(function () {
            $("#btnAdd").click(function () {
                var columnItem = $("#columnItems option:selected");
                var operatorItem = $("#operatorItems option:selected");
                var value = $("#value").val();
                if(value == ""){
                    alert("请输入值");
                    return;
                }
                var predicate = { index: index, columnItem: columnItem.val(), operatorItem: operatorItem.val(), value: value };
                predicates.push(predicate);
                var html = "<ul><li>" + columnItem.text() + "</li><li>" + operatorItem.text() + "</li><li>" + value + "</li><li><a href='javascript:;'>删除</a></li></ul>"
                $("#predicates ul:last").after(html);
                index++;
            })

            $("#btnSearch").click(function () {
                $.ajax({
                    type: "POST",
                    url: "home/search",
                    data: JSON.stringify(predicates),
                    contentType: "application/json",
                    success: function (data) {
                        if (data.Error != null) {
                            alert(data.Error);
                            return;
                        }
                        $("#list .th").nextAll().remove();
                        var html = "";
                        $.each(data, function (index, item) {
                            html += "<ul><li>" + item.AccountId + "</li>";
                            html += "<li>" + item.RealName + "</li>";
                            html += "<li>" + item.Age + "</li>";
                            //转换日期
                            var dateMilliseconds = parseInt(item.CreateTime.replace(/\D/igm, ""));
                            var date = new Date(dateMilliseconds);
                            html += "<li>" + date.format("yyyy-MM-dd hh:mm:ss") + "</li></ul>";
                        });
                        $("#list .th").after(html);
                    }
                });
            })
        })

        function del(obj,index) {
            obj.parentNode.parentNode.remove();
            for (var i = 0; i < predicates.length; i++) {
                if (predicates[i].index == index) {
                    predicates.splice(i, 1);
                }
            }
        }
    </script>
</head>
<body>
    <div>
        列名：@Html.DropDownList("columnItems")  操作符：@Html.DropDownList("operatorItems")  值：@Html.TextBox("value")  
        <input type="button" value="增加" />  <input type="button" value="搜索" />
    </div>
    <br />
    <div>
        <ul>
            <li>列名</li>
            <li>操作符</li>
            <li>值</li>
            <li>操作</li>
        </ul>
    </div>
    <br />
    <div>
        <ul>
            <li>账户ID</li>
            <li>姓名</li>
            <li>年龄</li>
            <li>创建时间</li>
        </ul>
    </div>
</body>
</html>

6.最后通过DapperExtensions的谓词和反射实现搜索方法