Javascript：如何遍历模型中的对象列表

Posted 2023-02-22

【中文标题】Javascript：如何遍历模型中的对象列表

【英文标题】：Javascript: How to iterate through list of objects in Model

【发布时间】：2013-01-04 04:46:18

【问题描述】：

所以我需要在视图模型中的学生对象列表中获取学生的姓名，然后通过 $.post 将它们发送到服务器，后者我已经弄清楚但我不知道找出如何遍历对象列表。基本上我有这个：

//Student object
public class Student 

    public string FirstName  get; set; 
    public string LastName  get; set; 
    //Like a bunch of other attributes here
 

这是视图中的模型：

//StudentSearchResult ViewModel

public class StudentSearchResult 

    public IEnumerable<Student>  get; set;

起初我只是按原样发送学生列表对象，但这可能不是一个好主意，因为它捆绑了太多属性（当我尝试发送模型时，它给了我这个“循环”错误）我只需要使用已有的 $.post 方法将连接的 FirstName 和 LastName 发送到控制器。我尝试过这样的事情：

var names = []  
var length = "@Model.StudentSearchResult.count()";  
for (int i = 0; i < length; i++) 

     names[] = "@Model.StudentSearchResult[i].Name + @Model.StudentSearchResult[i].LastName"

//$.post function here that calls the controller and send the concatenated names of each student in studentsearchresult.

但是我会得到一个“i”不存在的错误，我如何在 javascript 中遍历我的视图模型中的对象列表，访问属性并将它们连接起来，然后将它们存储在一个数组中字符串，以便我可以将其发送给控制器？我想控制器看起来像这样

[HttpPost]
public ActionResult StudentSearchResult(/*other stuff I send here, */ string[] studentNames)
   //stuff here

  return View();

谢谢！

【问题讨论】：

肯定var length = "@Model.StudentSearchResult.count()"; 会导致var length = "5"; 之类的东西去客户端？因此成为一个字符串？是的，JavaScript 是松散类型的，所以它大部分都可以工作，但是......

这很简单，我不能做的是访问视图模型中对象列表的成员并将它们放在一个数组中

【参考方案1】：

你那里有一些无效的 javascript。

首先修复您的视图模型，以便您拥有编译的 C# 代码（您缺少属性名称）：

public class StudentSearchResult 

    public IEnumerable<Student> Students  get; set;

然后假设您的控制器操作将 JSON 结果发送到客户端（这可确保视图模型正确地进行了 JSON 编码并且发送了 application/json 响应内容类型标头）：

[HttpPost]
public ActionResult StudentSearchResult(/*other stuff I send here, */ string[] studentNames)

    StudentSearchResult model = ... //stuff here to populate your view model
    return Json(model);

您可以使用$.each() 函数轻松地在客户端上进行迭代：

var studentNames = ['name1', 'name2'];
$.post('/Students/StudentSearchResult', studentNames, function(result) 
    var students = result.Students;
    $.each(students, function() 
        alert('FirstName: ' + this.FirstName + ' LastName:' + this.LastName);
    );
);

如果您愿意，甚至可以使用普通的 for 循环：

$.post('/Students/StudentSearchResult', studentNames, function(result) 
    var students = result.Students;
    for (var i = 0; i < students.length; i++) 
        var student = students[i];
        alert('FirstName: ' + student.FirstName + ' LastName:' + student.LastName);
    
);

---

更新：

看来我误以为您正在执行 AJAX 请求。相反，您需要的是在 javascript 中访问模型属性。这是如何做到的：

@model StudentSearchResult
<script type="text/javascript">
    var students = @html.Raw(Json.Encode(Model.Students));
    // students is a javascript array that will look like this:
    // students = ["FirstName":"fn1","LastName":"ln1", "FirstName":"fn2","LastName":"ln2", ...];
    for (var i = 0; i < students.length; i++) 
        var student = students[i];
        alert('FirstName: ' + student.FirstName + ' LastName:' + student.LastName);
    
</script>

【讨论】：

感谢您的回答，但是 post 函数没有返回模型，我知道这是因为我没有发布完整的代码，但我手头没有。

在您的 $.each 示例中，如果您不是从帖子中获取模型，而是从视图模型本身获取模型，您将如何在数组中引入元素，我正在尝试这个：var names =新数组（）； var 候选人 = "@Model.Candidates"; //它不允许我这样做 for (var i = 0; i

我明白了。请参阅我的更新答案，并举例说明如何实现这一目标。

【参考方案2】：

看起来您需要将用户名作为 JSON 输出到客户端？试试这个：

var names = @Model.StudentSearchResult.Select(s => new  s.FirstName, s.LastName ).ToList();

我对 Razor 语法不是很熟悉，但我想你还是可以理解上面的代码的。

【参考方案3】：

您可以使用 jquery 的 $.each 来迭代结果。

$.each(yourModel,function()//do with loop);

和错误。你在声明循环变量时犯了错误

for (var i = 0; i < length; i++) 

【参考方案4】：

for (var i = 0; i < length; i++) 

而不是

for (int i = 0; i < length; i++) 

应该可以。

【讨论】：

由于我使用 razor 访问我的视图模型，我得到了无法找到变量“i”的错误