在部分视图内渲染的WebGrid将引发“;“jQuery未定义”,当尝试执行基于ajax的分页或过滤时
WebGrid rendered inside partial view will raise "“jQuery is not defined”" , when trying to do ajax-based paging or filtering
我正在开发一个asp.net mvc5 web应用程序。我有以下内容:-1.包含@Html.Action
的主视图,它调用返回部分视图的操作方法。2.在局部视图中,我定义了一个web网格。3.如果我在部分视图的网络网格中点击一个链接,如"显示详细信息"链接,将显示一个模式弹出窗口,在模式弹出窗口中,我将有另一个网络网格。我面临的问题是,如果我试图在模式弹出窗口中呈现的web网格中进行基于Ajax的排序或分页,我将得到以下错误:-
"jQuery is not defined".
主要视图如下:-
@Html.Action("GetStaffSkill", "Staff", new {staffmasterdetails = Model.SkillID})
并且上述@Html.Action将调用以下操作方法:-
public ActionResult GetStaffSkill(.....)
{
var records = new PagedList<Staff>();
//codegoes here
return PartialView("_gridstaff",records);
}
并且具有"显示详细信息"链接的局部视图是:-
@模型技能管理.模型.页面列表
<div class="well">
<div style="margin-top:17px;">
@{
var grid = new WebGrid(
canPage: true,
rowsPerPage: Model.PageSize,
canSort: true,
ajaxUpdateContainerId: "grid", fieldNamePrefix: "staff");
grid.Bind(Model.Content, rowCount: Model.TotalRecords, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
@grid.GetHtml(htmlAttributes: new { id = "grid" }, // id for ajaxUpdateContainerId parameter
fillEmptyRows: false,
tableStyle: "table table-bordered table-hover",
mode: WebGridPagerModes.All,
columns: grid.Columns(
grid.Column("Skill",canSort:false,format:
@<text>
<a data-modal='' href="@Url.Action("ShowDetails", "Skill", new {skillmasterDetail= item.StaffID, skillsummaryView=true }) " title='show detials'>
Show Details</a>
最后是负责显示模式弹出的脚本:-
$(document).ready(function () {
$(function () {
$.ajaxSetup({ cache: false });
//$("a[data-modal]").on("click", function (e) {
$(document).on('click', 'a[data-modal]', function (e){
$('#myModalContent').css({ "max-height": screen.height * .82, "overflow-y": "auto" }).load(this.href, function () {
$('#myModal').modal({
//height: 1000,
//width: 1200,
//resizable: true,
keyboard: true,
backdrop: 'static',
draggable: true
}, 'show').draggable({
handle: ".modal-header"
});
$('#myModalContent').removeData("validator");
$('#myModalContent').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse('#myModalContent');
bindForm(this);
$("input[data-autocomplete-source]").each(function () {
var target = $(this);
target.autocomplete({
source: target.attr("data-autocomplete-source"), minLength: 1, delay: 1000, appendTo: $("#myModal")
});
});
});
return false;
});
});
那么,有人能告诉我如何迫使jQuery保持活跃并理解@Html.Action中呈现的部分视图吗?
感谢
页面代码从上到下执行。JQuery Scripts.Render
可能在布局的底部。
要解决这个问题,您可以将其移动到布局cshtml页面的顶部。
但我不知道这是否是更好的解决方案,因为在页面底部渲染脚本可以防止延迟页面显示。
相关文章:
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 如何通过引用var Using DataTables来进行分页或排序
- 使用CSS或JavaScript计算分页符的数量
- DataTables-创建自定义分页样式(加载更多样式)
- 使用ajax的服务器端分页&jQuery
- 分页:如何用AJAX加载第一个页面
- dataTables-如何自定义分页类型以显示最后一个页码后面的省略号,
- 不带jquery的全屏分页
- 更改组合框分页后,getValue和getRawValue返回相同的值
- jQuery简单分页
- 使用jQuery在表中分页
- jQuery分页下一页和上一页按钮在点击零或超过最后一页后失败
- jQuery:根据select选项中的每页项目进行分页
- 如何为我的分页添加格式
- 用键盘分页jQuery下一个和上一个控件.触发器('点击')不'不起作用
- 如何在emberjs中使用幻影假数据进行分页
- 如何在分页事件中突出显示数据表中的单词
- 在部分视图内渲染的WebGrid将引发“;“jQuery未定义”,当尝试执行基于ajax的分页或过滤时
- 如何在JavaScriptmashup中从多个源最佳地执行分页和排序
- 此策略中不应执行具有有效分页cookie的CRM 2011查询