We Keep Coding

How to move the focus to another element using the tab key

I faced a problem. I have a modal window with close, cancel and submit buttons. For example, when I click on the close button and try to use the tab key to get the next element, the focus immediately switches to the footer, but not the next element. I need to make the focus after pressing the close, submit or cancel button go to the next item (Open Calculator)
Code for modal
<div id="special-needs-consent-form" class="modal" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg animated zoomIn animated-3x" role="document">
<div class="modal-content">
<div class="modal-header" aria-label="#SpecialNeeds.ConsentForm">
<h3 class="modal-title">#SpecialNeeds.ConsentForm</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="#Buttons.Close" onclick="removeCheckedSpecialNeeds()"><span aria-hidden="true"><em class="zmdi zmdi-close"></em></span></button>
</div>
<div class="modal-body">
<div>
<div class="modal-footer" aria-label="#Everything.ConsentFooter">
<button type="button" class="btn btn-primary btn-raised" data-dismiss="modal" onclick="removeCheckedSpecialNeeds()">#Buttons.Cancel</button>
<button id="consent-submit-btn" type="button" class="btn btn-primary btn-raised">#Buttons.Submit</button>
</div>
code for The element to focus on after clicking the close submit or cancel button
<div class="radio-primary col-lg-12">
#if (RBBConfiguration.CurrentConfig.EnableFeeSubsidyExternalUrl)
{
<a class="button" target="_blank" href="#(Model.FeeSubsidyExternalLink)" tabindex="0">#Model.FeeSubsidyExternalLinkText</a>
}
else
{
<a data-toggle="collapse" data-target=".subsidy-calculator:not(.show)" id="feeCalculator" class=" ml-4" tabindex="0">#Everything.OpenFeeCalculator</a>
}
</div>
I tried to use tabindex = (1, 2, 3 etc.) elements, but it is not working correctly

use a simple onkeydown method:
let counter = 0;
document.body.onkeydown = (ev) => {
ev.preventDefault()
if (ev.key == "Tab") {
if (counter % 2 == 0) {
//focus on input
document.querySelector("#key").focus();
document.querySelector("p").style.color = "";
} else {
//"focus" on paragraph
document.querySelector("#key").blur();
document.querySelector("p").style.color = "red";
}
counter++;
}
}
<input id="key">
<p>hello</p>
click on the window and click on the tab
I recommend to study this table:
enter image description here

Pass Function as a parameter in ASP.NET Core MVC Blazor

I am using Bootstrap 5 modal in my ASP.NET Core 6 project to show alert messages.
I want to generalize the code and use it in different .razor components of my ASP.NET Core MVC app.
Here is the code of my message.razor component:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">ALERT !</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Are You Sure You Want To Delete ?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" #onclick="Function" data-bs-dismiss="modal" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
At onclick function I want to pass the delete function with parameter, like this
#onclick="(e => OnDelete(emp.TypeOfId))"
to the message.razor component from another .razor component.
<MessageComponent Function="OnDelete(emp.TypeOfId)"></MessageComponent>

You can add an Action parameter to the MessageComponent that will be called when the button is clicked:
<button #onclick="Function">Button</button>
#code {
[Parameter] public Action Function { get; set; }
}
Then from the parent you can pass the parameter like this:
<MessageComponent Function="#(() => OnDelete(emp.TypeOfId))"></MessageComponent>

PartialView is returning fullpage, only rendering the form

I'm trying to rerender the partialview ONLY in my modal, after the ajax request.
But when I get the response everything is rerendered and the only thing showing is the partialview..
PartialView:
#{
var bidModel = new BidModel();
}
<div>
<div class="row">
#if (ViewBag.Message != null)
{
<div class="alert alert-success">#ViewBag.Message</div>
}
</div>
<span class=" alert-danger">
#Html.ValidationSummary()
</span>
<div class="form-group">
<input name="Bidder" asp-for="#bidModel.Bidder" value="#User.Identity.Name" type="hidden" />
<input name="AuctionId" asp-for="#bidModel.AuctionId" type="hidden" id="auctionId" />
<label asp-for="#bidModel.Amount" />
<input name="Amount" asp-for="#bidModel.Amount" />
</div>
</div>
Controller:
public async Task<IActionResult> AddBid(BidModel Bid)
{
var result = await _bidBusinessInterface.CreateBidAsync(Bid, Bid.AuctionId);
if (result)
{
ViewBag.Message = "Bud lagt!";
}
else
{
ViewBag.Message = "Bud förlågt!";
}
return PartialView("_BidCreatorPartial");
}
And then we have the modal where i want to rerender the partialview:
<div class="modal fade" id="bidModal" tabindex="-1" role="dialog" aria-labelledby="bidModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="bidModalLabel">Lägg bud</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-action="AddBid" asp-controller="Home" method="POST" data-ajax="true" data-ajax-update="frmBid">
<div id="frmBid">
<partial name="_BidCreatorPartial" model="#bidModel"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Avbryt</button>
<button type="submit" class="btn btn-primary">Spara</button>
</div>
</form>
</div>
</div>
</div>
</div>
As I said, what I want to accomplish is to rerender the form, so that the message can be shown in the modal.
What happens is it renders a whole white page with only the form and the message.

You didn't actually post your form itself, but my best guess is that you're just doing a standard old HTML form post. That's always going to cause the page to change, and then since you're only returning a partial view, and not a full view, your page gets replaced with just that snippet of HTML.
What you want requires AJAX. You need to catch the submit event on the form, and instead of letting it go as normal, you make an AJAX request with the form data serialized. Then, in the success callback of your AJAX request, you'll need to query the element you want to replace the HTML of from the DOM and change its innerHTML value to what's returned from the AJAX request.
Since an ASP.NET Core project comes with jQuery out of the box, I'm going to assume you can use that:
$('#MyForm').on('submit', function (e) {
e.preventDefault();
var $form = $(this);
$.ajax({
url: $form.attr('action'),
method: 'post',
data: $form.serialize(),
success: function (html) {
$('#frmBid').html(html);
}
});
});

MVC - Multiple Modals of Dynamyc Content?

I have a best practice question. I have a page with many chat rooms.
When you click on a chat room a modal prompts asking for a nickname and VIA post gets the information and takes you to the room.
The questions is, I have multiple rooms so I have one modal:
#using (Html.BeginForm("DebateV2", "Home", FormMethod.Post)){
#Html.AntiForgeryToken()
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header modal-header-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 id="modalTitle">
<span class="glyphicon glyphicon-lock pull-left"></span> #Resources.IngresoALaGrieta
</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<form role="form">
<div class="form-group">
<label for="Nickname"><span class="glyphicon glyphicon-user"></span> #Resources.ElejiNombre</label>
<input type="text" class="form-control" id="Nickname" name="Nickname" placeholder="#Resources.ElejiNick">
</div>
<input type="hidden" id="Debate" name="Debate" />
<input type="hidden" id="Team" name="Team" />
<button type="submit" id="connect" disabled="disabled" class="btn btn-success btn-block"><span class="glyphicon glyphicon-fire"></span> #Resources.Entrar</button>
</form>
</div>
</div>
</div>
</div>
}
And when the button is clicked it appends some information about the chatroom to the modal form, like this:
$('.open-modal')
.each(function() {
var $this = $(this);
$this.on("click",
function() {
$("#Debate").val($(this).data('debate'));
$("#Team").val($(this).data('team'));
$("#modalTitle").val($(this).data('titulo'));
$('#myModal').modal('show');
});
});
Now I want to send some information via QUERYSTRING so I have in the browser address the name of the room like this:
www.debates.com/debate?debate=debate-name
what is the best practice to do that? I am really lost.

Center align button with bootstrap

I am getting stuck about aligning some buttons on line and all centered with bootstrap.
I have created the following bootply sample.
Why do the buttons stack vertically and not horizontally?
Also, I have to mix simple buttons with code like the following
#Html.ActionLink( "REGISTER", "LoginRegister", "Account", new { LoginTabActive = false, RegisterTabActive = true }, new { #class = "btn btn-primary btn-lg center-block" } )
which generates the following markup
REGISTER
In this case the button will expand to occupy all the horizontal space.

Just add Bootstrap's text-center class to your menuArea div.
BOOTPLY
HTML:
<div class="menubar" style="background-color: #0055b8; color:#ffffff; height: 30px;">
<h3 class="text-center">menu bar title</h3>
</div>
<div class="text-center">
<a data-toggle="collapse" href="#topMenu" aria-expanded="false" aria-controls="topMenu">
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<div class="collapse" id="topMenu">
<div class="menuArea text-center">
<button id="mybutton" name="mybutton" class="btn btn-primary btn-lg">1</button>
<button id="mybutton2" name="mybutton2" class="btn btn-primary btn-lg">2</button>
<button id="mybutton3" name="mybutton3" class="btn btn-primary btn-lg">3</button>
</div>
</div>

Here you go, you need to add "text-center" to your menuArea div, and remove the "center-block" from each button element.
http://www.bootply.com/wpAjCqxV3c