網頁

MVC練習 - 依使用者選擇時區顯示該時區時間

MVC練習

假日看到MVP Edward.K一篇[ASP.NET]利用TimeZoneInfo將現在時間切換到各個國時間一文,覺得介紹的很不錯。就改寫為MVC的版本,自我練習一下。

ZoneController

新增一個ZoneController,此Controller要取得時區清單並傳遞至View Page。MVC 5的加入控制器和之前有些不同:

MVC 5 - 添加基架

Scaffold在MVC 5正式反翻為「基架」之不是之前Preview與RC的「支架」。選擇使用「MVC 5控制器-空白」。

在ZoneController新增一個名稱Time的Action方法:

   public ActionResult Time()
   {
       IReadOnlyCollection<TimeZoneInfo> timeZones = TimeZoneInfo.GetSystemTimeZones();
       ViewBag.TimeZoneInfo = new SelectList(timeZones, "Id", "DisplayName");
       return View();
   }
  

IReadOnlyCollection本身繼承IEnumerable與IEnumerable(Of T),可以直接將取得的timeZones傳入SelectList類別使用。在SelectList類別選擇使用第三種建構函式:「SelectList(IEnumerable, String, String)」:

   public SelectList(
    IEnumerable items,
    string dataValueField,
    string dataTextField
   )
  

dataValueField是讓我們擇選要填入「<option value="dataValueField">」的值,而dataTextField則是要顯示的文字:「<option value="dataValueField">dataTextField</option>」。

SelectList類別中傳入的"Id"與"DisplayName"兩個參數值,請參考TimeZoneInfo 類別的屬性說明。

Add Time Page View

新增檢視,在MVC 5的新增檢視的UI內容有些不同:

MVC 5 - 加入檢視

範本選擇「Empty(沒有模型)」。

   @using (Html.BeginForm("GetSelectTime","Zone"))
   {
       <fieldset>
           <legend>時區選擇
           @Html.DropDownList("timeString", ViewBag.TimeZoneInfo as IEnumerable<SelectListItem>)
           <input type="submit" value="確定" />
       </fieldset>
   }
  

執行之後可以看畫面和原始碼:

全球時區-下拉式選單

Html.DropDownList輔助方法依照傳遞過來的SelectList類別資訊,幫我們產生了完整的下拉式選單。我們在Html.BeginForm輔助方法指定了一個處理的GetSelectTime的Action方法來處理使用者選擇時區,讓我們實作它。

Add GetSelectTime Action

在前面的Html.DropDownList輔助方法裡指定傳送參數為"timeString",所以此GetSelectTime方法只取要接收"timeString"參數值並進行處理即可。

   [HttpPost]
   public ActionResult GetSelectTime(string timeString)
   {
       DateTime selectTime = TimeZoneInfo.ConvertTimeBySystemTimeZoneId(DateTime.Now, timeString);
       return Content(selectTime.ToString());
   }
  

現在啟用應用程式,選擇任一時區後按下確認即可看到正確時區的時間:

取得使用者指定時區時間

MVC練習 - 改為AJAX取回時區時間

前面是使用表單方式來實作,不過這種資訊相當合適透過AJAX來取回結果,並顯示在目前頁面上,讓我們來改寫一下Time頁面:

   <p>現在時間:@DateTime.Now</p>
   <p>選擇時區:<span id="zonetime"></span></p>

   @using (Ajax.BeginForm("GetSelectTime", "Zone", new AjaxOptions() { UpdateTargetId = "zonetime" }))
   {
   <fieldset>
    <legend>時區選擇</legend>
          @Html.DropDownList("timeString", ViewBag.TimeZoneInfo as IEnumerable)
          <input type="submit" value="確定" />
      </fieldset>
      }

   @section scripts{
       @Scripts.Render("~/bundles/jqueryval")
   }
  

要將Html.BeginForm表單內容改寫為AJAX的方式實在太簡單,將關鍵字Html修改為Ajax,然時加入最重要的AjaxOptions相關參數即可。

如果是你是MVC 5專案的話,以上程式碼是沒有AJAX效果,以上是MVC 3/MVC 4的寫法,為什麼MVC 3/MVC 4?這是因為MVC 5範本中預設沒有加入Microsoft jQuery Unobtrusive Ajax的腳本檔案,請先手動加入:

PM> Install-Package Microsoft.jQuery.Unobtrusive.Ajax

然後修改最後引用scripts的段落:

  @section scripts{
      @*@Scripts.Render("~/bundles/jqueryval")*@
      <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
  }
  

只有單一檔案,我就不特別設定Bundles規則了。

AJAX-取得使用者指定時區時間

現在,按下確定時會引發AJAX請求,請求成功之後會將選擇區時對應的時間值回傳,然後寫入指定的span元素內。

沒有留言:

張貼留言

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。