Problems with updating modal after transfer to area - modalviewcontroller

Question

I use modal to include new terms in dropdownlist.
<div class="form-group">
#Html.LabelFor(model => model.NatureKindID, "Kind of nature", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div id="divDropNatureKinds">
#Html.Action("ReloadDropDownListNatureKinds", "Modals")
</div>
#Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", null, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { #class = "glyphicon glyphicon-plus" })
#Html.ValidationMessageFor(model => model.NatureKindID, "", new { #class = "text-danger" })
</div>
And Also in the main form has a div where modal is building:
<div class="modal fade" id="modaldrop" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div id="modaldropbody" class="modal-body">
</div>
</div>
</div>
And also an script:
#section scripts {
<script>
function openModal() {
$("#modaldrop").modal()
}
</script>
}
When user hit the Action Link the "CreateModalNatureKinds" modal is open. It is a simple form and works well.
New nature types are saved in the database and everything is fine at this point.
So from this form I'll just show the script triggered by the close button that closes the modal and triggers reloading of the dropdownlist div from the main screen
<script>
$("#btnClose").click(function () {
$("#divDropNatureKinds").load("/Modals/ReloadDropDownListNatureKinds");
$("#modal").close;
});
</script>
ReloadDropDownListNatureKinds have only:
#{
Layout = null;
}
#Html.DropDownList("NatureKindID", null, "Select one", htmlAttributes: new { #class = "form-control" })
And Controller ActionResult is:
public ActionResult ReloadDropDownListNatureKinds(int? idNatureKind)
{
if (idNatureKind == null)
ViewBag.NatureKindID = ListToDropDown();
else
{
ViewBag.NatureKindID = ListaToDropDown(idNatureKind);
}
return PartialView();
}
public SelectList ListToDropDown()
{
return ListToDropDown(null);
}
public SelectList ListaToDropDown(int? idNatureKind)
{
var list = db.NatureKinds
.Select(u => new
{
Text = u.NatureName,
Value = u.ID
}).ToList();
SelectList ret = new SelectList(list.OrderBy(x => x.Text), "Value", "Text", idNatureKind);
return ret;
}
And the structure was:
To be clear. ALL THIS WORKS PERFECTLY.
But, my project was getting very big. A mix of over 50 controllers and more than 250 views. So I decided to look for some way to organize and I found a post about Areas.
I created 5 areas and moved models, controllers and views for each of them.
And now the structure is:
I put in the main View the references of the area where the modal is:
<div class="form-group">
#Html.LabelFor(model => model.NatureKindID, "Kind of nature", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div id="divDropNatureKinds">
#Html.Action("ReloadDropDownListNatureKinds", "Modals", new { area = "Admin" })
</div>
#Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", new { area = "Admin" }, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { #class = "glyphicon glyphicon-plus" })
#Html.ValidationMessageFor(model => model.NatureKindID, "", new { #class = "text-danger" })
</div>
</div>
With this new structure, most features are working well. When I click ActionLink, the modal opens. In the modal, when registering a new type of nature, it is registered in the database.
When I click the modal close button, the ActionResult ReloadDropDownListNatureKinds is executed and the new list is loaded with the new Nature type that was created.
All of this has been tested.
But the list in the main View is not updated, it does not receive the new list.
It is as if the ViewBag.NatureKindID that receives the new list is not the same as that used in the Main View, it continues with the old list.
Any suggestion? Thanks in advance for any help.