Load modal html in success ajax response

Question

I have a view controller that is returning ViewComponent which returns a View (.cshtml) containing everthing I need.

In another view I want to use that, so i make ajax call to the controller to get raw html in the response.

Modal

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

In my ViewComponent I return View like this:

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

Answer 1

Here is a demo:

TestViewComponent.cshtml(you want to pass data to controller,so you need to use type: 'POST' in ajax):

<!-- 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>
}

Controller:

        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" />

result:

You can also use partial view:

Controller:

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

View:

 $(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);
            },
        });  
    })