.Net架构编程题

程序设计题

---

1. 在控制器中实现模糊查询并将结果返回给视图的代码。 （模糊查询用户名为例）

【前端视图代码】

<form action="QueryUsername" method="post">
    用户名:<input type="text" name="username" />
    <input type="submit" value="提交" />
</form>

【前端样式】

【后台代码】

public BlogDbContext db = new BlogDbContext();
        // GET: Query
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult QueryUsername(string username)
        {
            var result = from u in db.Users
                         where SqlFunctions.PatIndex("%" + username + "%",u.Username) > 0
                         select u;
            return View(result.ToList());
        }

【返回结果页代码】

@model IEnumerable <MyBlog.Models.User>  //这里是"项目名.Models.实体类名"
<h2>查询结果</h2>
<table>
    <tr>
        <th>ID</th>
        <th>用户名</th>
    </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>@item.ID</td>
            <td>@item.Username</td>
        </tr>
    }
</table>

【返回结果页视图样式】

---

2.使用JS或者JQuery动态修改页面元素的样式表
此题以动态修改行的背景为例，其他修改样式类似。（JS和JQuery任意选一种）
题目：使用JQuery实现表格隔行变色（黄色）和当前行高亮（红色）显示功能。

【前端代码】

<table id="tb" border="1">
    <tr><td>2011001</td><td>张三</td></tr>
    <tr><td>2011002</td><td>李四</td></tr>
    <tr><td>2011003</td><td>王五</td></tr>
    <tr><td>2011004</td><td>赵六</td></tr>
</table>

【JQuery代码】

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#tb tr:even").css("background-color", "yellow");
        var bg;
        $("tr").mouseover(function () {
            bg = $(this).css("background-color");
            $(this).css("background-color","red");
        });
        $("tr").mouseout(function () {
            $(this).css("background-color", bg);
        });
    });
</script>

【前端样式】

鼠标移到第二行

鼠标移开

---

3.使用Ajax在用户输入的同时同步的校验相关用户名的有效性，并给出相关的提示。

【前端代码】

<div>
    用户名:<input type="text" id="username" /><br />
    <div id="hint"></div>
</div>

【JQuery代码】

<script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#username').keyup(function () {
            $.ajax({
                url: "CheckUsername",
                type: "post",
                data: {
                    username : $('#username').val()
                },
                dataType: 'text',
                success: function (res) {
                    $("#hint").html(res);
                }
            });
        });
    });
</script>

【后台代码】

[HttpPost]
        public string CheckUsername(string username)
        {
            var result = from u in db.Users
                         where u.Username.Equals(username)
                         select u;
            if (result.Count() > 0)
            {
                return "此用户名已存在！";
            }
            else
            {
                return "恭喜你，该用户可以使用！";
            }
        }

【前端显示效果】
输入已存在的用户名

输入不存在的用户名