ASP.Net MVC Razor-Javascript函數路由問題

Question

我在使用層疊下拉列表（ASP.Net MVC Razor）時遇到了一些問題，我知道有關此主題的答案很多，但是我的答案完全不同，經過數小時的搜索，我找不到答案。

我有一個名為Requerente的區域內的PessoaController（PersonController）。

我有兩個下拉列表，一個是省（Província），另一個是郊區（Município）。

下面是我認為的代碼：

    <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>

這是在我的控制器上調用該函數的javascript代碼

    <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>.

這段代碼可以完美地工作（在創建視圖上），當我想添加一個新人時，我選擇了省份，並根據所選省份加載了郊區，到目前為止效果很好。

為了避免通過將代碼復制到編輯視圖中來重復javascript函數，我決定將javascript函數移至局部視圖，並將其包括在創建視圖和編輯視圖中。

     @section Scripts {
             @Scripts.Render("~/bundles/jqueryval")

             @Html.Partial("LoadMunicipiosScript");
    }

該代碼仍然可以在創建視圖上完美運行，但是在編輯視圖上，每當我選擇其他省份時，都會出現404錯誤，因為找不到該函數。

從firebug中，我可以看到問題所在，我的create視圖使用正確的路徑來調用控制器中的函數。 本地主機：57934 / requerente / pessoa / LoadMunicipiosByProvinceId？provinciaId = 200003

如何在我的編輯視圖上以某種方式將我的控制器的名稱添加到路徑兩次，從而導致404。localhost：57934 / requerente / pessoa / pessoa / LoadMunicipiosByProvinceId？provinciaId = 200003

我知道復制代碼並調整url可以使我啟動並運行，但是沒有人知道為什么不一致的行為，因為這兩個視圖（創建和編輯）都在同一文件夾中並且正在執行相同的共享功能。

Answer 1

該問題似乎是您從兩個不同的頁面加載了相同的相對URL ../pessoa/LoadMunicipiosByProvinceId ，最終導致每個頁面指向一個不同的位置。 例如，如果您的兩個URL是（請注意不同的基本文件夾），則會發生這種情況：

• 本地主機：57394 / requerente / foo
• 本地主機：57394 / requerente / pessao / bar

相反，您可以使用Url.Action動態生成目標URL。 我不知道您的路由方案，但是例如：

$.getJSON("@Url.Action("LoadMunicipiosByProvinceId", "pessoa")", 
    { provinciaId: selectedProvinceId },
    function(data) {/*...*/});