重塑模型变化观

时间:2013-03-21 23:20:56

标签: jquery ajax asp.net-mvc kendo-ui

我相信我知道我遇到的问题;我只是不知道如何解决它。我的视图控制器有两个参数。当它第一次加载时,它获得一个参数并加载部分模型。只要从页面上的网格中进行选择,就会再次调用控制器方法,并且模型将加载两个参数并返回到视图。

这一切都很完美,但是当附加数据添加到模型中时,它不会显示在屏幕上。当我在调试中运行它时,我在视图中看到数据,它只是没有显示在屏幕上。

我的猜测是因为我需要重新加载页面,但我不完全确定如何做到这一点。此外,如果有人可以评论并让我知道我用来完成其他数据加载的工作流程是否正确,或者是否有更好的方法。

谢谢!

EventsController

public class EventsController : Controller
{
    //
    // GET: /Events/
    public ActionResult Events(string sName, int? iID)
    {
        ViewBag.AppName = sName;
        EventReader ereader = new EventReader(sName);
        Events _events = new Events();
        _events.LoggedEvents = ereader.GetListOfEvents().ToDataTable();
        //_events.EventDetails.Severity = "TEST";
        if (iID != null)
        {
            _events.EventDetails = ereader.GetEvent((int)iID);
        }

        return View(_events);
    }

    public ActionResult Read([DataSourceRequest] DataSourceRequest request, string sLogName)
    {
        EventReader ereader = new EventReader(sLogName);
        return this.Json(ereader.GetListOfEvents().ToDataTable().ToDataSourceResult(request));
    }
}

Events.cshtml

@model Models.Events

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Events for @ViewBag.AppName</h2>

<!-- HEADER GRID -->
<div id="Events">
    @(Html.Kendo().Grid(Model.LoggedEvents)
          .Name("EventGrid")
          .Events(events => events.Change("eventGridHandler"))
          .Columns(columns =>
                       { 
                           columns.Bound("EntryType");
                           columns.Bound("EventDate");
                           columns.Bound("Source");
                           columns.Bound("ID");
                           //foreach (System.Data.DataColumn column in Model.Columns)
                           //{
                           //    columns.Bound(column.ColumnName);
                           //}
                       })
          .Pageable()
          .Sortable()
          .Selectable(select => select
                                    .Enabled(true)
                                    .Mode(GridSelectionMode.Single)
                                    .Type(GridSelectionType.Row)
          )
          .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Model(model =>
                                                   {
                                                       model.Field("EntryType", typeof(string));
                                                       model.Field("EventDate", typeof(DateTime));
                                                       model.Field("Source", typeof(string));
                                                       model.Field("ID", typeof (int));                                                
                                                       model.Id("ID");
                                                       //foreach (System.Data.DataColumn column in Model.Columns)
                                                       //{
                                                       //    model.Field(column.ColumnName, column.DataType);
                                                       //}                
                                                   })
                                        .Read(read => read.Action("Read", "Events")
                                                          .Data("eventGridBindingData")
                                        )
          ))
</div>

<!-- DETAIL AREA -->

<div id="EventDetail">
    <div id="Data">
        @(Html.TextArea("EventData", Model.EventDetails.EventData))
    </div>
    <div id="Details">
        <!-- Detail Table Goes Here -->
        <table>
            <tr>
                <td>User</td>
                <td>Location</td>
                <td>Severity</td>
            </tr>
            <tr>
                <td>@(Model.EventDetails.UserID)</td>
                <td>@(Model.EventDetails.LocationID)</td>
                <td>@(Model.EventDetails.Severity)</td>
            </tr>
        </table>
    </div>
</div>

<!-- Page Scripts --> 
<script type="text/javascript">

    // Return additional data to the reader
    function eventGridBindingData() {
        return {
            name: '@ViewBag.AppName'
        };
    }

    // Handler for the EventGrid
    function eventGridHandler(e) {
        var data = this.dataItem(this.select());
        var appName = '@ViewBag.AppName';
        console.log("in event");
        jQuery.ajax({
            url: 'Events',
            data: { 'sName' : appName, 'iID' : data.id },
            type: "POST",
            cache: false
        });
    }

</script>

Events.cs(型号)

public class Events
{
    #region PROPERTIES

    public DataTable LoggedEvents { get; set; }
    public CEventMessage EventDetails { get; set; }

    #endregion

    #region CONSTRUCTORS

    public Events()
    {
        LoggedEvents = new DataTable();
        EventDetails = new CEventMessage();
    }

    #endregion
}

1 个答案:

答案 0 :(得分:0)

关于你是否是解决这个问题的“正确”方法的第二个问题,我想说可能不是。

我宁愿使用单独的操作方法'EventDetails'来传递给定事件Id的详细信息。这将阻止在用户实际想要查看给定事件的详细信息时刷新整个页面。 (更不用说不必要的后端喋喋不休)

处理细节的视图也可以是Kendo网格,您可以使用Kendo客户端绑定javascript将返回的事件详细信息(In JSON)绑定到详细信息网格。

为了概念性地理解我正在谈论的内容,请参考blog(我已经为Telerik ASP.Net-MVC网格写了这篇文章,他们将'master-detail'写入了框架。不知道剑道是否支持开箱即用)