ASP.NET MVC 如何 POST LIST 資料 1

開發 ASP.NET MVC 網站表單時,不時會遇到需要 post list 資料的需求,功能雖然很容易,但每次遇到就重寫也不是辦法,順手紀錄一下也讓大家看看有沒有其他更好的方法,我一直覺得自己用的方法很笨,但可以解決問題就是了

Controller

controller 程式碼相對單純

  1. 起始畫面用的 action

  2. 準備接受 post 資料的 action

    • 套用 [HttpPost]
    • 建議也套用 [ValidateAntiForgeryToken] 以增加安全性
    • 加上接受 list 資料的參數
  3. 接受資料的 action 加上邏輯及基本檢核

    public ActionResult Index()
    {
        return View();
    }
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Index(List<WeekDaysEnum> days)
    {
        //邏輯檢核
        if (days == null)
        {
            ModelState.AddModelError("days", "must choose one at least!!!");
        }
        if (ModelState.IsValid)
        {
            //實際處理邏輯
            return View();
        }
        return View(days);
    }
    

View

  1. 定義用來遞增的變數給 label for 用 int daysIndex = 0;
  2. 使用 form
    • @using (Html.BeginForm())
    • 如果 post action 名稱與 get 相同,不用另外寫
  3. 加上 Html.AntiForgeryToken 增加安全性 @Html.AntiForgeryToken()
  4. 定義一個全選按鈕

    <input type="checkbox" id="Allday" @((Model == null) ? "checked" : string.Empty) />
    <label for="Allday">
        Any
    </label>
    
  5. foreach 選項並為選項加上 label for 功能以增加 ux

    • input 的 name 需與 controller 參數名稱一致, model binding 才會正確

      @foreach (WeekDaysEnum item in Enum.GetValues(typeof(WeekDaysEnum)))
      {
          if (item != WeekDaysEnum.Default)
          {
              string _tmp = string.Concat("days_", daysIndex);
              <div class="col-sm-3">
                  <input class="days" type="checkbox" id="@_tmp" value="@item" name="days" @((Model == null || Model.Contains(item)) ? "checked" : string.Empty) />
                  <label for="@_tmp">
                      @item.ToString()
                  </label>
              </div>
              daysIndex++;
          }
      }
      
  6. 加上驗證訊息的 helper

    @Html.ValidationMessage("days", new { @class = "text-danger" })
    

script

  1. 定義 全選 按鈕行為
  2. 勾選選項檢查是否勾選 全選 按鈕

    @section scripts{
    <script type="text/javascript">
        var arraylen = $('.days').length;
    
        function checkAllday() {
            if ($('.days:checked').length === arraylen) {
                $('#Allday').prop("checked", true);
            } else {
                $('#Allday').prop("checked", false);
            }
        }
    
        $(function() {
            checkAllday();
            $('#Allday')
                .change(function() {
                    //console.log(this.checked);
                    if (this.checked) {
                        $('.days')
                            .each(function() {
                                $(this).prop("checked", true);
                            });
                    } else {
                        $('.days')
                            .each(function() {
                                $(this).prop("checked", false);
                            });
                    }
    
                });
            $('.days')
                .change(function() {
                    checkAllday();
                });
        });
    </script>
    }
    

參考資訊