Question

我的表单下拉框中有一个Payees列表。我希望根据收款人下拉列表的所选项目填充不同的下拉列表，而不会发布回帖和所有内容。

所以，我在我的控制器中创建了一个完成工作的方法：

        private JsonResult GetCategories(int payeeId)
    {
        List<CategoryDto> cats = Services.CategoryServices.GetCategoriesByPayeeId(payeeId);
        List<SelectListItem> items = new List<SelectListItem>();

        foreach(var cat in cats)
        {
            items.Add(new SelectListItem {Text = cat.Description, Value = cat.CategoryId.ToString()});
        }

        return Json(items);

    }

现在，我不确定要在我的视图中添加什么才能使其正常工作。

目前，我所拥有的只是：

 <% using (Html.BeginForm())
   {%>

   <p>
   <%=Html.DropDownList("SelectedAccountId", Model.Accounts, "Select One..", null) %>
   </p>
   <p>
   <%=Html.DropDownList("SelectedPayeeId", Model.Payees, "Select One...", null) %>
   </p>

                         <input type="submit" value="Save" />
<%
    }%>

它们填充正常...所以当用户选择SelectedPayeeId下拉列表时，它应该根据SelectedPayeeId填充一个新的（尚未创建？）下拉列表，该下拉列表包含类别。

所以，我认为我需要创建一个JQuery函数（从未完成JQuery ..因此甚至不确定它在哪里），它监视onchange事件的Payee下拉列表？然后调用我在上面创建的方法。这听起来是对的，如果是的话，你可以指导我如何实现这个目标吗？

Answer 1

到目前为止你的推理完全合理。首先，您将要在View / Master中包含jquery库。您可以从http://jquery.com/下载jquery的副本。将文件添加到您的项目中，并在文档的<script src="/path/to/jquery.js">中加入<head>。您将要在View中添加另一个下拉列表（可能还有另一个属性到您的模型）。我们称之为'SelectedCategoryId：'

<%=Html.DropDownList("SelectedCategoryId", null, "Select One...", new { style = "display:none;"}) %>

我们已将此Drop Down的样式设置为最初不可见，因为它内部没有任何内容可供选择。我们稍后会在为它生成一些内容后显示它。现在，在您的页面上的某个位置，您将需要包含一个<script>块，它看起来像这样：

$(document).ready(function() { $('#SelectedPayeeId').change(function() { 
$.ajax({
  type: 'POST',
  url: urlToYourControllerAction,
  data: { payeeId: $(this).val() },
  success: function(data) { 
     var markup = '';
     for (var x = 0; x < data.length; x++ ) {
        markup += '<option value="' + data[x].Value + '">'+data[x].Text+'</option>';
     }
     $('#SelectedCategoryId').html(markup).show();
  }
}); }); });

此代码将上面编写的匿名函数绑定到ID为“SelectedPayeeId”的DOM元素（在本例中为您的下拉列表）。该函数对您方法的url执行AJAX调用。当它收到请求的结果（你返回的JSON）时，我们遍历数组并构建一个我们想要注入到我们文档中的html字符串。最后，我们将html插入'SelectedCategoryId'元素，并更改元素的样式，以便用户可以看到它。

请注意，我没有运行此代码，但它应该（几乎）是您需要的。 jQuery的文档可以在http://docs.jquery.com/Main_Page获得，我在上面引用的函数在这里引用：

Answer 2

您需要将GetCategories设置为公共方法，因为它与控制器中的操作处理程序相对应。

您的jquery代码可能如下所示：

<script type="text/javascript">
    $(function() {
 $('#SelectedPayeeId').change(function() {
          $.get('<%= Url.Action("GetCategories", "YourControllerName") %>',
                    {payeeId: $(this).val()}, 
                    function(data) {
                       populateSelectWith($("#Category"), data);

           });
        });
   //Place populateSelectWith method here
});
</script>
The populateSelectWith can fill your dropdown with data like:

  function  populateSelectWith($select, data) {
    $select.html('');
    $select.append($('<option></option>').val('').html("MYDEFAULT VALUE"));
    for (var index = 0; index < data.length; index++) {
        var option = data[index];
        $select.append($('<option></option>').html(option));
      }
    }

我没有测试过这段代码，但我希望它运行正常。

你可以找到jquery ajax get here的语法由于您没有将任何数据发布到服务器，因此您可以使用[HttpGet]属性来装饰控制器操作

Asp.net MVC用JQuery填充一个列表框？

2 个答案: