Question

我需要在没有页面刷新的情况下在我的视图中更新此模型，所以我认为ajax是最好的选择，但我不知道该怎么做。

所以我创建了一个ajax调用来给我一个对象数组中的所有信息，但我不知道如何在我的视图中使用它。

模型

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; }
}

控制器

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>

你的action方法返回UserCourseModel类对象的Json表示，它有2个属性，user和course，都是集合类型（Arrays）。我不确定你真的想要用户属性，因为你打算只替换课程列表（你的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 这样可以从模型数据更新UI的Javascript MVC框架。你应该看一下那些。

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

1 个答案: