MVC Search 4

朽木zi發表於2020-12-05
MVC

1、首先建立資料庫Student和表student，表結構如下
在這裡插入圖片描述

2、在表中新增資料
在這裡插入圖片描述

3、建立edml檔案
在這裡插入圖片描述

4、在模型層生成

namespace S9.Models  （這裡S9是專案名）
{    public class StudentRep
    {        StudentEntities db = new StudentEntities();
        public IQueryable<Student> GetStudents()
        {            return db.Students;        }
        public IQueryable<Student> GetStudentsByKeys(Student s)
        {    IQueryable<Student> students=db.Students;
            if (!string.IsNullOrWhiteSpace(s.Sno))
                students = students.Where(q => q.Sno == s.Sno);
            if (!string.IsNullOrWhiteSpace(s.Sname))
                students = students.Where(q => q.Sname.Contains(s.Sname));
            if (!string.IsNullOrWhiteSpace(s.Ssex))
                students = students.Where(q => q.Ssex == s.Ssex);
            if (s.Sage!=null)
                students = students.Where(q => q.Sage == s.Sage);
            if (!string.IsNullOrWhiteSpace(s.Sdept))
                students = students.Where(q => q.Sdept.Contains(s.Sdept));
            return students;          }    }}

5、在控制器層修改控制器HomeControler內容，修改內容如下：

public ActionResult S1()
        {  IQueryable<Student> students = StuRep.GetStudents();
            return View(students);        }
        [HttpPost]
        public ActionResult SearchStu(FormCollection collection)
        {  Student stu = new Student();
            stu.Sno = collection["sno"];
            stu.Sname = collection["sname"];
            stu.Ssex = collection["ssex"];
            try      
{   stu.Sage = Convert.ToDecimal(collection["sage"]);            }
            catch
            {        stu.Sage = null;            }
            stu.Sdept = collection["sdept"];
            IQueryable<Student> students = StuRep.GetStudentsByKeys(stu);
            return PartialView("StudentRecord",students);        }

6、對應action新增檢視View S1（）

@model IQueryable<S9.Models.Student>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>S1</title>
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submitBtn").click(function () {
                $.post("/Home/SearchStu", $("#paras").serialize(), function (response) {
                    $("#Records").html(response);
                });
            });
        });
    </script>
</head>
<body>
    <div style="padding: 1px; margin: 10px; font-family: Arial, sans-serif; font-size: small;">
        <form id="paras" >
            學號：<input type="text" style="width: 50px" name="sno" />
            姓名：<input type="text" style="width: 50px" name="sname" />
            性別：<select name="ssex"><option value=""></option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            年齡：<input type="text" style="width: 50px" name="sage" />
            所在系所：<input type="text" style="width: 50px" name="sdept" />
            <input type="button" value="查詢" id="submitBtn" />
        </form>
    </div>
    <hr style="width: 96%" />
    <div id="Records">
        @Html.Partial("StudentRecord", Model)
    </div>
</body>
</html>

新增檢視StudentRecord.cshtml，程式碼如下：

@model IQueryable<S9.Models.Student>
<style type="text/css">
    table
    {
        padding: 1px;
        margin: 10px;
        font-family: Arial, sans-serif;
        font-size: small;
        table-layout: auto;
        border-collapse: collapse;
        border: 1px solid #C0C0C0;
        width: 96%;
    }

    td
    {
        padding: 1px;
        margin: 1px;
        border: 1px solid #C0C0C0;
        text-align: center;
    }
</style>

<table>
    <tr>
        <td>學號</td>
        <td>姓名</td>
        <td>性別</td>
        <td>年齡</td>
        <td>所在系所</td>
    </tr>
    @{
        foreach (var student in Model)
        {
        <tr>
            <td>@student.Sno</td>
            <td>@student.Sname</td>
            <td>@student.Ssex</td>
            <td>@student.Sage</td>
            <td>@student.Sdept</td>
        </tr>
        }
    }
</table>

7、執行檢視S1，執行結果如下：

在這裡插入圖片描述
在這裡插入圖片描述

相關文章