Question

当我在DateTimePicker中选择Date时，它正在调用public ActionResult Index(DateTime? test)。它会将一些项目返回到视图中，但这些项目不会出现在Index上。这似乎不起作用，我不确定为什么：

<h1>Items</h1>
@foreach (var item in Model)
{
<br />@item.Date
}

控制器：

public class HomeController : Controller
{
    //
    // GET: /Home/
    public ActionResult Index()
    {
        List<Table> temp = new List<Table>();
        return View(temp);
    }

    [HttpPost]
    public ActionResult Index(DateTime? test)
    {
        masterEntities m = new masterEntities();
        List<Table> temp = m.Table.Where(key => key.Date == test).Select(key => key).ToList();
        return View(temp);
    }
}

Index.cshtml：

@model IEnumerable<DatePicker.Models.Table>

@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-datetimepicker.min.js"></script>

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<div class="container">
<div class="row">
    <div class='col-sm-6'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $('#datetimepicker1').datetimepicker({ useCurrent: false });
        $('#datetimepicker1').on("dp.hide", function (e) {
            //var temp = $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm')
            $.ajax({
                url: "/Home/Index",
                type: "POST",
                data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
                //data: {test: temp },
            });
        });
    </script>
</div>
</div>
<h1>Items</h1>
@foreach (var item in Model)
{
<br />@item.Date
}

Answer 1

首先，您向视图发送一个空列表：

List<Table> temp = new List<Table>();
return View(temp);

所以循环没有显示任何东西，因为，没有什么可以显示。这是一个空列表。

然后你发出一个AJAX请求来获取项目：

$.ajax({
    url: "/Home/Index",
    type: "POST",
    data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
    //data: {test: temp },
});

但你不能对这些项目做任何事情。你基本上忽略了AJAX请求的响应。

所以......数据没有显示，因为您还没有编写任何代码来显示数据。 AJAX请求应具有某种回调函数，以便对返回的响应执行某些操作：

$.ajax({
    url: "/Home/Index",
    type: "POST",
    data: { test: $('#datetimepicker1').data('DateTimePicker').date().format('YYYY-MM-DD HH:mm') },
    //data: {test: temp },
    success: function (data) {
        // do something with the response here
    }
});

你做什么的回复取决于你。是JSON吗？ HTML？基于服务器端代码，它看起来像是HTML。所以你可以把它放到页面上的一个元素中。这样的事情，也许是：

$('#someElement').html(data);

这只是一个例子，当然需要一些你可以识别的元素来保存响应。你可以通过回复做很多其他事情。

但有一点需要注意的是，您的回复似乎是整个页面。它包含script标记，CSS的link标记以及客户端上已有的各种标记。因此，将整个页面放入元素中是不行的。

您可能只想为此AJAX响应返回部分视图。或者，否则，根本不使用AJAX导航到动作以获取整个页面。

ASP.NET foreach不显示项目

1 个答案: