I'm using asp.net mvc 4
& EF 6
to make a website where I want a populated table for paging, sorting & filtering/search on a PartialView by Ajax
. So far paging, sorting & search functionalities are working fine but I can't get it to Ajax where the table will only update instead of page reloading. Here are my codes,
我正在使用asp.net mvc 4和EF 6创建一个网站,我想要一个填充表格,用于Ajax对PartialView的分页,排序和过滤/搜索。到目前为止,分页,排序和搜索功能都运行正常,但我无法将其传递到Ajax,其中表只会更新而不是页面重新加载。这是我的代码,
Controller
public PartialViewResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
ViewBag.currentSort = sortOrder;
if (strSearch != null)
{
page = 1;
}
else
{
strSearch = currentFilter;
}
ViewBag.CurrentFilter = strSearch;
ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
var FlatsOrder = from f in rentdb.FlatInfoes select f;
if (!String.IsNullOrEmpty(strSearch))
{
FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
}
switch (sortOrder)
{
case "title_desc":
FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
break;
default:
FlatsOrder = FlatsOrder.OrderBy(a => a.title);
break;
}
int pageSize = 5;
int pageNumber = (page ?? 1);
return PartialView(FlatsOrder.ToPagedList(pageNumber, pageSize));
}
View
<div id="divTable" class="span12" style="background-color: #fff;">
<table class="table table-hover">
<thead style="background-color: #cccccc;">
<tr>
<th class="text-center">
@Ajax.ActionLink("Title", "Flats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
HttpMethod = "GET",
UpdateTargetId = "divTable",
InsertionMode = InsertionMode.Replace
})
</th>
</tr>
</thead>
</table>
</div>
Whenever I click the Title
link for sorting, whole page reloads and then sort. How can I just update the table by ajax and partialview? Need this help badly. Thanks.
每当我单击Title链接进行排序时,整个页面都会重新加载然后排序。我怎样才能通过ajax和partialview更新表格?非常需要这个帮助。谢谢。
1 个解决方案
#1
0
You have to make a normal View which contains a PartialView like the following
您必须创建包含PartialView的普通View,如下所示
View
@model YourModelClass
@* some thing which will not effected when the Ajax request is done *@
@Html.Partial("_TablePartialView", Model)
Partial View which should named in this case as "_TablePartialView" and should exists in the "Shared" folder inside the "Views" folder.
部分视图在本例中应命名为“_TablePartialView”,并且应存在于“Views”文件夹内的“Shared”文件夹中。
@model YourModelClass
<div id="divTable" class="span12" style="background-color: #fff;">
<table class="table table-hover">
<thead style="background-color: #cccccc;">
<tr>
<th class="text-center">
@Ajax.ActionLink("Title", "AjaxFlats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
HttpMethod = "GET",
UpdateTargetId = "divTable",
InsertionMode = InsertionMode.Replace
})
</th>
</tr>
</thead>
</table>
</div>
Controller
private YourModelClass GetModel(string sortOrder, string currentFilter, string strSearch, int? page)
{
ViewBag.currentSort = sortOrder;
if (strSearch != null)
{
page = 1;
}
else
{
strSearch = currentFilter;
}
ViewBag.CurrentFilter = strSearch;
ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
var FlatsOrder = from f in rentdb.FlatInfoes select f;
if (!String.IsNullOrEmpty(strSearch))
{
FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
}
switch (sortOrder)
{
case "title_desc":
FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
break;
default:
FlatsOrder = FlatsOrder.OrderBy(a => a.title);
break;
}
int pageSize = 5;
int pageNumber = (page ?? 1);
return FlatsOrder.ToPagedList(pageNumber, pageSize);
}
public ActionResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
return View(GetModel(sortOrder, currentFilter, strSearch, page);
}
public ActionResult AjaxFlats(string sortOrder, string currentFilter, string strSearch, int? page)
{
return PartialView("_TablePartialView", GetModel(sortOrder, currentFilter, strSearch, page);
}
#1
0
You have to make a normal View which contains a PartialView like the following
您必须创建包含PartialView的普通View,如下所示
View
@model YourModelClass
@* some thing which will not effected when the Ajax request is done *@
@Html.Partial("_TablePartialView", Model)
Partial View which should named in this case as "_TablePartialView" and should exists in the "Shared" folder inside the "Views" folder.
部分视图在本例中应命名为“_TablePartialView”,并且应存在于“Views”文件夹内的“Shared”文件夹中。
@model YourModelClass
<div id="divTable" class="span12" style="background-color: #fff;">
<table class="table table-hover">
<thead style="background-color: #cccccc;">
<tr>
<th class="text-center">
@Ajax.ActionLink("Title", "AjaxFlats", new { sortOrder = ViewBag.TitleSort, currentFilter = ViewBag.CurrentFilter }, new AjaxOptions() {
HttpMethod = "GET",
UpdateTargetId = "divTable",
InsertionMode = InsertionMode.Replace
})
</th>
</tr>
</thead>
</table>
</div>
Controller
private YourModelClass GetModel(string sortOrder, string currentFilter, string strSearch, int? page)
{
ViewBag.currentSort = sortOrder;
if (strSearch != null)
{
page = 1;
}
else
{
strSearch = currentFilter;
}
ViewBag.CurrentFilter = strSearch;
ViewBag.TitleSort = String.IsNullOrEmpty(sortOrder) ? "title_desc" : "";
var FlatsOrder = from f in rentdb.FlatInfoes select f;
if (!String.IsNullOrEmpty(strSearch))
{
FlatsOrder = FlatsOrder.Where(s => s.address_area.Contains(strSearch));
}
switch (sortOrder)
{
case "title_desc":
FlatsOrder = FlatsOrder.OrderByDescending(a => a.title);
break;
default:
FlatsOrder = FlatsOrder.OrderBy(a => a.title);
break;
}
int pageSize = 5;
int pageNumber = (page ?? 1);
return FlatsOrder.ToPagedList(pageNumber, pageSize);
}
public ActionResult Flats(string sortOrder, string currentFilter, string strSearch, int? page)
{
return View(GetModel(sortOrder, currentFilter, strSearch, page);
}
public ActionResult AjaxFlats(string sortOrder, string currentFilter, string strSearch, int? page)
{
return PartialView("_TablePartialView", GetModel(sortOrder, currentFilter, strSearch, page);
}