通过js模板字符串循环遍历json数据ajax通过forEach循环遍历json数据并通过js模板字符串获取数据,后台使⽤ef mvc 三层
html代码:
<div class="text-center">
<form id="form1" method="post" action="/Movies/GetAllByArea">
<h2>电影排⾏榜</h2>
<select id="Area" name="Area" onchange="GetMovieByArea()" class="form-control">
<option value="" selected>所有</option>
时间循环的电影有哪些
@foreach (var item in arealist)
{
<option value="@item.Area">@item.Area</option>
}
</select>
</form>
</div>
<table class="table">
<tr>
<td>电影排名</td>
<td>电影名称</td>
<td>上映时间</td>
<td>电影画报</td>
<td>所属国家</td>
<td>电影评分</td>
<td>操作</td>
</tr>
<tbody id="tb">
@foreach (var item in Model)
{
<tr>
<td>@item.MoviesID</td>
<td>@item.MovieName</td>
<td>
<img src="~/Images/@item.Image" />
</td>
<td>@item.ReleaseTime</td>
<td>@item.Area</td>
<td>@item.Rating</td>
<td>
<a href="/Movies/Delete?MovieId=@item.MoviesID" onclick="return confirm('你确定要删除这条数据吗?')">删除</a>
</td>
</tr>
}
</tbody>
</table>
后台json数据处理:
public JsonResult GetAllByArea(string area)
{
List<RankingList> rankingLists = rankingListBLL.GetRankingLists(area);
return Json(new { data= rankingLists });
}
ajax处理根据条件查询:
<script>
function GetMovieByArea() {
$.ajax({
type: "post",
url: "/Movies/GetAllByArea",
data: {
Area: $("#Area").find("option:selected").val()
},
success: function (msg) {
console.log(msg);
var arr = msg.data;
let htmldata = "";
arr.forEach(function (item) {
item.AddTime = new Date(parseInt('/Date(1593671071513)/'.substr(6, 13))).toLocaleString();//时间转换2020/7/2 下午2:24:31
htmldata+=`
<tr>
<td> ${item.MoviesID} </td>
<td> ${item.MovieName} </td>
<td> ${item.ReleaseTime}</td>
<td> <img src="/Images/${item.Image}" /> </td>
<td> ${item.Area} </td>
<td> ${item.Rating} </td>
<td> <a href="/Movies/Delete?MovieId=${item.MoviesID}">删除</a> </td>
</tr>
`
})
$("#tb").html(htmldata);
}
})
}
</script>
后台封装Dto层:
public  List<LogisticsDto> GetAllLogistics(string code,string states)
{
_db.Configuration.ProxyCreationEnabled = false;
return _db.Logistics
.Where(m=>string.IsNullOrEmpty(states)&string.IsNullOrEmpty(code) || m.State.Contains(states)&m.Code.Contains(code))                .Select(m=>new LogisticsDto()
{
Id=m.Id,
Code=m.Code,
State=m.States.StateName,
Desc=m.Desc,
AddTime= (DateTime)m.AddTime
}) .ToList();
}