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">×</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 :
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.
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">×</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();
}
}
