【问题标题】:how to fill 2nd combobox with asp.net mvc ajax如何用 asp.net mvc ajax 填充第二个组合框
【发布时间】:2014-12-19 11:14:13
【问题描述】:

我在 Visual Studio 2014.1 中使用 aspnet MVC 5 我有一个组合框,其中填充了数据库中的数据:

ViewBag.Brans = new SelectList(db.Brans.OrderBy(m => m.Ad), "No", "Ad");
@Html.DropDownList("Brans", null, htmlAttributes: new { @class = "form-control" })

然后我有另一个组合框。从第一个组合中选择一个选项后,我想填充该组合框。 就像从第一个组合中选择国家一样。然后城市将出现在第二个中。

你们中有人知道怎么做吗?

【问题讨论】:

标签: c# asp.net ajax asp.net-mvc


【解决方案1】:

其中一个选项是让 Ajax 请求操作,这将返回您的列表项

  public virtual JsonResult GetCountryStates()
        {
            return Json(
                new
                {
                    new List<SelectListItem>() {YOUR ITEMS HERE}
                });
        }

然后在你的 Ajax 回调主体中放入这样的代码

function (data) {
                //var selValue;

                data = $.map(data, function (item, a) {
                    if (item.Selected) {
                        selValue = item.Value;
                    }
                    return "<option value=\"" + item.Value + "\" " + (item.Selected ? "selected" : "") + ">" + item.Text + "</option>";
                });
                $('statesSelect').html(data.join(""));
                $('statesSelect').val(selValue);
            },

【讨论】:

    【解决方案2】:

    @fly_ua : 填充依赖下拉列表的好方法 但是,如果我们发布表单并在选定的值上从控制器获取下一个下拉数据并再次重新加载表单怎么办?这可能是安全的方式,而不是进行 AJAX 调用。

    【讨论】:

    • 嗨 Kishan,可能是的,但在我的情况下,您已经在成员部分进行了身份验证,并且 MVC 中的所有操作都包含 [Authoroze] 和角色检查。所以正如我所写 - 这只是可能的方法之一。
    【解决方案3】:
    $('#@Html.Encode(Html.IdFor(x => x.YourProperty))')on("Change", function (event) {
        event.preventDefault();
        var id = $(this).val();
    
        $.ajax({
            url: '@Url.Action("ActionName", "ControllerName")',
            type: "GET",
            data: {
                id: id,
            },
            success: function (result) {
                $('#@Html.Encode(Html.IdFor(x => x.SecondDropDownProperty))').html(result)
            }
        });
    });
    

    使用下拉菜单创建一个视图并使用此视图渲染 razor JSON

    通过这样做,您将创建通用的依赖下拉列表。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-04-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多