将来自 ajax 调用的响应传递给 C# 中的视图

Question

我正在使用 ajax 来调用控制器中的操作。代码是这样的

   $('#kitchen').change(function () {
    var selectedKitchen = $('#kitchen').val();
    if (selectedKitchen != '') {
        console.log("selected item:" + $('#kitchen').val());
        $.ajax({
            type: "GET",
            url: "/Home/GiveInsitutionsWithoutResponsibility",
            data: "id=" + selectedKitchen,
            dataType:'json',
            success: function (result) {
                result = JSON.parse(result);
                console.log(result.length);
            },
            error: function (error) {
                console.log("There was an error posting the data to the server: ");
                console.log(error.responseText);
            }
        });
    }

});

现在我想要的是使用来自服务器的结果来填充客户端的下拉列表。我该怎么做？有没有办法或者我的方法是错误的？

我的结果对象是这样的

{
Id: "04409314-ea61-4367-8eee-2b5faf87e592"
Name: "Test Institution Two"
NextPatientId: 1
OwnerId: "1"
PartitionKey: "1"
RowKey: "04409314-ea61-4367-8eee-2b5faf87e592"
Timestamp: "/Date(1417180677580)/"
}

控制器功能是这样的

    public ActionResult GiveInsitutionsWithoutResponsibility()
    {
        var kitchenId = Request["id"].ToString();
        Kitchen k = Kitchen.Get(kitchenId);
        IEnumerable <Institution> ins = k.GetInstitutions();
        IEnumerable<Institution> allIns = Institution.GetAll();
        List<Institution> result = new List<Institution>();
        bool contain = true;
        int index = 0;
        if (ins.Count() > 0)
        {
            for (int i = 0; i < allIns.Count(); i++, contain = true)
            {
                for (int j = 0; j < ins.Count(); j++)
                {
                    if (allIns.ElementAt(i).Id == ins.ElementAt(j).Id)
                    {
                        contain = true;
                        break;
                    }
                    else
                    {
                        index = j;
                        contain = false;
                    }
                }
                if (!contain)
                {
                    result.Add(allIns.ElementAt(index));
                }
            }
        }
        else
        {
            for (int i = 0; i < allIns.Count(); i++)
            {
                result.Add(allIns.ElementAt(index));
            }
        }
        string response = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(result);
        return Json(response, JsonRequestBehavior.AllowGet);

    }

Answer 1

首先你的动作方法可以简化为

public ActionResult GiveInsitutionsWithoutResponsibility(int ID)
{
  Kitchen k = Kitchen.Get(ID);
  var data = Institution.GetAll().Except(k.GetInstitutions(), new InstitutionComparer()).Select(i => new
  {
    ID = i.ID,
    Name = r.Name
  });
  return Json(data, JsonRequestBehavior.AllowGet);
}

注意Kitchen.ID 是在方法参数中传递的。 Linq 查询用于选择所有Institution，然后排除Institution 中已经存在的任何Kitchen，然后创建匿名对象的集合，这样不必要的数据就不会发送到客户端。 Json() 方法以正确的 JSON 格式返回数据（不需要调用 JavaScriptSerializer().Serialize()）。

为了让.Except() 处理复杂对象，您需要一个比较器

public class InstitutionComparer : IEqualityComparer<Institution>
{
  public bool Equals(Institution x, Institution y)
  {
    if (Object.ReferenceEquals(x, y)) 
    {
      return true;
    }
    if (Object.ReferenceEquals(x, null) || Object.ReferenceEquals(y, null))
    {
        return false;
    }
    return x.ID == y.ID;
  }
  public int GetHashCode(Institution institution)
  {
    if (Object.ReferenceEquals(institution, null))
    {
      return 0; 
    }
    return institution.ID.GetHashCode();
  }
}

接下来将ajax方法改为

$('#kitchen').change(function () {     
  var selectedKitchen = $('#kitchen').val();
  if (!selectedKitchen) {
    return;
  }
  $.ajax({
    type: "GET",
    url: '@Url.Action("GiveInsitutionsWithoutResponsibility", "Home")', // don't hard code urls
    data: { id: selectedKitchen }, // pass selectedKitchen to the id parameter
    dataType:'json',
    success: function (result) {
      var select = $('YourDropDownSelector').empty().append($('<option></option>').val('').text('--Please select--'));
      $.each(result, function(index, item) {
        select.append($('<option></option>').val(item.ID).text(item.Name));
      });
    },
    error: function (error) {
    }
  });
});

或者你可以使用捷径

$.getJSON('@Url.Action("GiveInsitutionsWithoutResponsibility", "Home")', { id: selectedKitchen }, function(result) {
  $.each(result, .... // as above
});

Answer 2

根据您的控制器中的对象，您可以遍历您的结果数据和.append 这个到您的下拉列表。

success: function (result) {

   $.each(result, function(index, manager) {
       $('select#yourId').append(
               '<option value="' + result.Id + '">'
                    + result.Name + 
       '</option>');
   });

}

Answer 3

您的方法很好，您必须格式化要添加到组合框的结果。例如，支持在我有国家和州组合框的页面上。根据选定的国家，我需要填充状态，所以我将编写以下代码：

    $("#billingContactCountry").change(function (e) {
        e.preventDefault();

        var countryId = $("#billingContactCountry").val();

        getStatesByCountry(countryId, "", "#billingContactState", "#billingContactZip");
    });

    function getStatesByCountry(countryId, stateId, stateCombobox, zipTextBox) {

    $.ajax({
        url: "@Url.Action("GetStatesByCountry", "Admin")",
        data: { countryId: countryId },
        dataType: "json",
        type: "GET",
        error: function (xhr, status) {
            //debugger;
            var items = "<option value=\"\">-Select State-</option>";
            $(stateCombobox).html(items);

            var zipMessage = validateZip(countryId, $(zipTextBox).val());
            if (zipMessage != "The ZIP Code field is required.") {
                $(zipTextBox).parent().find("span.field-validation-error").text(zipMessage);
            }

            $("div.overlay").hide();
        },
        success: function (data) {
            //debugger;
            var items = "<option value=\"\">-Select State-</option>";
            $.each(data, function (i, item) {
                items += "<option value=\"" + item.Id + "\">" + item.Name + "</option>";
            });

            $(stateCombobox).html(items);

            if (stateId != "") {
                $('#billingContactState').val(stateId);
            }

            var zipMessage = validateZip(countryId, $(zipTextBox).val());
            if (zipMessage != "The ZIP Code field is required.") {
                $(zipTextBox).parent().find("span.field-validation-error").text(zipMessage);
            }

            $("div.overlay").hide();
        }
    });
}

所以基本上有趣的代码是，

            var items = "<option value=\"\">-Select State-</option>";
            $.each(data, function (i, item) {
                items += "<option value=\"" + item.Id + "\">" + item.Name + "</option>";
            });

            $(stateCombobox).html(items);

我们正在对从服务器返回的每个元素进行操作，以创建组合框的选项项。

顺便说一句，您应该使用@Url.Action，如上例所示。