可以使用 Ajax 从控制器获取我的数据

Question

我正在用 asp.net mvc4 开发一个项目。实际上，我正在做一个表单，其中有一个包含联系人列表的 Select：

<select id="choix_contact">
    <option>Choisir un contact</option>
        @if (ViewBag.ListeContacts != null)
           {
                foreach (var Contact in ViewBag.ListeContacts)
                     {

                        int index = ViewBag.ListeContacts.IndexOf(Contact);
                        <option value="index">@Contact.Nom</option>
                     }
           }
           else
           {
               <option>Pas de contact</option>  
           }  </select>

当我单击列表中的联系人时，我想获取有关该联系人的数据，这要归功于从控制器返回 Json 数据的函数。我将一个参数传递给该函数，该参数是列表中联系人的索引。我的功能是这样的：

public JsonResult GetContactInfo(int indexContactList)
    {
        int NumDossier = StructureData.DonneNumDossier((string)Session["Utilisateur"], (string)Session["MotDePasse"]);
        List<Contact> ListeContacts = StructureData.DonneListeContact(NumDossier);
        Contact ContactInfos = new Contact(ListeContacts[indexContactList].Nom, ListeContacts[indexContactList].Prenom, ListeContacts[indexContactList].Email, ListeContacts[indexContactList].Fonction, ListeContacts[indexContactList].TelephoneFixe, ListeContacts[indexContactList].TelephonePort);
        return Json(ContactInfos);
    }

所以现在要在 Ajax 中从控制器到视图中获取数据，我使用该代码：

$(document).ready(function() {
    $("#choix_contact").change(function () {
        var selectContact = document.getElementById('choix_contact');
        var index = selectContact.value;
        var url = "/Accueil/GetContactInfo";
        $.getJSON(url, { indexContactList: index }, function (data) {
            $("#nom").html(data.Nom);
            $("#prenom").html(data.Prenom);
            $("#email").html(data.Email);
            $("#fonction").html(data.Fonction);
            $("#telFix").html(data.TelephoneFixe);
            $("#telPort").html(data.TelephonePort);
        });
    });
    });

现在的问题是它根本不起作用，它甚至没有进入 ajax 脚本......也许有人有想法？

Answer 1

从您的 cmets 中，我看到您获得了以下 URL：

localhost:50499/Accueil/GetContactInfo?indexContactList=index

因此，您将值 index 传递给您的操作方法。 index 不是整数，因此服务器会抛出 500。如果您查看错误，您会看到类似于 "cannot parse value index to System.Int32" 的内容

你需要在你的视图中改变它：

int index = ViewBag.ListeContacts.IndexOf(Contact);
<option value="index">@Contact.Nom</option>

到

int index = ViewBag.ListeContacts.IndexOf(Contact);
<option value="@index">@Contact.Nom</option>

注意index 前面的@-符号，这确保您输出的是变量，而不是字符串。

除此之外，从您的评论中，我推断您将数据绑定到的元素是文本框<input type="text" />。如果是这种情况，您还应该使用 val 方法而不是 html 方法：

$.getJSON(url, { indexContactList: index }, function (data) {
            $("#nom").val(data.Nom);
            $("#prenom").val(data.Prenom);
            $("#email").val(data.Email);
            $("#fonction").val(data.Fonction);
            $("#telFix").val(data.TelephoneFixe);
            $("#telPort").val(data.TelephonePort);
        });

Answer 2

您应该在返回默认被阻止的 JSON 时允许 GET 请求：

return Json(ContactInfos, JsonRequestBehavior.AllowGet);

注意 1：如果您使用了 javascript 调试工具，例如 FireBug 或 Chrome 开发工具栏，您会看到您的服务器正在返回 500 状态代码，并且在响应正文中会出现一个异常，告诉您需要将 JsonRequestBehavior 设置为允许获取。异常消息并不总是很有意义，但在这种特殊情况下，您会看到的异常消息甚至包含解决方案。

注意 2：确保您从控制器操作返回的 Contact 类不包含任何循环引用，因为您无法 JSON 序列化此类结构。

注意 3：我建议您使用 Html.DropDownListFor 帮助程序，而不是手动构建您的下拉菜单，如您的问题所示。