2016-06-08 74 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")',