刷新MVC下拉列表

Question

我希望能够通过一个JsonResult方法刷新MVC下拉列表。

以下是返回结果的公共方法：

    [HttpPost]
    [ValidateAntiForgeryToken]
    [CustomAuthorize]
    public JsonResult GetHtmlApplicationSelectionList()
    {
        try
        {
            List<SelectListItem> applicationList = new List<SelectListItem>();
            SelectListItem defaultApplicationValue = new SelectListItem();

            defaultApplicationValue.Value = "0";
            defaultApplicationValue.Text = "-- Select Application --";
            defaultApplicationValue.Selected = true;

            applicationList.Add(defaultApplicationValue);

            foreach (var app in businessLogic.GetApplications().Select(x => new SelectListItem { Value = x.ID.ToString(), Text = x.Name }))
            {
                applicationList.Add(app);
            }

            return Json(new { result = "success", list = applicationList }, JsonRequestBehavior.AllowGet);
        }
        catch(Exception ex)
        {
            return Json(new { result = "failure", message=ex.Message}, JsonRequestBehavior.AllowGet);
        }
    }

以下是调用POST方法获取更新的应用程序列表的jQuery函数：

function UpdateApplicationList() {
    $.ajax({
        url: 'Global/GetHtmlApplicationSelectionList',
        type: 'POST',
        dataType: 'json',
        success: function (data) {

            $('.applicationSelector').html('');

            $('.applicationSelector').html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.responseText);
        }
    });
}

如何强制使$(.applicationSelector')下拉列表包含新列表，而无需遍历作为JSON返回的列表？是否可以返回列表（applicationList）的html，并只使用$('.applicationSelector').html(data)刷新html？

- codeg

---

循环遍历列表有什么问题吗？您可以从操作中返回HTML，但这样会增加客户端和服务器之间的流量。 - ssimeonov

没有问题循环遍历列表。我认为将其作为HTML返回会更容易使用，而不是每次都进行客户端（jQuery）循环以重新创建列表。 - codeg

那么问题就变成了，哪种性能更好：客户端循环（js或jquery）还是尝试在服务器上呈现一些HTML字符串并将其传递给我的<select>。 - Ju66ernaut

使用JavaScript/jQuery在客户端循环遍历它们非常简单。将JSON数据通过网络传输，让客户端完成前端工作。 - Thomas Stringer

Answer 1

你需要为每个项目添加一个<option>标签。这是从这篇文章中提取的答案，它提供了一个相当简单和直接的例子。

$.each(selectValues, function(key, value) {   
 $('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 
});

其中变量selectValues是您的JSON列表

- Ju66ernaut

---

让客户端完成工作是有道理的。感谢您的回答。 - codeg