Question

我们能够使用Angular执行此操作，但是正在尝试使用C＃和Razor以及可能的jQuery（如果需要）来执行此操作。

我们要做的是，我们使用已填充的数据填充下拉列表。（完成）。在我们的View中，我们放置了一个onChange事件，然后我们想在控制器中触发另一个方法，以便我们可以获得另一个项目列表来填充下一个droplist。

在做一些非常简单的示例时，我们要么在浏览器控制台中获得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.

有什么想法吗？

Answer 1

您的方法正在接受参数ID，但您在ajax请求中将值作为参数传递

   data: { id: strId }

或尝试明确指定控制器名称和操作方法名称

  url: '@Url.Action("Foo", "SomeController")',

Answer 2

@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);
    }

MVC Droplist触发控制器获取数据以填充另一个droplist

2 个答案: