2017-02-01

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>
    }
    

沒有留言:

張貼留言