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

Question

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);
                }
        });
    });

So the controller is hitting fine and it went through the PartialView in debug mode.所以 controller 运行良好，它在调试模式下通过了 PartialView。 But the partial view is not binding in Main View.但是部分视图在主视图中没有绑定。 Any thoughts on this?对此有什么想法吗？

Answer 1

I think it is the way you are stuffing the content:我认为这是您填充内容的方式：

$(this).find('.content').html(data);

I think #content would be for the ID selector and .content for the class selector.我认为#content将用于 ID 选择器，而.content用于 class 选择器。

Another try is to just stuff a known div -->另一种尝试是只填充一个已知的 div -->

$('#234').find('.content').html(data);

Or或者

$('#234').html(data);

Then inspect the element using dev tools F12 and see what was put inside.然后使用开发工具 F12 检查元素，看看里面放了什么。

Also, make sure you are injecting an html fragment.此外，请确保您正在注入 html 片段。 You can check the data for <head><body> tags, I am sure they should not be there for what you are doing.您可以检查<head><body>标签的数据，我确信它们不应该因为您正在做的事情而存在。

Answer 2

I found the answer to this.我找到了答案。 Actually $(this) is not working inside my successFunc and was returning null always.实际上 $(this) 在我的 successFunc 中不起作用，并且总是返回 null。 So i modified my Javascript code to something as below.所以我将我的 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 视图中绑定部分视图

问题描述

2 个解决方案

解决方案1
0 2020-05-12 13:44:13

解决方案2
0 已采纳 2020-05-18 14:44:08

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

问题描述

2 个解决方案

解决方案1 0 2020-05-12 13:44:13

解决方案2 0 已采纳 2020-05-18 14:44:08

解决方案1
0 2020-05-12 13:44:13

解决方案2
0 已采纳 2020-05-18 14:44:08