Bootstrap Model Not Working in BlazorServer App - javascript

I am learning Blazor, so I am Working on A project where i am Using Bootstrap Model..
Problem Is On click The Actions Buttons On the List, The Model Is Not Opening .. i am Using
IJSRuntime to Open The Model... Below Is My Code
<tbody id="tbody">
#{
if (customers.Count > 0)
{
int i = 0;
#foreach (var customer in customers)
{
i++;
<tr>
<td>#customer.Customer_Id </td>
<td>#customer.Customer_Name</td>
<td>#customer.Customer_Address</td>
<td>#customer.Customer_Phone_No</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
<span><i class='oi oi-cog'></i></span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="javascript:void(0);" #onclick="()=> EditCustomer(customer.Customer_Id)"><i class='oi oi-task'></i> Edit</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="javascript:void(0);" #onclick="()=> EditCustomer(customer.Customer_Id)"><i class='oi oi-delete'></i> Delete</a></li>
</ul>
</div>
</td>
</tr>
}
}
else
{
<tr><td colspan="5">No Data Found</td></tr>
}
}
</tbody>
public void EditCustomer(int CustomerId)
{
JS.InvokeVoidAsync("OpenModal", "#Mdl_Add_Customer"); // where Mdl_Add_Customer is id of the Modal Div
}
Js Function On Another File as General.js
window.OpenModal = (Model) => {
let model = document.getElementsById(Model)
let __modal = bootstrap.Modal.getInstance(model)
__modal.show();
}
on List Item Edit Action I want Popup To Open... Thanks In Advance

Open the modal like this (add the 'new'):
var modal = new bootstrap.Modal(document.getElementById('modalId'));
modal.show();

Related

How to disable a list item based on condition - ASP.NET C#

I am looking for some advice on the best way to disable two list items based on the account being locked and the value in the state column is equal to 1.
I have a model which generates a random number:
public int IsLocked
{
get
{
var rnd = new Random();
return rnd.Next(0, 2);
}
}
This is my Partial View:
<td class="hidden-xs hidden-sm">
#if (t.IsLocked == 1)
{
<span class="glyphicon glyphicon-lock locked"></span>
}
else
{
<span class="glyphicon glyphicon-ok"></span>
}
</td>
<td class="updateTableRow text-center">
<div class="dropdownContainer btn-group text-right">
<button id="#actionWorkId" type="button" class="btn btn-primary br2 btn-xs fs12 dropdown-toggle songmanagement-btn" data-toggle="dropdown" aria-expanded="false">
Action
<span class="caret ml5"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
<a href="#Url.Action("Recordings", "ArtistAccount", new
{
accountcode = fullAccountCode,
songcode = t.SongId
})" id="#recordingWorkId" data-container="body" data-rowhover="editTableRow" class="js_Recordings">Recordings</a>
</li>
<li>
<a href='#Url.Action("EditSong", "ArtistAccount", new
{
songcode = t.SongId,
accountcode = fullAccountCode,
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending
})' id="#editWorkId" data-container="body" data-rowhover="editTableRow" class="js_EditSong">Edit</a>
</li>
<li>
Delete
</li>
<li>
<a href="#Url.Action("TuneCodes", "ArtistAccount", new
{
accountCode = fullAccountCode,
workCode = t.SongId,
})" id="#tuneCodeId" data-container="body" data-toggle="tooltip" title="Tune Codes" data-rowhover="editTableRow">Tune Codes</a>
</li>
</ul>
</div>
</td>
</tr>
Is there a way using C# and ASP.NET that I could acheieve this?
Solved my issue using the following code:
<li>
#if (t.IsLocked == 1)
{
<a class="isDisabled" data-toggle="tooltip" title="You cannot edit this song until pending writer edits are approved">Recordings</a>
}
else
{
<a href="#Url.Action("Recordings", "ArtistAccount", new
{
accountcode = fullAccountCode,
songcode = t.SongId
})" id="#recordingWorkId" data-container="body" data-rowhover="editTableRow" class="js_Recordings">Recordings</a>
}</li>
<li>
#if (t.IsLocked == 1)
{
<a class="isDisabled" data-toggle="tooltip" title="You cannot edit this song until pending writer edits are approved">Edit</a>
}
else
{
<a href='#Url.Action("EditSong", "ArtistAccount", new
{
songcode = t.SongId,
accountcode = fullAccountCode,
page = Model.PagingInfo.Page,
take = Model.PagingInfo.Take,
sortBy = Model.PagingInfo.SortPropertyName,
sortAsc = Model.PagingInfo.SortAscending
})'
id="#editWorkId" data-container="body" data-rowhover="editTableRow" class="disabled">Edit</a>
}

Passing parameters with dropdown on AngularJS

I'm trying list data according with data choose on a drop down menu.
My service list data with a hardcode (id 6).
var url = 'http://localhost:3854/listarServicosByEstab/' + '6'; // Hardcode!
How do I pass the select item ID to the service?
Dropdown HTML (ng-click doesnt work):
<!-- Combobox -->
<div class="row">
<div class="dropdown" ng-controller="EstabelecimentosPageCtrl">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown_estabelecimentos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Estabelecimentos
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown_estabelecimentos" >
<li>
<a ng-repeat="estab in listaDeEstabelecimentos" href="#" ng-click="$parent.current = item">
{{estab.nomeEstab}}
</a>
</li>
</ul>
Choose Test: {{item}}
</div>
</div>
Menu Controller:
.controller('ListServicoCtrl', function($scope, $state, ListServicoService) {
ListServicoService.listarServicos().then(function(dados){
$scope.listaDeServicos = dados;
}); });
Service:
.service('ListServicoService', function($http){
var url = 'http://localhost:3854/listarServicosByEstab/' + '6'; // Hardcode!
return{
listarServicos : function (){
return $http.get(url).then(function(response){
return response.data;
});
}
}});
<div class="row">
<div class="dropdown" ng-controller="EstabelecimentosPageCtrl">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdown_estabelecimentos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Estabelecimentos
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdown_estabelecimentos" >
<li>
<a ng-repeat="estab in listaDeEstabelecimentos" ng-click="passdata(estab.Id)">
{{estab.nomeEstab}}
</a>
</li>
</ul>
Choose Test: {{item}}
</div>
</div>
Your Controller
.controller('ListServicoCtrl', function($scope, $state, ListServicoService) {
$scope.passdata = function(id){
ListServicoService.listarServicos(id).then(function(dados){
$scope.listaDeServicos = dados;
});
} });
Your Service
.service('ListServicoService', function($http){
return{
listarServicos : function (id){
return $http.get('http://localhost:3854/listarServicosByEstab/' + id).then(function(response){
return response.data;
});
}
}});
Remove href from anchor tag and make a function like I have shown in controller. By assuming that your json contains value like Id I have demonstrated it. Hope this code will work for you.

AngularJS - How to maintain checked ticket ids of a table

I have a table containing next & previous pages. I am able to navigate to next/previous pages using next & previous buttons.
On previous & next page actions on call(controller methods) I am pushing checked ticket ids by pushing in an array $scope.checkedTicketIds
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
HTML code is
<div class="mail-tools tooltip-demo m-t-md">
<div class="btn-group pull-right">
<button ng-click="previousPage()" ng-disabled="previousPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-left"></i></button>
<button ng-click="nextPage()" ng-disabled="nextPageBtnDisabled()" class="btn btn-white btn-sm"><i class="fa fa-arrow-right"></i></button>
</div>
<div class="input-group">
<div class="input-group-btn" dropdown>
<button ng-disabled="ticketsChecked()" class="btn btn-white dropdown-toggle pull-left" dropdown-toggle type="button">{{'ACTIONS' | translate}} <span class="caret"></span></button>
<ul class="dropdown-menu pull-left">
<li ng-repeat="(key, value) in actions"><a ng-click="convertAction(key)">{{key | translate}}</a></li>
</ul>
</div>
</div>
</div>
In controller on clicking previous page button calling method
$scope.previousPage = function() {
angular.forEach($scope.tickets, function(ticket) {
if(ticket.checked) {
$scope.checkedTicketIds.push(ticket.id);
}
});
$scope.ticketsUpdatedQueryCriteria.page = --$scope.page;
Tickets.query($scope.ticketsUpdatedQueryCriteria).then(function(tickets) {
$scope.tickets = tickets.data;
$scope.ticketsPageData = tickets.cursor;
});
};
How to pop/remove id on uncheck & I wanted to maintain checked ticket ids for further bulk actions, like change status of one/more tickets. How can I do this?
I implement an example on jsbin, using an independent checked list.
Please, look at:
http://jsbin.com/rudifa/3/
Hope I help you.

Convert razor enumdropdownlistfor to bootstrap button group dropdown

I have a razor syntax enumdropdownlist for displaying either active/inactive status.
#Html.EnumDropDownListFor(model => model.Status, new { #class = "btn btn-default btn-lg dropdown-toggle" })
I want to use a button group drop down with glyphs like I have below but don't know how to get my model value 'model.Status' to set the value of the button group drop down.
$(document).ready(function() {
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li id="item1">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active
</li>
<li id="item2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed
</li>
</ul>
</div>
I don't care if I use html or razor, I just want to use the boostrap button drop down with glyphs and I want to be able to set the enumerated view model value active/inactive (Status) when the page loads.
Although the Bootstrap dropdown buttons look similar to a select list, their functionality is vastly different. I wouldn't recommend trying to use a Bootstrap dropdown button as a replacement for a select list if you need to actually post the "selected" item.
If you're just looking for a more stylistic and visually appealing alternative to a traditional select control, take a look at something like Select2, and while the look is pleasant enough out of the box, there's also a project that styles it to fit even better with the rest of Bootstrap.
If you're dead set on using Bootstrap dropdown buttons, you've got a lot of work ahead of you. You'll need to set up some JavaScript that will read the information from the select element and dynamically create the Boostrap dropdown button based on that, while hiding the original select. Then, you'll need to map over all the events such as a click on one of the items in the dropdown so that it selects the same item in the actual select element. You'll also have to account for highlighting the item in the dropdown that corresponds with the selected option in the select list, etc. If you run into specific problems while writing all that code, you can ask additional questions here as necessary, but providing you with all the code you'll need here is far beyond the scope of StackOverflow.
You can try to enumerate through enum values and put them in page, please notice the Html.HiddenFor from the end, we will use it to store the selected Status.
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
#{
var values = Enum.GetValues(typeof(Status));
for(int i=0; i < values.Count; i++)
{
var status = (Status)values[i];
<li id="item#(i+1)" class="select-status" data-status="#values[i]">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>#status.ToString()
</li>
}
}
</ul>
</div>
#Html.HiddenFor(model => model.Status)
After we create the html we have to update the selected Status in Html.HiddenFor to persist when a POST is performed.
$(document).ready(function() {
$('.select-status').click(function(){
$('#Status').val($(this).data('status')); // update the status in hidden input
});
#for(int i=0; i < values.Count; i++)
{
<text>
$('#item#(i+1)').on('click', function() {
$('#item0').text('#status.ToString()');
});
</text>
}
});
HTML snippet example:
$(document).ready(function() {
$('.select-status').click(function(){
$('#Status').val($(this).data('status')); // update the status in hidden input
});
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="btn-group">
<button id="item0" type="button" class="btn btn-default">Action</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li id="item1" class="select-status" data-status="1">
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>Active
</li>
<li id="item2" class="select-status" data-status="2">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Not Listed
</li>
</ul>
</div>
<br />
Visible Status just for test
<input type="text" id="Status" value="1" />
Note: The code may have some errors but the logic/flow is the same.
In .cshtml file
<script>
myModelStatus = '#Model.Status';
</script>
#Html.EnumDropDownListFor(model => model.Status, new { #class = "btn btn-default btn-lg dropdown-toggle" })
more html here...
In your js file
$(document).ready(function() {
var status = myModelStatus;
$('#item1').on('click', function() {
$('#item0').text('Active');
});
$('#item2').on('click', function() {
$('#item0').text('Not Listed');
});
});
You are listening for click events on the li element rather than on the anchor tag
You should stop event propagation by using event.preventDefault() method.

Triggering multiple mailto links with jquery

I'm starting to think that this may not even be possible, but I'm trying to automate a backend management task for myself here by allowing multiple emails to be initiated at once.
I have a table with users. The last column of the table has a drop-down button with mailto links that initiate various emails to the user for that row. The column also has a checkbox next to the button. Here's a simplified snippet:
<table>
<tr>
<td>
User
</td>
<td>
<div class="btn-group individual-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email User
<ul class="dropdown-menu">
<li>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you open?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you click?
</a>
<a class="no-open" href="mailto:user?subject=why&body=etc">
Why didn't you pay?
</a>
</ul>
</div>
<input type="checkbox" class="selected-row">
</td>
</tr>
<tr>
rinse and repeat...
At the end of the table I have a button with the same set of actions but the idea for this button is that clicking it will open an email for every selected user (as indicated by the checkbox).
<div class="btn-group master-btn">
<a class="btn btn-default dropdown-toggle" href="#" data-toggle="dropdown">
Email All Checked Users
<ul class="dropdown-menu">
<li class="email-items">
<a class="no-open" href="#">
Why didn't you open?
</a>
<a class="no-open" href="#">
Why didn't you click?
</a>
<a class="no-open" href="#">
Why didn't you pay?
</a>
</ul>
</div>
I thought the js might be this easy:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").prev(".individual-btn").find(linkClass)[0].click();
e.preventDefault();
});
But that only opened an email for the first selected row. So, I thought, well maybe the dom needs space between these clicks, so I'll iterate over each and put a delay in to simulate clicks; but same result: only the first selected row is emailed:
$(".master-btn .email-items a").click(function(e){
linkClass = "a." + $(this).attr("class").trim()
$(".selected-row:checked").each(function(i){
var self = this
setTimeout(function(){
$(self).prev(".individual-btn").find(linkClass)[0].click();
}, 2000*i);
});
e.preventDefault();
});
Any thoughts? Will the browser even allow this?
Working example: https://jsfiddle.net/gaboom/h81qov5g/
$("#send").on("click", function(event) {
event.preventDefault();
$("#iframes").empty();
$("#links a").each(function() {
setTimeout($.proxy(function() {
var popup = window.open($(this).attr("href"))
setTimeout($.proxy(function() {
this.close();
}, popup), 100);
}, this), 100)
})
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="send" href="#">CLICK TO SEND</a>
<div id="links" class="hidden">
John
Sarah
John
Sarah
John
Sarah
</div>
I think this is the fix:
$(".selected-row:checked").prev(".individual-btn").find(linkClass).each(function() {
$(this)[0].click();
});
When you use [0] on a jQuery object, it only returns the first DOM element in the collection, equivalent to .get(0). If you want an array of all DOM elements, you would have to use .get() (with no arguments it returns all the elements).

Categories

Resources