大约四天后，我终于设法让网格与同一页面上的其他控件一起玩......
如果我遗漏了一个脚本，它会进行排序，但是分页不起作用，而且脚本也不起作用。我尝试将Action Link发回控制器的每一种方式都行不通，所以任何建议肯定会帮助我保持一定的理智： - ）
模型
Imports Grid.Mvc.Ajax.GridExtensions
Public Class GridData
Public Property Staff_ID As Integer
Public Property Current_Date As Date
Public Property Grid() As AjaxGrid(Of GridDataRows)
Public Property FilterableGrid() As AjaxGrid(Of GridDataRows)
Public Property GridFilter() As GridFilter
Public Sub New()
GridFilter = New GridFilter
End Sub
End Class
............................................... ...
Public Class GridDataRows
Public Property FirstName() As String
Public Property LastName() As String
Public Property Timesheet_ID() As Integer
Public Property Category_ID() As Integer
Public Property Type_ID() As Integer
Public Property TimeSheet_Hours() As String
Public Property Category_Name() As String
Public Property Type_Name() As String
Public Property Timesheet_Comments() As String
End Class
部分
@Imports GridMvc.Html
@Imports GridMvc.Sorting
@*@ModelType Grid.Mvc.Ajax.GridExtensions.AjaxGrid(Of GridData)*@
@ModelType GridData
@Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link href="~/Content/Gridmvc.css" rel="stylesheet" />
<link href="~/Content/ladda-bootstrap/ladda-themeless.min.css" rel="stylesheet" />
<script src="~/Scripts/URI.js"></script>
<script src="~/Scripts/gridmvc.js"></script>
<script src="~/Scripts/gridmvc-ext.js"></script>
<script src="~/Scripts/gridmvc.customwidgets.js"></script>
<script src="~/Scripts/ladda-bootstrap/ladda.min.js"></script>
<script src="~/Scripts/ladda-bootstrap/spin.min.js"></script>
<title></title>
</head>
<body>
<div>
@*@Html.Grid(Model.Grid).AutoGenerateColumns.Sortable(True).WithPaging(10).Named("TSGrid")*@
@Html.Grid(Model.Grid).Named("TSGrid").Columns(Function(vCols)
vCols.Add(Function(x) x.Timesheet_ID).Titled("ID").SetWidth(10).Encoded(False).Sanitized(False).SortInitialDirection(GridSortDirection.Descending)
vCols.Add(Function(x) x.Category_Name).Titled("Property").SetWidth(10).Encoded(False).Sanitized(False)
vCols.Add(Function(x) x.Type_Name).Titled("Job Type").SetWidth(10).Encoded(False).Sanitized(False)
vCols.Add(Function(x) x.TimeSheet_Hours).Titled("Hours").SetWidth(10).Encoded(False).Sanitized(False)
vCols.Add(Function(x) x.Timesheet_Comments).Titled("Comments").SetWidth(100).Encoded(False).Sanitized(False)
'vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit", "EditTimesheet", "Calendar", New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected(2);"})).SetWidth(30)
vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit x", Nothing, Nothing, New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected();"})).SetWidth(30)
End Function).WithPaging(10).Sortable(True)
</div>
</body>
</html>
查看
@ModelType GridData
@*@ModelType MaintenanceWeb.MainModels*@
@*@Imports GridMvc.html
@Imports Gridmvc.Sorting*@
@Code
ViewData("Title") = "Calendar"
End Code
<style>
td[data-name="TimeSheet_Hours"] {
text-align: right;
margin-right: 25px;
}
</style>
<div style="height: 25px;"></div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 style="text-align: center" id="calendarHeader"></h3>
</div>
</div>
<h2>Select the date you wish to work with</h2>
<div>
<div class="panel-body">
@Using (Ajax.BeginForm(Nothing, "Calendar/DateChanged", Nothing, New AjaxOptions With {.HttpMethod = "POST"}, New With {.id = "SelectDateForm"}))
@<div>
<div class="form-group">
<div id="datepicker" onchange="onChangeCalender();"></div>
@Html.TextBoxFor(Function(x) Model.Current_Date, "{0:MM/dd/yyyy}", New With {.id = "inputMaintDate", .class = "form-control", .type = "date"})
</div>
</div>
End Using
</div>
@*@Html.Partial("_DataGrid", New Grid.Mvc.Ajax.GridExtensions.AjaxGrid(IQueryable(Of DateGridModels)), 10, False)*@
@*@Html.RenderPartial("_DataGrid", Model.Item3)*@
@Using (Ajax.BeginForm(Nothing, "Calendar/EditTimesheet", Nothing, New AjaxOptions With {.HttpMethod = "POST"}, New With {.id = "GridForm"}))
@<div>
<div id="gridFilters">
<input type="text" name="date">
<input type="text" name="search">
</div>
<div Class="form-group">
<Button id="LoginButton" Class="btn btn-primary" type="submit"><span Class="glyphicon glyphicon-save"></span> Save</Button>
</div>
</div>
@code
Html.RenderPartial("_DataGrid", Model)
End Code
End Using
@*@Html.Partial("_DataGrid", Model.Item3)*@
</div>
网格脚本
$(document).ready(function () {
var ajaxUrl = '/Calendar/GridPaged';
pageGrids.TSGrid.ajaxify({
updateGridAction: ajaxUrl,
getPagedData: ajaxUrl,
getData: ajaxUrl
// gridFilterForm: $("#gridFilters")
});
pageGrids.TSGrid.refreshFullGrid();
});
网格项目选择的脚本
function gridRowSelected() {
jQuery.ajax({
url: '@Url.Action("EditTimesheet", "Calendar")',
type: 'POST',
data: $('#GridForm').serialize(),
success: function (response) {
}
});
}
控制器
Function Index() As ActionResult
Try
Dim vData = ReturnData2()
Dim vGrid = CType(New AjaxGridFactory().CreateAjaxGrid(vData, 1, False), AjaxGrid(Of GridDataRows))
Return View(New GridData() With {.Grid = vGrid})
Catch ex As Exception
EmailError(ex)
Return SystemError()
End Try
End Function
..................
<HttpGet()>
Function GridPaged(vPage As Integer) As ActionResult
Try
Dim vData = ReturnData2()
Dim vGrid = CType(New AjaxGridFactory().CreateAjaxGrid(vData, vPage, True), AjaxGrid(Of GridDataRows))
Return View(New GridData() With {.Grid = vGrid})
Catch ex As Exception
EmailError(ex)
Return Nothing
End Try
End Function
..........
Private Function ReturnData2() As IQueryable(Of GridDataRows)
Try
Dim vList As New List(Of GridDataRows)()
Using vService As New Service1Client
strSQL = "SELECT Maintenance_Timesheets.Timesheet_ID, "
strSQL += "Maintenance_Timesheets.Timesheet_Hours, "
strSQL += "Maintenance_Timesheets.Timesheet_Comments, "
strSQL += "Maintenance_Categories.Category_Name, "
strSQL += "Maintenance_Types.Type_Name "
strSQL += "FROM Maintenance_Timesheets "
strSQL += "JOIN Maintenance_Categories ON Maintenance_Categories.Category_ID = Maintenance_Timesheets.Category_ID "
strSQL += "JOIN Maintenance_Types ON Maintenance_Types.Type_ID = Maintenance_Timesheets.Type_ID "
strSQL += "WHERE Staff_ID = 5"
Using DS As DataSet = vService.ReturnDataSetHAS(strSQL)
For Each Row As DataRow In DS.Tables(0).Rows
vList.Add(New GridDataRows() With {.Timesheet_ID = Row("Timesheet_ID"), .Category_Name = ReturnText(Row("Category_Name")), .Type_Name = ReturnText(Row("Type_Name")), .TimeSheet_Hours = Format(Row("Timesheet_Hours"), "##0.00"), .Timesheet_Comments = ReturnText(Row("Timesheet_Comments"))})
Next
End Using
End Using
Return vList.AsQueryable
Catch ex As Exception
EmailError(ex)
Return Nothing
End Try
End Function
=====================编辑更新========================
将脚本更改为： -
<script>
function gridRowSelected(SelectItem) {
jQuery.ajax({
url: '@Url.Action("EditTimesheet", "Calendar")',
type: 'POST',
data: { vID: SelectItem },
success: function (response) {
}
});
//alert(SelectItem)
}
和网格线
vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit x", Nothing, Nothing, New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected(" & d.Timesheet_ID & ");"})).SetWidth(30)
和控制器
<HttpPost()>
Function EditTimesheet(vID As Integer) As ActionResult
Try
Return ModalValidation(vID)
Catch ex As Exception
EmailError(ex)
Return SystemError()
End Try
End Function
现在将正确的id发送回控制器。如果我在脚本中设置了警报，则Modal会弹出正确的ID，但在警报关闭后会关闭。如果没有警报，你甚至无法判断模态是否已被提升。我怀疑网格刷新并导致模态关闭。更近一点......但仍然有分页问题
=====================编辑更新2 ======================= ============
添加return false会阻止网格回发，现在一切都与分页和排序无关
vCols.Add().Titled("Edit").Sanitized(False).Encoded(False).RenderValueAs(Function(d) Html.ActionLink("Edit x", Nothing, Nothing, New With {.TimesheetID = d.Timesheet_ID, .[class] = "btn btn-primary", .onClick = "gridRowSelected(" & d.Timesheet_ID & ");return false;"})).SetWidth(30)