在成功的ajax响应中加载模态html

Question

我有一个返回 ViewComponent 的视图控制器，它返回一个包含我需要的所有内容的视图 (.cshtml)。

在另一个视图中我想使用它，所以我对控制器进行 ajax 调用以获取响应中的原始 html。

模态

<!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data- 
   dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
              <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data 
    dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>

JS：

 $.ajax({
        url:  'getModal/blabla',
        type: 'GET',
        data: {
           Id: id              
        },
        success: function (data) {                      
               $('#myModal').modal('show').html(data);
        },
        error: function (error) {
              console.error(error);                        
        },
    });

在我的 ViewComponent 中，我像这样返回 View：

return View("~/Views/MyModal.cshtml", new MyViewModel()
            {
                Id = obj.id
            });

Answer 1

这是一个演示：

TestViewComponent.cshtml(你想把数据传给控制器，所以你需要在ajax中使用type: 'POST')：

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-
                        dismiss="modal">
                    &times;
                </button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data
                        dismiss="modal">
                    Close
                </button>
            </div>
        </div>

    </div>
</div>
@section scripts{ 
<script>
    $(function () {
        var Id = 1;
        $.ajax({
            url: '/Test1/RetunSample1ViewComponent',
            type: 'POST',
            data: {
                Id: Id
            },
            success: function (data) {
                $('#myModal').modal('show').html(data);
            },
            error: function (error) {
                console.error(error);
            },
        });  
    })
    
</script>
}

控制器：

        public IActionResult TestViewComponent() {
            return View();
        }
        public IActionResult RetunSample1ViewComponent(int Id) {
            return ViewComponent("Sample1", new Sample1Model { Id = Id , Name="sample1"}); ;
        }

ViewComponents/Sample1：

 public class Sample1:ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync(Sample1Model s)
        {
            return View("~/Views/Shared/Default.cshtml",s);
        }
    }

Views/Shared/Default.cshtml：

@model Sample1Model
Id:<input asp-for="Id" />
Name:<input asp-for="Name" />

结果：

你也可以使用局部视图：

控制器：

public IActionResult ReturnPartialView(int Id) {
            return PartialView("~/Views/Shared/Default.cshtml", new Sample1Model { Id = Id, Name = "sample1" });
        }

查看：

 $(function () {
        var Id = 1;
        $.ajax({
            url: '/Test1/ReturnPartialView',
            type: 'POST',
            data: {
                Id: Id
            },
            success: function (data) {
                $('#myModal').modal('show').html(data);
            },
            error: function (error) {
                console.error(error);
            },
        });  
    })