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

Question

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

10

所以我需要获取视图模型中学生对象列表中的学生姓名，然后通过$.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();
}

谢谢！

- Ricardo

当然，var length = "@Model.StudentSearchResult.count()"; 会导致像 var length = "5"; 这样的东西传递给客户端吗？因此成为一个字符串？是的，JavaScript 是弱类型的，所以它大多数情况下可以工作，但是... - T.J. Crowder

那很容易，我做不到的是访问视图模型中的对象列表成员并将它们放入数组中。 - Ricardo

4个回答

1

你可以使用jQuery的$.each来迭代结果。

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

关于错误，您在循环变量的声明中犯了一个错误。

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

- Ravi Gadag

1

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

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

我不太熟悉Razor语法，但我认为你仍然可以理解上面的代码。

- Jeffrey Zhao

0

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

而不是

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

应该可以工作。

- ndlinh

1

因为我在使用Razor来访问我的视图模型，所以出现了变量“i”找不到的错误。 - Ricardo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Darin Dimitrov · Accepted Answer

您的 JavaScript 代码存在一些错误。

首先，通过修复视图模型，使其具有编译的 C# 代码（您缺少一个属性名称）来解决问题：

public class StudentSearchResult 
{
    public IEnumerable<Student> Students { get; set;}
}

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

然后假设您的控制器操作向客户端发送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>