How to handle the value of the inputs with disabled html attribute in Asp.Net core Razore Pages?-CodePudding

When sending an input with disabled html attribute to Update an Entity, I faced with a null input tag when the Modelstate.IsValid was flase.

I want to Update an entity named Episode. My ViewRazore is :

<form method="post" enctype="multipart/form-data">
            <input type="hidden" asp-for="@ViewData["EpisodeId"]" />
            <input type="hidden" asp-for="@ViewData["EpisodeFileName"]" />
            <h2>اطلاعات اپیزود</h2>
            <hr />
            <div class="col-md-8">

                <div class="danger" asp-validation-summary="All"></div>
                <div class="form-group">
                    <label>نام اپیزود</label>
                    <input type="text" asp-for="@Model.Episode.EpisodeTitle" class="form-control">
                    <span asp-validation-for="@Model.Episode.EpisodeTitle"></span>
                </div>

                <div class="form-group">
                    <label>زمان اپیزود</label>
                    <input type="datetime" asp-for="@Model.Episode.EpisodeTimeLength" class="form-control">
                    <span asp-validation-for="@Model.Episode.EpisodeTimeLength"></span>
                </div>

                <div class="form-group">
                    <label>Current EpisodeFileName</label>     
                    <input disabled asp-for="@Model.Episode.EpisodeFileName"  />
                </div>
    </div>
</form>

As you can see, I have the below code:

<div class="form-group">
       <label>Current EpisodeFileName</label>     
       <input disabled asp-for="@Model.Episode.EpisodeFileName"  />
 </div>

I want the Admin to see what the Current EpisodeFileName (it can be an mp4 file or etc) is when updating. Here is my EditEpisode.cshtml.cs:

public class EditEpisodeModel : PageModel
    {
        private ICourseServices _courseServices;
        public EditEpisodeModel(ICourseServices courseServices)
        {
            _courseServices = courseServices;
        }

        [BindProperty]
        public Episode Episode { get; set; }
        public void OnGet(int id)
        {
            Episode = _courseServices.GetEpisodeByEpisodeId(id);
            ViewData["EpisodeId"] = id;
            ViewData["EpisodeFileName"] = Episode.EpisodeFileName;
        }

         
        public IActionResult OnPost(Episode episode)
        {
            if (!ModelState.IsValid)
            {
                ModelState.AddModelError("","لطفا تمام فیلد ها را با دقت وارد کنید");
                return Page();
            }

            return Page();
        }
    }

As you can see, when my application is running, I decided to leave the value of one of my inputs empty, for example I left the following input empty:

<input type="text" asp-for="@Model.Episode.EpisodeTitle" class="form-control">

So as you know, because of my if statment inside the OnPost method:

if (!ModelState.IsValid)
{
     ModelState.AddModelError("","لطفا تمام فیلد ها را با دقت وارد کنید");
     return Page();
}

My OnPost method will call the ReturnPage(). My question is why when the ReturnPage() is called, the input <input disabled asp-for="@Model.Episode.EpisodeFileName" /> become empty!? It's just that, when I use disabled attribute inside my input tag and then post the information, my input is became empty! But when I remove this attribute from the input, I didn't face with this issue ! So anybody can explain it to me ?

CodePudding user response：

Browsers does not support disabled property to submit with forms by default:

The difference between disabled and readonly is that read-only controls can still function and are still focusable, whereas disabled controls can not receive focus and are not submitted with the form and generally do not function as controls until they are enabled.

For your scenario, you can change disabled to readonly.

<input readonly asp-for="@Model.Episode.EpisodeFileName" />