在成功的ajax响应中加载模式HTML

问题描述

我有一个返回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
            });

解决方法

这是一个演示：

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

视图/共享/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",Name = "sample1" });
        }

查看：

 $(function () {
        var Id = 1;
        $.ajax({
            url: '/Test1/ReturnPartialView',});  
    })