VSCode建立連接配接mysql的ASP.NET Core項目（續1：增加檢索功能）

  前面兩篇文章《VSCode建立連接配接mysql的ASP.NET Core項目》、《VSCode建立連接配接mysql的ASP.NET Core項目（續）》以微軟的示例項目為基礎，介紹了如何在VSCode中建立ASP.NET Core Web項目，并支援浏覽、建立、編輯、删除等功能，本文在之前的項目基礎上增加條件檢索功能。

  微軟的示例項目中介紹了支援下拉選擇和輸入字元串的檢索項，本文介紹這兩種方式的同時，再添加按時間檢索的檢索項。

  從微軟的示例項目中可以看到，有兩種方式可以傳遞過濾用的參數：

  第一種是通過URL方式傳遞，比如在浏覽頁面中點選“删除“連結，會将待删除的記錄Id通過URL傳遞給删除頁面，浏覽頁面中通過使用asp-route-id="@item.Id"來設定生成的連結中待參數item.Id，而删除頁面通過指定@page "{id:int}"接收傳過來的參數，并在OnGet和OnPost函數中使用，用于從資料庫中檢索要删除的記錄。

  第二種是在示例項目的浏覽頁面中同時添加檢索表單，将要檢索的字段放在表單中，通過OnGet函數判斷是否需要根據檢索條件進行檢索。

  本文中的檢索功能是按照第二種方式增加的。

  有幾個檢索條件，就需要在頁面對應的IndexModel中增加幾個字段，如果需要下拉選擇，還需要定義單獨的屬性用于儲存下拉選擇項。本項目中總共有三個檢索項：名稱、類型及最晚釋出時間（可空），定義如下：

[BindProperty(SupportsGet = true)]
     public string SearchString { get; set; }
     
     public SelectList Genres { get; set; }
     
     [BindProperty(SupportsGet = true)]
     public string MovieGenre { get; set; }
     
     [DataType(DataType.Date)]
     [BindProperty(SupportsGet = true)]
     public DateTime? ReleaseDate{get;set;}
           

  

  根據微軟的教程（參考文獻1），屬性增加BindProperty屬性主要用于與檢索表單中的字段對應，也就是在下列的表單中使用asp-for标記幫助程式設定的值與IndexModel中的屬性值對應，在input中輸入的值會賦予IndexModel中的同名的屬性上。

<form>
    <p>
        類型<select asp-for="MovieGenre" asp-items="Model.Genres">
            <option value="">All</option>
        </select>
        名稱: <input type="text" asp-for="SearchString" />
        釋出時間晚于： <input  asp-for="ReleaseDate" />
        <input type="submit" value="檢索" />
    </p>
</form>
           

  上述三個檢索項中，SearchString的類型最簡單，根據參考文獻4中的對照表，String類型的屬性對應的輸入字段類型是text。而下拉選擇使用的标簽是select，同時使用asp-items指定下拉選擇項資料源，該屬性在IndexModel中的類型是SelectList，同時在OnGet事件中初始化該屬性的值。

  而對時間屬性而言，由于DateTime是結構性，為防止頁面初始化時根據該值進行過濾，将該屬性類型設定為可空類型，初始值為空。而在Index頁面的表單中，根據參考文獻4中給出的對應輸入類型是datetime-local，設定為該類型後無法彈出日期選擇框，如下圖所示：

  于是根據參考文獻2-3，将時間字段的type屬性删除，由程式自動判斷時間字段的類型，此時即可彈出時間選擇框（Ubuntu中截圖截不到彈出的時間選取框），也可以清除時間字段的内容。

  至此，搜尋功能增加完畢，有興趣的朋友還可以根據參考文獻4繼續增加其它類型的條件檢索字段。由于初學ASP.NET Core，很多了解可能有誤或者不深，歡迎互相交流。

  後續還會根據微軟的教程及示例項目，繼續增加本項目中的功能。

參考文獻：

[1]https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor-pages/search?view=aspnetcore-5.0

[2]https://www.it1352.com/1945400.html

[3]https://www.it1352.com/1945390.html

[4]https://docs.microsoft.com/zh-cn/aspnet/core/mvc/views/working-with-forms?view=aspnetcore-5.0#the-input-tag-helper