使用 jQuery ajax 调用在 MVC 视图中绑定部分视图答案

【问题标题】：Bind partial view in MVC View using jQuery ajax call使用 jQuery ajax 调用在 MVC 视图中绑定部分视图
【发布时间】：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

标签： javascript jquery asp.net-mvc asp.net-mvc-4 dom

【解决方案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);
                }
        });
    });

【讨论】：