[英]Ctrl+Click on link that renders partial view
I got a link that renders partial view using AJAX.我得到了一个使用 AJAX 呈现局部视图的链接。
Here is my link code:这是我的链接代码:
<a href="#" onclick="LoadChildCategories(@i.CategoryId,
@i.IsTrading.ToString().ToLower())">@i.Name</a>
And here is LoadChildCategories function code:这是 LoadChildCategories 函数代码:
function LoadChildCategories(id, isTrading) {
var link;
if (isTrading === false) {
link = '@Html.Raw(@Url.Action("NonTradingCategories", "Home",
new {categoryId = -1}))';
} else {
link = '@Html.Raw(@Url.Action("ModelList", "Home", new {categoryId = -1}))';
}
link = link.replace("-1", id);
$.ajax({
url: link,
method: 'GET',
success: function(data) {
$("#viewPartial").html(data);
}
});
}
When I click it without CTRL it's ok, partial view renders into my div.当我在没有 CTRL 的情况下单击它时,部分视图会呈现到我的 div 中。 But when I click it with CTRL partial view renders into current tab and then another tab opens at Index page.
但是当我用 CTRL 键单击它时,局部视图会呈现到当前选项卡中,然后在索引页面打开另一个选项卡。
And when I rightclick on link and select to open it in another tab then nothing happens at current tab and new tab opens at Index page.当我右键单击链接并选择在另一个选项卡中打开它时,当前选项卡没有任何反应,新选项卡在索引页面打开。
So, is there any ways to handle that?那么,有什么办法可以处理吗?
I found pretty nice solution, so I modified project according to this solution: Make an MVC Application into a SPA with AJAX and History.js我找到了很好的解决方案,所以我根据这个解决方案修改了项目: Make an MVC Application into a SPA with AJAX and History.js
1) Make controller methods return View, not PartialView and add one line of code than will check is it an AJAX request: 1) 使控制器方法返回 View,而不是 PartialView 并添加一行代码来检查它是否是 AJAX 请求:
public ViewResult Category(int id)
{
ViewBag.IsAjaxRequest = Request.IsAjaxRequest();
var node = CategoriesHandler.Instance.First(x => x.CategoryId == id);
var childCategories = CategoriesHandler.Instance.Where(x => x.ParentId == node.Id).ToList();
ViewBag.Message = node.Name;
return View(childCategories);
}
2) Edit _ViewStart.cshtml like that: 2) 像这样编辑 _ViewStart.cshtml:
@{
Layout = ViewContext.ViewBag.IsAjaxRequest == true ? null : "~/Views/Shared/_Layout.cshtml";
}
3) Prepare links to be managed via AJAX: 3) 准备要通过 AJAX 管理的链接:
<a href="@Url.Action("Category", "Intech", new { id = i.CategoryId })" class="ajaxLink" data-href="@Url.Action("Category", "Intech", new { id = i.CategoryId })" data-title="@i.Name">@i.Name</a>
4) Create container for views at _Layout.cshtml 4) 在 _Layout.cshtml 为视图创建容器
@/*Some layout stuff*/
<div id="bodyContent">
@RenderBody()
</div>
@/*Other layout stuff*/
5) Prepare helper javascript file like that: 5)准备这样的助手javascript文件:
$(function () {
var contentShell = $('#bodyContent');
var History = window.History, State = History.getState();
$(".ajaxLink").on('click', function (e) {
e.preventDefault();
var url = $(this).data('href');
var title = $(this).data('title');
History.pushState(null, title, url);
});
function navigateToURL(url) {
$('#bodyContent').html('<div class="loader"> </div>');
$.ajax({
type: "GET",
url: url,
dataType: "html",
cache: false,
success: function (data, status, xhr) {
$('#bodyContent').hide();
contentShell.html(data);
$('#bodyContent').fadeIn(500);
},
error: function (xhr, status, error) {
$('#bodyContent').hide();
alert("TEST_Error");
}
});
}
History.Adapter.bind(window, 'statechange', function () {
State = History.getState();
if (State.url === '') {
return;
}
navigateToURL(State.url);
});});
6) Do not forget to include your javascript files into the bundle! 6) 不要忘记将您的 javascript 文件包含在包中!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.