ajax - 使用ajax更新foreach循环中的模型数据

Question

我需要在不刷新页面的情况下在我的 View 中更新此模型，因此我认为 ajax 是最好的选择，但我不确定如何做到这一点。

因此，我创建了一个 ajax 调用来为我提供对象数组中的所有信息，但我不知道如何在我的 View 中使用它。

模型

public class User
{
    public Id { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
}

public class Course
{
    public Id { get; set; }
    public string Name { get; set; }
    public string User { get; set; }
}

Controller

public JsonResult userCourseInfo()
{
    if (Session["Username"] != null)
    {
        string user = Session["Username"].ToString();

        var UserInfo = from u in db.Users
                           where u.Username == user
                           select u;

        var UserCourse = from c in db.Courses
                              where c.User == user
                              select c;

        var model = new UserCourseModel { user = UserInfo, course = UserCourse };

        return Json(model, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return null;
    }
}

查看

<ul>
    @foreach (var item in Model.course)
    {
        <li>
            <div class="row">
                <div class="col-md-5">
                    <div class="map-panel-box-general">
                        <p>@Html.DisplayFor(modelItem => item.Id)</p>
                        <p>@Html.DisplayFor(modelItem => item.Name)</p>
                        <p>@Html.DisplayFor(modelItem => item.User)</p>
                    </div>
                </div>
            </div>
        </li>
    }
</ul>

Javascript

function updatePanel()
{
    $.ajax(
    {
        url: "@Url.Action("userCourseInfo", "Users")",
        type: "GET",
        dataType: "json",
        success: function(data)
        {
            panelInfo = [];

            $.each (data.course, function(index, courses)
            {
                panelInfo.push({ courseId: course.Id, courseName: course.Name, courseUsers: course.User })
            })

        },
        error: function()
        {
            console.log('failed');
        }
    })
}

Answer 1

我不太确定你想做什么。但是，如果您想使用来自 ajax 调用的响应来更新 foreach 循环内的标记，您可以简单地读取 json 属性并构建 HTML 并用它替换现有的 html。

首先，您需要为 UL 元素提供一个 id，以便我们稍后可以使用 jQuery 选择它

<ul id="myCourses">

</ul>

您的操作方法返回 UserCourseModel 类对象的 Json 表示形式，该对象有 2 个属性，用户和类(class)，两者都是集合类型(数组)。我不确定您是否真的想要用户属性，因为您计划仅替换类(class)列表(您的 foreach 循环)

假设您的 ajax 调用的响应如下所示 JSON

{
    "user": [{
        "Id": 23,
        "Username": "Scott",
        "Password": null
    }],

    "course": [{
        "Id": 2,
        "Name": "CS",
        "User": {
            "Id": 23,
            "Username": "Scott",
            "Password": null
        }
    }]
}

你可以像这样访问它

success: function(data)
{
  if(data!=null)
  {       
    var newHtml = "";
    $.each(data.course, function (index, course) {
      newHtml += '<li><div class="row"><div class="col-md-5">
                                     <div class="map-panel-box-general">';
      newHtml += '<p>' + course.Id + '</p>';
      newHtml += '<p>' + course.Name + '</p>';
      if (course.User != null) {
        newHtml += '<p>User Id ' + course.User.Id + '</p>';
        newHtml += '<p>User name ' + course.User.Username + '</p>';
      }
      newHtml += '</li>';       
    });
   $("#myCourses").html(newHtml);
  }

}

我一直在使用这种方法从ajax方法调用动态更新UI直到我遇到了像Angualar JS/Knockout js这样的Javascript MVC框架，它可以从模型数据更新UI。你应该研究一下那些。