asp.net-corerazor-pages

Asp.net core razor pages BindProperty collections List not Working


My plan is that I fill a list of data in OnGet and after sending it to the html page, I checkMark some lines and Fill some input on table, and finally it is posted to the server. But in OnPost, the collection is empty and does not return anything: But in onpost, the collection is empty and does not return anything:

 public class PermDateCourseViewModel
 {
     public string ClassDateS { get; set; }
     public DateTime ClassDate { get; set; }
     public string Weekday { get; set; }
     public string ClassTime { get; set; }
     public bool IsChecked { get; set; }

 }
 public class CourseSessionsSetModel : PageModel
 {
     [BindProperty]
     public List<PermDateCourseViewModel> PermDates { get; set; }


     [TempData]
     public string ShowMessage { get; set; }

     private readonly DbkabirContext db;
     public CourseSessionsSetModel(DbkabirContext context)
     {
         db = context;
     }

     public void OnGet(int Id)

     {

         DateTime StartPeriod = DateTime.Now;
       
         PermDates = new List<PermDateCourseViewModel>();
       
       
                 PermDateCourseViewModel permDate = new PermDateCourseViewModel()
                 {
                     ClassDate = StartPeriod,
                     ClassDateS = StartPeriod.ToString().ToShamsi(),
                     Weekday = PersianShamsi.ReturnWeekDayname(StartPeriod.ToString().ToShamsi()),
                     ClassTime = "08:00",
                     IsChecked = true,
                 };


     }
     public IActionResult OnPostAddSession(int CurCourseId)
     {
         for (int i = 0; i < PermDates.Count; i++)
         {
              //process on permDates
         }
         return null;
     }

 }
@page
@model KabirLang.Pages.CourseSessionsSetModel
@{

}

<div class="col-md-12">
        <form method="post">
            <div class="row">
                
                <div class="col-lg-6">
                    <div class="portlet box bg-light m-5">
                        <div class="portlet-body">
                            <table class="table compact">
                                <thead>
                                    <tr>
                                        <td>انتخاب</td>
                                        <td>روز</td>
                                        <td>تاریخ</td>
                                        <td>ساعت</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in Model.PermDates)
                                    {
                                        <tr>
                                            <td>
                                                <input type="checkbox" @item.IsChecked />
                                            </td>
                                            <td>@item.Weekday</td>
                                            <td>@item.ClassDateS</td>
                                            <td>
                                                <input class="form-control clockpicker-autoclose" asp-for="@item.ClassTime" />
                                            </td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="col-lg-2">
                    <div class="m-5">
                        <button type="submit" asp-page-handler="AddSession" class="btn btn-info btn-block btn-success m-5">
                            <i class=" fas fa-chevron-left"></i>

                        </button>

                        <button type="submit" asp-page-handler="DelSession" class="btn btn-info btn-block btn-danger m-5">
                            <i class="icon-close"></i>
                        </button>
                    </div>
                </div>

            </div>
        </form>
/div>

when post data by click on AddSession Button, OnPost not get any rows

Please guide me, what changes should I make in the codes, to receive the collection Data in OnPostAddSession Handler along with the changes made by the user in the inputs on the client side?


Solution

  • In your code your Form inputs were not named correctly for model binding and Properties like ClassDate, ClassDateS, and Weekday were not included in the form submission. To resolve the issue Used asp-for="PermDates[i].PropertyName" to ensure inputs are named correctly for model binding.Included hidden inputs for ClassDate, ClassDateS, and Weekday to ensure these fields are submitted.

    CourseSessionsSet.cshtml:

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using WebApplication2.Models;
    
    namespace WebApplication2.Pages
    {
        public class CourseSessionsSetModel : PageModel
        {
            [BindProperty]
            public List<PermDateCourseViewModel> PermDates { get; set; }
    
            [TempData]
            public string ShowMessage { get; set; }
    
            public void OnGet(int Id)
            {
                DateTime StartPeriod = DateTime.Now;
    
                PermDates = new List<PermDateCourseViewModel>
                {
                    new PermDateCourseViewModel
                    {
                        ClassDate = StartPeriod,
                        ClassDateS = StartPeriod.ToString("yyyy-MM-dd"), // Adjust the format as needed
                        Weekday = StartPeriod.DayOfWeek.ToString(),
                        ClassTime = "08:00",
                        IsChecked = true,
                    }
                };
            }
    
            public IActionResult OnPostAddSession(int CurCourseId)
            {
                // Process PermDates
                foreach (var date in PermDates)
                {
                    // Process each date
                }
    
                return Page();
            }
    
        }
    }
    

    CourseSessionsSet.cshtml.cs:

    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using WebApplication2.Models;
    
    namespace WebApplication2.Pages
    {
        public class CourseSessionsSetModel : PageModel
        {
            [BindProperty]
            public List<PermDateCourseViewModel> PermDates { get; set; }
    
            [TempData]
            public string ShowMessage { get; set; }
    
            public void OnGet(int Id)
            {
                DateTime StartPeriod = DateTime.Now;
    
                PermDates = new List<PermDateCourseViewModel>
                {
                    new PermDateCourseViewModel
                    {
                        ClassDate = StartPeriod,
                        ClassDateS = StartPeriod.ToString("yyyy-MM-dd"), // Adjust the format as needed
                        Weekday = StartPeriod.DayOfWeek.ToString(),
                        ClassTime = "08:00",
                        IsChecked = true,
                    }
                };
            }
    
            public IActionResult OnPostAddSession(int CurCourseId)
            {
                // Process PermDates
                foreach (var date in PermDates)
                {
                    // Process each date
                }
    
                return Page();
            }
    
        }
    }
    

    enter image description here

    enter image description here