Show razor page as modal popup - javascript

I'm trying to render a razor page as the content of a modal dialog:
This is the razor page
<div class="container">
<div class="title modal " tabindex="-1" id="loginModal"
data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4>#IdentityResources.ResendEmailConfirmation</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<input class="form-control" type="text" placeholder="Email" id="inputUserName" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary col-md-2">#IdentityResources.Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#loginModal").modal('show');
});
$("#btnHideModal").click(function () {
$("#loginModal").modal('hide');
});
</script>
And later in another razor page I create a link to the page:
<a asp-page="/Identity/_ResendConfirmationEmail">#IdentityResources.ResendEmailConfirmation</a>
Once it's clicked the razor page is displayed, but since it's action link, it's redirecting directly to the page, instead of rendering it over the current page.
How can I change this behavior?

You need to call your action, using ajax. so in the response you will get html of your view.
but you need to return PartialView(), because if you return your view as View() then youy view will come with layout, so your page will display layout contents twice in a page.
// your controller
public ActionResult _ResendConfirmationEmail()
{
return PartialView();
}
Now call it using ajax as below.
$.ajax({
url: '#Url.Action("_ResendConfirmationEmail","Identity")',
success: function (data) {
$('#yourdivid').html(data);
},
error : function (error)
{
// handle error code
}
});

Related

Fit PartialView to Bootstrap Modal (MVC)

I'm displaying a MVC Partial View inside a Bootstrap Modal by clicking a button. My setup is like this:
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">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body" id="Preview">
#*PartialView*#
</div>
</div>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
$.ajax({
type: "Get",
url: '#Url.Action("PartialViewTitle", "Controller")',
data: {},
success: function (data) {
$('#Preview').html(data);
$('#myModal').modal('show');
}
});
}
</script>
In my Controller I have defined a method PartialViewTitle() which returns the Partial View. I have a button, where onclick= links to the Open() function.
The problem is that the content of my partial View is displayed on the left side of the modal and on the right is blank space. I would like to have the size of my modal adapted to its content and the content to be centered. What is the best way to do this?
Thank you in advance!
To get the content centered you just have to add align-self-center as follow:
<div class="modal-body align-self-center" id="Preview">
To adapt size, you can use css display: inline-block; please take a look to the following article:
Bootstrap Modal Dynamic Width
In your .cshtml view use
<div id='myModal' class='modal hide fade in' data-url='#Url.Action("PartialViewTitle","Controller")'>
<div id='ModalContainer'>
</div>
</div>
Javascript
<script type="text/javascript">
function Open() {
var url = $('#myModal').data('url');
$.get(url, function(data) {
$('#ModalContainer').html(data);
$('#myModal').modal('show');
});
}
</script>
If it doesn't work then need to add styles.
Try using $('#Preview').append(data); instead of $('#Preview').html(data);

Passing Data-id of an Object to Bootstrap Modal form

Good day.
I have a task list which has a Delete button in the task field for managing the task.
I am looking how to pass a task parameter containing ID (after pushing a Delete button) to the Bootstrap Modal.
My target is to click the "trash" icon on the task and to show the modal, and only in modal to confirm the deletion.
Here is the button wrapped in modal
`<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
<a data-toggle="modal" data-target="#deleteTaskModal">
<button class="deleteTask far fa-trash-alt" data-id='{id}'></button>
</a></span>`
Here is the modal itself.
I want to use the modal to confirm Deleting the task.
<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="" action="" method="">
<div class="modal-header">
</div>
<div class="modal-body">
<h3>Do you want to delete this task?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Delete Task</button>
</div>
</form>
</div>
</div>
</div>
</div>
Here is Jquery Script
I tried to catch the ID of the "trigger" and pass it to Modal
$(".modal fade #deleteTaskModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var id = button.data('id');
var url = '/delete/' + id;
if (confirm('Delete task')) {
$.ajax({
url: url,
type: "DELETE",
success: function(result) {
console.log("Deleting task...");
window.location.href = '/';
},
error: function(err) {
console.log(err);
}
})
}
}
You were nearly there though you were not targeting the right element in your modal open.
Since you have an a element and button is inside the a which contains the data-id
You need to watch for the eventTarget and then use .find() method to find the button and get the data id from it which will be passed via ajax
var id = button.find('button').data('id') //need to find the button and get id
In addition, you also need an event handler which will click function inside your modal open which will trigger when you click on Delete task button in your modal.
Lastly I have added a modal close option as well which will happen ajax success - I have fixed up your code and is working as intended.
Live Working Demo: (Showing the data-id in console.log and click button working)
$("#deleteTaskModal").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
var id = button.find('button').data('id') //need to find the button and get id
var url = '/delete/' + id; //url
console.log('data-id= ' + id) //15
//Click delete task in modal
$(document).on('click', '.delete_task', function() {
if (confirm('Delete task')) {
$.ajax({
url: url,
type: "DELETE",
success: function(result) {
$('#deleteTaskModal').modal('hide') //hide modal on success
console.log("Deleting task...");
window.location.href = '/';
},
error: function(err) {
console.log(err);
}
})
}
})
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<span data-toggle="tooltip" data-placement="bottom" title="Delete task">
<a data-toggle="modal" data-target="#deleteTaskModal">
<button class="deleteTask fas fa-trash-alt" data-id='15'></button>
</a>
</span>
<div class="modal fade" id="deleteTaskModal" tabindex="-1" aria-labelledby="exampleformModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="" action="" method="">
<div class="modal-header">
</div>
<div class="modal-body">
<h3>Do you want to delete this task?</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary delete_task">Delete Task</button>
</div>
</form>
</div>
</div>
</div>
</div>

How to show modal on component/page created/load in Vue.js

I'm new to Vue.js and I struggle with modals. I want to first load the modal window as a user navigates to a certain component. I tried to create some example modal and it opens if I click a button and trigger $('#modalId').modal('show'). But when I try to execute the same command from Vue's created () {...} It does not open a modal window. I don't want to open a modal window with a button click, I want to open as page/component loads.
<!-- This works fine -->
<button class="btn btn-dark" #click="openModal" data-target="#loginModal">Open modal</button>
<!-- MODAL -->
<div class="modal" ref="modal" id="loginModal" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Insert required data</h5>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Submit</button>
<a href="#" #click="logout" data-dismiss="modal">
<span>{{ $t('pages.userIconInHeader.signOut') }}</span>
</a>
</div>
</div>
</div>
</div>
...
export default {
name: 'test',
data () {
return {}
},
created () {
// HERE I WOULD LIKE TO OPEN MODAL. If it's even possible?
$(document).ready(function () {
this.openModal()
})
},
methods: {
openModal () {
$('#loginModal').modal('show')
},
...
Use in mounted without $(document).ready(function(){}):
mounted() {
this.openModal();
},
Don't mix jQuery and Vue. Vue works with Virtual DOM and you should update, show, hide elements according to Vue documentation, no work around with jQuery. This is article about creating modal in Vue, I hope it helps
https://alligator.io/vuejs/vue-modal-component/
mounted() {
this.showModal()
},
methods: {
showModal() {
this.$modal.show("model-name")
},
}
this can be used for opening model in vuejs

how to call a form from a second application and performing actions?

I have an app running on localhost:port1. On this app, there is a button which when clicked, opens up a modal dialog which has form with First name, Last name and a close and submit button. I have another app running on localhost:port2. I have a button which when clicked, opens up a modal dialog. withing this dialog in app2, I have an iframe which I will like to have the form from localhost:port1 and to also be able to perform the same action as if i was doing in it from the first app.
Currently I am getting the form in the iframe using jquery ajax but however, i am not able to perform any action because non of the buttons work. Below is the jquery code in my second app which gets the form from app1.
<script>
$(document).ready(function () {
$.get('https://localhost:port1/').then(function (html) {
// Success response
var $mainbar = $(html).find('#InsertDialog');
$("#iframe").append('<iframe id="iframe"></iframe>');
setTimeout(function () {
var iframeBody = $("#iframe").contents().find("body");
iframeBody.append($mainbar);
},
333
);
}, function () {
// Error response
document.write('Access denied');
});
});
</script>
In my second app, i have the following page,
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" id="openModal">Open dialog</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog" style="background: bisque">
<div class="modal-dialog modal-lg" style="height: 100%; width: 100%;">
<!-- Modal content-->
<div class="modal-content" style="height: 90%; width: 100%">
<div class="modal-body">
<iframe name="iframe" id="iframe" style="overflow: hidden; height: 80%; width: 90%; border: none;" scrolling="yes"></iframe>
</div>
#*<button type="button" class="btn btn-default" id="closeMyIframe">close</button>*#
<div class="modal-footer" style="background: bisque">
<button type="button" class="btn btn-default" data-dismiss="modal" id="reload">Close</button>
</div>
</div>
</div>
</div>
I am beginner in this and I don't seem to find a solution for my scenario. Thanks

AngularJS - ng-click not working in Modal

I am having a Modal which opens up on a button click. In this Modal, a button uses ng-click to call a function from js file.The function doesn't get called, with no errors.
Outside the Modal the ng-click is working properly.
<div class="container-fluid" ng-app="app" ng-controller="GridCtrl">
....
<div id="partial"></div>
</div>
function openModal() {
jq.get('/Data/openModal?Id=' + Id, function (data) {
jq('#partial').html(data);
jq('#Modal').modal('show');
});
}
Partial Page :-
#model Models.Data
#{
Layout = null;
}
<div class="modal fade bs-example-modal-lg" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="compModalLabel">Master</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="col-sm-12">
<button type="button" ng-click="getData('live')">Live Data</button>
</div>
.....
</div>
var app = angular.module('app', ['ui.grid']);
app.controller('GridCtrl', ['$scope', function ($scope) {
$scope.getData= function (status){
.....
}
}
]);
What is the solution?
See here: Add DOM Elements (that are Angular directives) via jQuery .append()?
You need to have the newly added DOM elements compiled by Angular, with $compile(...)
(Although a more pure AngularJS codewould be better overall, you are mixing JQuery and NG.
http://angular-ui.github.io/bootstrap/#modal)

Categories