ASP.Net MVC Razor - Javascript function routing issue

ASP.Net MVC Razor - Javascript function routing issue

I'm experiencing some issues with a cascade dropdownlist (ASP.Net MVC
Razor), i know there are many questions answered on this topic but mine is
quite different and i couldn't find an answer after hours of search.
I have my PessoaController (PersonController) which is inside an area
named requerente.
I have two dropdownlists one for the provinces (Província) and other for
the suburbs (Município).
Belown is the code i have on my view:
<div class="editor-label">
@Html.LabelFor(model => model.ProvinciaId, "Província")
</div>
<div class="editor-field">
@Html.DropDownListFor(Model => Model.ProvinciaId, new
SelectList(ViewBag.ProvinciaId as
System.Collections.IEnumerable, "id", "Valor"),
"Seleccione", new { id = "ddlProvincia" })
@Html.ValidationMessageFor(model => model.ProvinciaId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.MunicipioId, "Município")
</div>
<div class="editor-field">
@Html.DropDownListFor(Model => Model.MunicipioId, new
SelectList(ViewBag.MunicipioId as System.Collections.IEnumerable,
"Id", "Valor"),
"Seleccione", new { id = "ddlMunicipio" })
@Html.ValidationMessageFor(model => model.MunicipioId)
</div>
and this is the javascript code that calls the function on my controller
<script type="text/javascript">
$(document).ready(function () {
$("#ddlProvincia").change(function () {
var selectedProvinceId = $(this).val();
$.getJSON("../pessoa/LoadMunicipiosByProvinceId", {
provinciaId: selectedProvinceId },
function (municipioData) {
var select = $("#ddlMunicipio");
select.empty();
select.append($('<option/>', {
value: 0,
text: "Escolha o Municipio"
}));
$.each(municipioData, function (index, itemData) {
select.append($('<option/>', {
value: itemData.Value,
text: itemData.Text
}));
});
});
});
});
</script>.
This code works perfectly (on the create view), when i want to add a new
person i select the province and it loads the suburbs according to the
selected province, so far so good.
To avoid having to duplicate the javascript function by copying the code
to the edit view, i decided to move my javascript function to a partial
view and include it in both the create and edit view.
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Html.Partial("LoadMunicipiosScript");
}
The code still runs perfectly on the create view, but on the edit view,
whenever i select a different province i get a 404 error because the
function cannot be found.
From firebug i can see what the problem is, my create view uses the right
path to invoke the function in the controller.
localhost:57934/requerente/pessoa/LoadMunicipiosByProvinceId?provinciaId=200003
How ever on my edit view somehow the name of my controller is added twice
to the path, and thus results in a 404.
localhost:57934/requerente/pessoa/pessoa/LoadMunicipiosByProvinceId?provinciaId=200003
I know that duplicating the code and tweaking the url would get me up and
running but does anyone has any idea why the inconsistent behavior, having
into count that both views (create and edit) are on the same folder and
are executing the same shared function.