使用 jQuery ajax 调用在 MVC 视图中绑定部分视图
Posted
技术标签:
【中文标题】使用 jQuery ajax 调用在 MVC 视图中绑定部分视图【英文标题】：Bind partial view in MVC View using jQuery ajax call 【发布时间】：2020-08-27 19:00:45 【问题描述】：I have a View as shown below
**<div id = 123 class ="Country">**
<div class = "content">
**<need to load partial view here>**
</div>
**</div>**
**<div id = 234 class ="Country">**
<div class = "content">
**<need to load partial view here>**
</div>
**</div>**
...
...More div's here
...
so on clicking the Country div, i need to load its inner div "content". My jQuery ajax call is like below
$(".country").on('click', function ()
$.ajax(
url: '@(Url.Action("FilesByCountry", "RelatedFiles"))', //Cont & ActionResult
type: "GET",
data: $(this).attr('id'), //getting the click id
contentType: "application/json; charset=utf-8",
success: successFunc,
error: errorFunc
);
function successFunc(data)
**$(this).attr('id').children($('#content', data).html())**
function errorFunc(xhr, errorType, exception)
alert(xhr.status + ": " + exception);
);
);
所以控制器运行良好，它在调试模式下通过了 PartialView。但是部分视图在主视图中没有绑定。对此有什么想法吗？
【问题讨论】：
如果你使用--> .html(data)，你会得到内容吗？ 如果我成功输入警报（数据）然后我看到部分视图 html 绑定...所以现在我的问题是如何查找/绑定 id 的孩子的“内容”div 【参考方案1】：我认为这是您填充内容的方式：
$(this).find('.content').html(data);
我认为#content 将用于 ID 选择器，.content 用于类选择器。
另一种尝试是只填充一个已知的 div -->
$('#234').find('.content').html(data);
或者
$('#234').html(data);
然后使用开发工具 F12 检查元素，看看里面放了什么。
另外，请确保您正在注入一个 html 片段。你可以检查<head><body>标签的数据，我相信它们不应该因为你正在做的事情而存在。
【讨论】：
是的，你是对的。但是在更正之后，我看到了同样的行为。 PartialView 不在内容 div 内呈现【参考方案2】：我找到了答案。实际上 $(this) 在我的 successFunc 中不起作用，并且总是返回 null。所以我将我的 javascript 代码修改为如下所示。
$(".country").on('click', function ()
var _this = $(this);
$.ajax(
url: '@(Url.Action("FilesByCountry", "RelatedFiles"))', //Cont & ActionResult
type: "GET",
data: $(this).attr('id'), //getting the click id
contentType: "application/json; charset=utf-8",
success: successFunc,
error: errorFunc
);
function successFunc(data)
_this.find('.content').html(data);
function errorFunc(xhr, errorType, exception)
alert(xhr.status + ": " + exception);
);
);
【讨论】：
以上是关于使用 jQuery ajax 调用在 MVC 视图中绑定部分视图的主要内容，如果未能解决你的问题，请参考以下文章
如何从MVC5中的jquery ajax调用中获取部分视图和JSON数据？
MVC 3 / Jquery AJAX / Session Expires / C# - 在 ajax 调用期间处理会话超时
如何使用 Jquery AJAX 调用 MVC Action 然后在 MVC 中提交表单？
parserrror SyntaxError: Unexpected token < - 在 ASP.NET MVC 4 中使用 jQuery Ajax 加载部分视图