Home > Back-end >  .NET Core Razor page Dropdown not returning a value
.NET Core Razor page Dropdown not returning a value

Time:10-19

I'm very new to .net core 5 and razor pages and trying to build a search form to display results but am unable to get the values from two specific dropdowns(always return a 1 or null, depending on the model definition). Here is the HTML for the search controls:

    <form method="post">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-2 vh-100" style="background-color:lightgray;">
                <div class="row">
                    <div class="colvertspc">
                        <label>Begin Date</label>
                        <input type="date" class="form-control" name="begindate" id="begindate" asp-for="paramsearch.BeginDate" />
                    </div>
                </div>
                <div class="row">
                    <div class="colvertspc">
                        <label>End Date</label>
                        <input type="date" class="form-control" name="enddate" id="enddate" asp-for="paramsearch.EndDate" />
                    </div>
                </div>
                <div class="row">
                    <div class="colvertspc">
                        <label>Access Rule Group</label>
                        <div>
                            <select name="accessrulegroup" asp-items="Model.accessgrouplist" class="form-control" asp-for="paramsearch.AccessRuleGroupCode">
                               <option value="-1">Select</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="colvertspc">
                        <label>Access Rule Category</label>
                        <div>
                            <select name="accessrulecategory" asp-items="Model.accesscategorylist" class="form-control" asp-for="paramsearch.AccessRuleCategoryCode">
                                <option value="-1">Select</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="colvertspc">
                        <label>Sort Order</label>
                        <div>
                            <select name="sortorder" class="form-control" asp-for="paramsearch.SortOrder">
                                <option value="1">ASC</option>
                                <option value="2">DESC</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="colvertspc">
                        <button type="submit" class="btn btn-success">SEARCH</button>
                    </div>
                </div>

Here is the code for the PageModel to bind and retrieve values:

        public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }


        //dropdowns
        public SelectList accessgrouplist { get; set; }
        public SelectList accesscategorylist { get; set; }


        //parameters from left side panel, for search
        [BindProperty]
        public SearchParametersModel paramsearch { get; set; }


        public void OnGet()
        {
            //bind search dropdowns
            this.accessgrouplist = new SelectList(PopulateAcessGroups(), "AccessRuleGroupCode", "AccessRuleGroup");
            this.accesscategorylist = new SelectList(PopulateAcessCategories(), "AccessRuleCategoryCode", "AccessRuleCategory");
        }

        public IActionResult OnPost() 
        {
            //check validators
            if (ModelState.IsValid == false) 
            {
                return Page();
            }

            //get SEARCH parameters as test
            var ww = paramsearch.BeginDate;
            var www = paramsearch.AccessRuleGroupCode;
            var ww1w = paramsearch.AccessRuleCategoryCode;
            var ww2w = paramsearch.SortOrder;


            return RedirectToPage("/Index");
        }

        //hard coded dropdown data, will be replaced by database stuff
        private static List<AccessRuleGroupModel> PopulateAcessGroups()
        {
            List<AccessRuleGroupModel> groups = new List<AccessRuleGroupModel>();
            groups.Add(new AccessRuleGroupModel { AccessRuleGroupCode = 1, AccessRuleGroup = "Group 1" });
            groups.Add(new AccessRuleGroupModel { AccessRuleGroupCode = 2, AccessRuleGroup = "Group 2" });
            groups.Add(new AccessRuleGroupModel { AccessRuleGroupCode = 3, AccessRuleGroup = "Group 3" });
            return groups;
        }

And a couple of the class definitions:

        public class AccessRuleGroupModel
    {
        [Key]
        public int AccessRuleGroupCode { get; set; }
        public string AccessRuleGroup { get; set; }
    }
    public class SearchParametersModel
    {
        public DateTime BeginDate { get; set; }
        public DateTime EndDate { get; set; }
        public string AccessRuleCategoryCode { get; set; }
        public string AccessRuleGroupCode { get; set; }
        public string SortOrder { get; set; }
    }

Really hoping someone can point out what I'm missing.

Thanks in advance , Jim W

CodePudding user response:

Asp.Net Core binds model data based on the name attribute. Use a tag helper so that the generated name attributes of dropdowns ensures that the data will be bound to paramsearch.

<div >
    <div >
        <label>Access Rule Group</label>
        <div>
            <select asp-for="paramsearch.AccessRuleGroupCode" asp-items="Model.accessgrouplist"  >
                <option value="-1">Select</option>
            </select>
        </div>
    </div>
</div>
<div >
    <div >
        <label>Access Rule Category</label>
        <div>
            <select  asp-for="paramsearch.AccessRuleCategoryCode" asp-items="Model.accesscategorylist" >
                <option value="-1">Select</option>
            </select>
        </div>
    </div>
</div>
  • Related