【问题标题】:Refresh/ Rebind one dropdownlist asp.net MVC刷新/重新绑定一个下拉列表 asp.net MVC
【发布时间】:2016-04-17 12:57:30
【问题描述】:

我有一个下拉列表,其中包含类别列表和一个用于刷新下拉列表项的链接。

@Html.DropDownList("CategoryNameItemNameBinding", Model.CatgegoryNameItems)

<a href="javascript:void(0)" id="opener" onclick="openDialog('Category',this)">Refresh Category List</a> </span>

该链接会打开一个带有按钮的小弹出窗口,当单击该按钮时,下拉列表绑定到的数据库表会更新。

问题在于,虽然数据库表已更新,但下拉列表在手动刷新页面或我离开并返回页面之前不会显示新项目。

我不想刷新/重新加载整个页面。如何刷新下拉列表以反映新项目。

谢谢

【问题讨论】:

  • 您可以使用 ajax 调用控制器方法来查询数据库返回要填充到下拉列表中的项目,或者更好(因为您已经知道要在视图中添加的新值来自您的弹出窗口),只需使用 javascript 根据弹出窗口中的数据附加一个新选项
  • 您好斯蒂芬,感谢您的回复。我是 Mvc 的新手,所以请您发布一个 ajax 调用示例。我找到了很多例子,但不确定哪一个是正确的方法。

标签: asp.net asp.net-mvc c#-4.0 razor


【解决方案1】:

您的 Ajax 调用将是

$("#linkId").on('click', function (event) {
            var url = "GetList";
            $.ajax({
                data: {},
                type: 'POST',
                cache: false,
                dataType: 'json',
                url: url,
                success: function (result) {
                    $("#dropDownId").empty();
                    $("#dropDownId").append('<option value="">Select One</option>');
                    $.each(result, function (i, item) {
                        $("#AddItemItemId").append('<option value="' + item.Value + '">' +
                            item.Text + '</option>');
                        // here we are adding option for States
                    });
                },
                error: function (ex) {
                    alertify.alert('We face some technical difficulties. Hello World');
                }
            });
            event.preventDefault(event);
        });

后端 C# 代码会喜欢

[HttpPost]
    public JsonResult GetList()
    {

        var itemlist = _itemManager.GetItems();
        var itemList = itemlist.Select(item => new SelectListItem { Text = item.ItemName+" - "+item.PowerName, Value = Convert.ToString(item.Id) }).ToList();
        return Json(new SelectList(itemList, "Value", "Text"));
    }

希望这会对您有所帮助。快乐编码

【讨论】:

  • 感谢您完成了这项工作,非常感谢。
猜你喜欢
  • 2015-11-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多