Return Complex type to view with AJAX

Question

What I am trying to do.

I have a complext type generated by EF from a stored procedure.It returns a list of GetAvailableRooms_Results. I would like a user to select 2 dates and then return a list of available rooms (complex type) returned by the stored procedure.

I am not 100% sure if I need to return a complex type to a I am open to ding this by using Ajax.Begin Form, Ajax.Action Link, or impalpably ajax and jquery.... I have tried them all and failed each time for a different reason.

I am unable to find an example that returns a complex type using Ajax. In addition, I usually struggle though using JavaScript rather than posting questions however, the very last screen capture is what brought me to ask the question here...because I don't think its related to JavaScript.

My Code

Stored Procedure - GetAvailableRooms

declare @arrive as datetime, @depart as datetime
set @arrive = '2013/11/29'
set @depart = '2013/12/01'

SELECT  Room.Name, Format(Reservation.StartDate,'D') AS 'Date', 
        (Room.Capacity) - (Count(Reservation.StartDate)) AS Available, 
        Count(RoomReservation.RoomId) AS 'Reservations', Room.Gender 
FROM    Room
        FULL JOIN RoomReservation 
        ON RoomReservation.RoomId = Room.RoomId 
        FULL JOIN Reservation 
        ON Reservation.ReservationId = RoomReservation.ReservationId
        WHERE StartDate BETWEEN @arrive AND @depart
GROUP BY Room.Capacity, Room.Gender, Room.Name, Reservation.StartDate, 
         Reservation.EndDate 

Complex Type (Stored Procedure Results) GetAvailableRooms_Result

public partial class GetAvailableRooms_Result
{
    public string Name { get; set; }
    public Nullable<int> Available { get; set; }
    public Nullable<int> Reservations { get; set; }
    public Nullable<System.DateTime> Date { get; set; }
    public Nullable<bool> Gender { get; set; }
}

Call Stored Proc GetAvailableRooms from Reservation/Index.cshtml

 @Html.ActionLink("Available Rooms", "Index",
            controllerName: "GetAvailableRooms_Result",
            routeValues: new { arrive = item.StartDate, depart = item.EndDate },
            htmlAttributes: item.StartDate)

What I have tried

I have tried to use an Ajax.ActionLink return the results in a partial view of the complex type to the page I am calling it from. Like this...

    @using Skimos.Models
@model List<ReservationIndexViewModel>

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table table-striped">
    <tr>
        <th>
            Room Name
        </th>
        <th>
            Arrival Date
        </th>
        <th>
            Depart Date
        </th>
        <th>
            Member Id
        </th>
        <th>
            Price
        </th>
        <th>
            Rooms
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
        <td>
            @Skimos.Services.HtmlHelpers.RoomName(item.RoomId)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.StartDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EndDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Price)
        </td>
            <td>
                @Html.ActionLink("Meals", "AvailableMeals",
            new { arrive = item.StartDate, depart = item.EndDate })
            </td>
            <td>
                @Html.ActionLink("Available Rooms", "Index",
                "GetAvailableRooms_Result",
            new { arrive = item.StartDate.Date, depart = item.EndDate.Date }, 
                 item.StartDate.Date)//<-- this was just required for the 
                                                 overload I also tried it as null.

            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { id=item.ReservationId }) |
                @Html.ActionLink("Details", "Details", new { id=item.ReservationId }) |
                @Html.ActionLink("Delete", "Delete", new { id=item.ReservationId })
            </td>
        </tr>
    }
</table>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/Bootstrap-datepicker")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
    <script type="text/javascript">
        $('.datepicker ').datepicker({
            weekStart: 1,
            autoclose: true,
            todayHighlight: true,
        });
        </script>
}

I have also tried to use

I created a controller for the complex type and used Ajax.Beginform to return a stored a partial view of the complex type.

using Skimos.Models @model List @{ ViewBag.Title = "StartReservation"; }

<h2>StartReservation</h2>


@using (Ajax.BeginForm("AvailableRooms", new AjaxOptions 
{ HttpMethod = "Get", UpdateTargetId = "rooms", 
OnFailure = "searchFailed", OnSuccess = "data" }))

{
    <input class="datepicker" id="StartDate" 
name="StartDate" tabindex="1" type="text" value="">

<input class="datepicker" id="EndDate" 
name="EndDate" tabindex="1" type="text" value="">

   <input type="submit" class="btn-warning" />
    <div id="rooms">
    </div>
      }


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/Bootstrap-datepicker")
    @Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
  }
<script type="text/javascript">

    $('.datepicker').datepicker({
        weekStart: 1,
        autoclose: true,
        todayHighlight: true,
    });

function searchFailed() { $("#availableRooms").html("Search failed."); }
</script>

The Error that pushed me over the edge

One Last Try

Below is an ActionResult that I where I tried to return the complex type in a partial view.

 public ActionResult AvailableRooms(DateTime arrive, DateTime depart)
        {
            var rooms = db.GetAvailableRooms(arrive, depart);
            return PartialView("AvailabeRooms", rooms.ToList());
        }

Returns this error: The parameters dictionary contains a null entry for parameter 'arrive' of non-nullable type 'System.DateTime' for method 'System.Web.Mvc.ActionResult AvailableRooms(System.DateTime, System.DateTime)' in 'Skimos.Controllers.ReservationController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.

Answer 1

It looks like you are formatting a date as a string in your stored procedure. EF is trying to set this string value to a Date? field (Nullable<System.Date>), and that field doesn't accept strings.

Stored procedure causing the issue:

SELECT  Room.Name, Format(Reservation.StartDate,'D') AS 'Date', -- <-- this is formatting as a string, not a datetime.
    (Room.Capacity) - (Count(Reservation.StartDate)) AS Available, 
    Count(RoomReservation.RoomId) AS 'Reservations', Room.Gender  --...

Change your GetAvailableRoomsResult object to something like below:

public partial class GetAvailableRooms_Result
{
    public string Name { get; set; }
    public Nullable<int> Available { get; set; }
    public Nullable<int> Reservations { get; set; }
    public String Date { get; set; } // <-- change is here.
    public Nullable<bool> Gender { get; set; }
}