2016-06-08 39 views
0

我們能夠與角做到這一點,但嘗試使用C#與MVC做到這一點,剃刀和可能的jQuery如果需要的話。MVC Droplist觸發控制器獲取數據填充到另一個droplist

我們正在試圖做的是,我們填充已填充數據的下拉列表。 (完成)。在我們的View中,我們放置了一個onChange事件,然後我們想在控制器中觸發另一個方法,這樣我們可以得到另一個項目列表來填充下一個下拉列表。

做一些非常簡單的例子,我們不斷要麼讓我們的瀏覽器控制檯404或500的回報,而不是打在Visual Studio中的任何斷點。

這是我到目前爲止有:

查看

  <div> @Html.DropDownListFor(model => model.Name, Model.AvailableGalaxyEventTypes, new { @id = "eventTypeName", onchange = "GetEventNames();" }) 
     </div> 


    <script> 

     function GetEventNames() { 
      var url = '@Url.Action("GetData")'; 
      var strId = 0; 
      $.ajax({ 
       url: url, 
       type: 'GET', 
       cache: false, 
       data: { value: strId }, 

       success: function (result) { 
        alert(result); 
        console.log(result); 
        $('#result').html(result); 
       } 
      }); 
     } 
     </script> 

控制器

public ActionResult GetData(string id) 
    { 
     return Json(new { foo = "bar", ball = "dragon" }); 
    } 

我不明白爲什麼我們沒有得到一個成功或任何東西做這個很簡單的例子。我應該得到Foo和Ball。如果我們能夠採用控制器方法,我們應該能夠取得進展,但現在我得到了404或500。

任何想法?

+0

你檢查產生的,以確保它是你想要的網址是什麼?另外,您可以手動調用URL來查看發生了什麼。 – CAbbott

+0

由於需要返回Json(new {foo =「bar」,ball =「dragon」},JsonRequestBehavior.AllowGet);'',所以拋出了一個錯誤。但是,無論如何,代碼中沒有其他東西是有意義的請參閱[這個DotNetFiddle](https://dotnetfiddle.net/1bPZym)瞭解如何實現級聯下拉列表 –

回答

0
@Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries) 
@Html.DropDownListFor(model => model.RegionId, Model.AvailableRegions) 

$("#@Html.FieldIdFor(model => model.CountryId)").change(function() { 
      var selectedItem = $(this).val(); 
      var ddlRegions = $("#@Html.FieldIdFor(model => model.RegionId)"); 
      $.ajax({ 
       cache: false, 
       type: "GET", 
       url: "@(Url.RouteUrl("GetRegionsByCountryId"))", 
       data: { "countryId": selectedItem, "addSelectStateItem": "true" }, 
      success: function (data) { 
       ddlRegions.html(''); 
       $.each(data, function (id, option) { 
        ddlRegions.append($('<option></option>').val(option.id).html(option.name)); 
       }); 

      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       alert('Failed to retrieve regions.'); 

      } 
     }); 

嘗試並且獲取DDL的Id的擴展方法(或者您可以使用JQuery或Vanilla JS完成):

public static string FieldIdFor<T, TResult>(this HtmlHelper<T> html, Expression<Func<T, TResult>> expression) 
    { 
     var id = html.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression)); 
     // because "[" and "]" aren't replaced with "_" in GetFullHtmlFieldId 
     return id.Replace('[', '_').Replace(']', '_'); 
    } 

並在控制器方法:

public ActionResult GetRegionsByCountryId(string countryId) 
    { 
     var country = _countryService.GetCountryById(Convert.ToInt32(countryId)); 
     var states = _stateProvinceService.GetStateProvinces(country != null ? country.Id : 0).ToList(); 
     var result = (from s in states 
      select new {id = s.Id, name = s.Title}) 
      .ToList(); 

     return Json(result, JsonRequestBehavior.AllowGet); 
    } 
+0

我想我們會看看這樣做的方法。感謝您提供詳細的代碼說明。 – ClosDesign

1

你的方法是接受參數ID,但你逝去的值作爲參數在Ajax請求

data: { id: strId } 

或通過指定控制器名稱,以及動作的方法名稱明確

url: '@Url.Action("Foo", "SomeController")', 
相關問題