CODEWITHSUNDEEP
c#asp.net
A191919
A191919

Reputation: 3442

ASP.NET foreach do not show items

When I select Date in DateTimePicker, it's invoking public ActionResult Index(DateTime? test). It returns some items into the view, but those items do not appear on Index. It seems that this does not work, and I'm unsure why:

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

Controller:

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
}

Upvotes: 0

Views: 48

Answers (1)

David
David

Reputation: 218877

First you send an empty list to the view:

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

So the loop doesn't show anything because, well, there's nothing to show. It's an empty list.

Then you make an AJAX request to get items:

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

But you don't do anything with those items. You basically ignore the response from the AJAX request.

So... The data doesn't display because you haven't written any code to display the data. The AJAX request should have some sort of callback function to do something with the returned response:

$.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
    }
});

What you do with the response is up to you. Is it JSON? HTML? Based on the server-side code, it looks like it's HTML. So you can maybe put it into an element on the page. Something like this, perhaps:

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

That's just one example, and would of course require an element of some sort that you can identify to hold the response. You could do a lot of other things with the response.

One thing to note, however, is that your response appears to be an entire page. It includes script tags, link tags for CSS, and all sorts of markup that you otherwise already have on the client. So putting the entire page into an element isn't going to work right.

You might want to return just a partial view for this AJAX response. Or, otherwise, instead of using AJAX at all just navigate to the action to get that entire page.

Upvotes: 2

Related Questions