ajax 中的 HTML block

Question

我有这个 ajax 代码:

$('#ShowMore').click(function () {
    $.ajax({
        url: "/Course/GetCoursesJson",
        dataType: "json",
        type: "GET",
        beforeSend: function () { $('#ShowMore').find('i').show(); },
        success: function (data) {
            **var result = "";**
            $.each(data, function (key, value) {
                **result = "<div class='col-md-4'>" +
                "<div class='panel panel-default medisce-panel'>" +
                    "<div class='progress-container'>" +
                        "<div class='progress'>" +
                            "<div class='progress-bar progress-bar-custom' role='progressbar' aria-valuenow='100' aria-valuemin='0' aria-valuemax='100' style='width:" +value.Complete+"%;'>" +
                                "<span>" + value.Chapter + "</span>" +
                            "</div>" +
                        "</div>" +
                        "<div class='badge pull-right'>" + value.Complete + "%</div>" +
                    "</div>" +
                    "<h2 class='custom-title-color text-bold'>" + value.Title + "</h2>" +
                    "<img src='http://placehold.it/280x200' alt='"+value.Chapter+"' class='img-responsive margin-20-bottom center-block' />" +
                    "<button type='submit' class='btn btn-primary btn-custom'>Continue</button>" +
                "</div>" +
            "</div>";**
                $('#ShowResult').append(result);
            });
        }
    })
    .done(function () {
        $('#ShowMore').find('i').delay(1500).fadeOut(500);
    });
});
***************

我的问题是:我想简化结果中的 html 代码，我可以将 Json 数据对象发送到外部 html 页面或模板，然后在我的 ajax 函数中呈现此 html 吗？？？我使用 asp.net mvc 和 mvvm。

Answer 1

您可以更新操作方法以返回 View 结果而不是 json。有一个局部 View ，并从您的操作方法中，将项目列表传递给局部 View 并循环遍历它们并呈现与您在 ajax 调用成功事件中具有的相同标记。

public ActionResult GetCourses()
{
  List<SomeCourseViewModel> listOfCourse = GetCourseListFromSomeWhere();
  return PartialView("CourseList",listOfCourse);
}

假设您有一个名为 SomeCourseViewModel 的 View 模型，它是一个表示类(class)数据的数据结构。

现在在你的部分 View (CourseList.cshtml) 中，它被强类型化到你的 View 模型的列表中，循环并呈现数据

@model List<SomeCourseViewModel>
@foreach(var item in Model)
{
  <div class='col-md-4'>
     <span>@item.Chapter</span>
     <div>@item.Complete %</div>
  </div>
}

我只是添加了简单的标记。您可以将其替换为您想要的标记。。

现在您的 ajax 调用的 success 事件可以像这样简单明了

$.ajax({
        url: "/Course/GetCourses",      
        type: "GET",      
        success: function (result) {
           $('#ShowResult').html(result);
        }
 });