How to make Modal pop up pass to Controller before loading the page?

I can make the modal pop work even without passing controller but I need to set the model data since my modal suppose to be my create and update form.

Here is the button to call modal:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_upload_image" >Upload Image </button>


<div class="modal fade" id="kt_modal_upload_image" tabindex="-1" aria-hidden="true">
.....
</div>




I tried indicating the controller and action in button but still didnt work:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_upload_image" asp-controller="Image" asp-action="UpsertModal">
Upload Image</button>



Controller:
[HttpGet]
public IActionResult UpsertModal(int? id)
{
.....
return View();
}

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

Hi.

Which app type are you currently working on? Angular, React, Laravel or etc.?

Regards
I am using the the starter kit project in .net core 6
Hi,

You can toggle your modal from javascript code.

Firstly create modal instance.
var myModal = new bootstrap.Modal(document.getElementById("your modal id"), {
keyboard: false
})



Then use this instance to show or hide your modal.
myModal.show()
myModal.hide()



Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you so much for your response. My main issue is this code is not hitting the controller but it shows the modal.

do you have any sample code to return PartialView from asp .net core Controller using metronic 8 .net core version? i need to populate the Model first before I display the modal. Please, Thank you
Hi,

Sorry for the late reply.

If you just want to return PartialView in your Controller then you can use the example below.

[HttpGet("/")]
public IActionResult Index()
{
return PartialView("~/Views/Partials/Modals/_UpgradePlan.cshtml");
}



Regards,
Lauris Stepanovs,
Keenthemes Support Team
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle