返回复杂类型以使用AJAX进行查看

时间:2013-12-06 04:17:47

标签: c# javascript jquery ajax asp.net-mvc

我想做什么。

我有一个由EF从存储过程生成的Complext类型。它返回 GetAvailableRooms_Results 的列表。我希望用户选择2个日期,然后返回存储过程返回的可用房间列表(复杂类型)。

我不是百分百确定我是否需要通过使用Ajax.Begin表单,Ajax.Action链接或不可避免的ajax和jquery将一个复杂类型返回给我,我已经尝试过了因为不同的原因,每次都失败了。

我无法找到使用Ajax返回复杂类型的示例。另外,我通常很难使用JavaScript而不是发布问题,但是最后一次屏幕截图是让我在这里提出问题的原因...因为我不认为它与JavaScript有关。

我的代码

存储过程 - 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 

复杂类型(存储过程结果)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; }
}

从Reservation / Index.cshtml

调用存储的Proc GetAvailableRooms
 @Html.ActionLink("Available Rooms", "Index",
            controllerName: "GetAvailableRooms_Result",
            routeValues: new { arrive = item.StartDate, depart = item.EndDate },
            htmlAttributes: item.StartDate)

我尝试了什么

我尝试使用 Ajax.ActionLink 将结果复杂类型的部分视图返回到我调用它的页面。像这样......

    @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>
}

我也尝试过使用

我为复杂类型创建了一个控制器,并使用 Ajax.Beginform 返回存储的复杂类型的局部视图。

使用Skimos.Models     @model列表     @ {         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>

推动我超越边缘的错误

enter image description here

最后一次尝试

下面是一个ActionResult,我尝试在局部视图中返回复杂类型。

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

返回此错误:参数字典包含方法'System.Web.Mvc.ActionResult AvailableRooms(System。)的非可空类型'System.DateTime'的参数'arrival'的空条目。 'Skimos.Controllers.ReservationController'中的DateTime,System.DateTime)'。可选参数必须是引用类型,可空类型,或者声明为可选参数。

1 个答案:

答案 0 :(得分:1)

您似乎将日期格式化为存储过程中的字符串。 EF正在尝试将此字符串值设置为Date?字段(Nullable<System.Date>),并且该字段不接受字符串。

导致问题的存储过程:

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  --...

将GetAvailableRoomsResult对象更改为以下内容:

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; }
}