Using HierarchyId with ASP.NET Core causes error in send post request?

Question

I want to make countries using HierarchyId type so

I created a Country model class with these properties:

namespace DotNetCore5Crud.Models
{
    public class Country
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

        public HierarchyId parentId { get; set; }
    }
}

I then created an Index view which works fine:

@model IEnumerable<Category>

<partial name="_addCategory" model="new Category()" />
@{
    if (!Model.Any())
    {
        <div class="alert alert-warning" role="alert">
            there Is no Categories
        </div>
    }
    else
    {
        <div class="container">
            <table class="table table-sm table-hover table-striped">
                <thead>
                    <tr class="bg-primary text-white font-weight-bold">
                        <th>id</th>
                        <th>Name</th>
                        <th>HierarchyId</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>@item.Id</td>
                            <td>@item.Name</td>
                            <td>@item.hierarchyId</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }
}

Then, I inject a partial view to AddCountry:

@model Category
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-sm mb-2 btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
        <i class="bi bi-plus-circle"></i> Add Category
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <form method="post" asp-action="Create" asp-controller="Categories">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle"><i class="bi bi-plus-circle"></i> Add Category</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="text-muted" asp-for="Name"></label>
                            <input type="text" asp-for="Name" class="form-control" />
                            <span class="text-danger" asp-validation-for="Name"></span>
                        </div>
                        <div class="form-control">
                            <label class="text-muted" asp-for="hierarchyId"></label>
                            <select class="form-control" asp-for="hierarchyId" id="hierarchyId">
                                @foreach (var item in ViewBag.AllCAT)
                                {
                                    <option value="@item.Id">@item.Name</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-sm btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

And finally, when I send data from the view, the name is sent correctly but the HierarchyId column is null like this :

enter image description here

I do not know why that is the case... I have searched a lot and have not yet found an explanation

I'd appreciate it if you can tell my why this is the case.

score 4 · Accepted Answer · answered Nov 22 '21 at 08:24

Model Binding can’t bind HierarchyId type automatically , so the parentId will show ‘null’ in your controller, You can get this property manually by using Request.Form["parentId"].

The <select> passes the value through the 'value' attribute in <option>.In your code,Id is int, It does not match the type of parentId,so I replaced it with parentId.

_addCategory.cshtml

@model Country
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-sm mb-2 btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
        <i class="bi bi-plus-circle"></i> Add Category
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <form method="post" asp-action="Create" asp-controller="Home">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle"><i class="bi bi-plus-circle"></i> Add Category</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label class="text-muted" asp-for="Name"></label>
                            <input type="text" asp-for="Name" class="form-control" />
                            <span class="text-danger" asp-validation-for="Name"></span>
                        </div>
                        <div class="form-control">
                            <label class="text-muted" asp-for="parentId"></label>
                            <select class="form-control" asp-for="parentId" id="hierarchyId">
                                @foreach (var item in ViewBag.Country)
                                {
                                        <!--change here...-->
                                    <option value="@item.parentId">@item.Name</option>
                                }
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-sm btn-primary">Save</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

Controller

public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

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

        [HttpGet]
        public IActionResult Create() {
            //For the convenience of testing, I hard-coded here
            ViewBag.Country = new List<Country>()
            {
                new Country(){ Id=1,Name= " USA ",parentId = HierarchyId.Parse("/1/") },
                new Country(){ Id=2,Name= "Canada",parentId =HierarchyId.Parse("/2/") },
                new Country(){ Id=3,Name= "China",parentId = HierarchyId.Parse("/3/") },
                new Country(){Id=4,Name= "Japan" ,parentId = HierarchyId.Parse("/4/")}
            };
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<object> Create(Country country) 
        {
            //Model Binding can’t bind HierarchyId automatically,
            //so I use ‘Request.Form’ to accept parentId, and convent parentId to string type and use PId to accept it, Then I convert PId to HierarchyId and Assign this value to parentId
            var PId = Request.Form["parentId"].ToString();
            country.parentId =  HierarchyId.Parse(PId);
            //do your stuff....
            return View();
        }
    }

You can see the result here

thank you very much - now it working with you improved code – m-Esmaeil Nov 22 '21 at 19:11 — m-Esmaeil, Nov 22 '21 at 19:11

Using HierarchyId with ASP.NET Core causes error in send post request?

1 Answers1