EDIT: I noticed that when i click the button inside the modal then the mandatory popup shows and does not allow to go on.
i need to use the bootstrap modal to add some details about some authorization. So, i have a cshtml page with some fields required and a button which open the modal. But, when i click the button, the modal shows up even if the fields are empty. How can i solve this?
Button code:
<div class="col-sm-2"><input type="submit" value="#Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" /></div>
Modal (which is not the one i'll use, i put this in my cshtml only for tests):
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Login</button>
</div>
</div>
</div>
</div>
This is the graphic result:
As you can see, the alert that the fields are mandatory pops up, but practically they may also not be entered.
The idea that i had is to open the modal by JS only if all the required fields have been filled. But i want to know if there is a more elegant way to do it.
Thank you.
Prevent the model before validation using below code,
Html:
<input type="text" id="txt_name" /><button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
Jquery:
$('#myModal').on('show.bs.modal', function (e) {
var button = e.relatedTarget;
if($("#txt_name").val().length==0) {
e.stopPropegation();
}
});
I think the type attribute in your button code is the cause of the problem.
Try changing the value "submit" to "button".
Related
Already figured out the issue, but I assume someone else will encounter something similar.
I tried adding an Html.BeginForm to a modal in both the main view and in a partial view.
#model ViewModel
#using (Html.BeginForm("Category", "Home", FormMethod.Post))
{
<!-- Modal -->
<div class="modal fade" id="categoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="confirmModalLabel">Select Category</h4>
</div>
<div class="modal-body">
<div class="form-group">
#Html.CheckBoxFor(x => x.Something)
<label>Something</label>
</div>
<div class="form-group">
#Html.CheckBoxFor(x => x.SomethingElse)
<label>Something Else</label>
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-success" data-dismiss="modal" value="Save" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
}
So, it is a basic form setup and all looks good. What I encountered was the data-dismiss="modal" tag in my 'submit' button kept the form from submitting.
I just removed that and all worked well. Took way too long to figure out suck a simple issue.
Here's how the button should look:
<input type="submit" class="btn btn-success" value="Save" />
I have a program where the user can delete a line from a text file, however, before deleting, i would like for there to be a confirmation modal where the user can double check that he/she is deleting the correct line. However, my modals id does not seem to be linking with the data toggle of the button responsible for bringing up the modal?
Button to bring up modal:
<button class="btn" data-toggle="modal" data-target="#dataLine.Split(Model.CategoryList.delimiterChar)[1]" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]">Delete</button>
To provide additional context; "#dataLine.Split(Model.CategoryList.delimiterChar)[0]" is a part of the line within the text file, i am using this in order to be able to tell which line needs to be deleted.
Below is my modal, where i am using the same id value as the data toggle above:
<div class="modal" id="#dataLine.Split(Model.CategoryList.delimiterChar)[1]" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>#dataLine.Split(Model.CategoryList.delimiterChar)[0]</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="location.href = '#Url.Action("DeleteCategoryLine", "Index", new { id = dataLine.Split(Model.CategoryList.delimiterChar)[1] })'">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
Is it even possible to use data toggle and id in the way i have above?
Why are you setting the id with the selected line of your text file? What if your text line has spaces? Give a static id-name and refer it in data-target since this popup is not dynamically generated as per my understanding. Your objective will be achieved inside modal body, which is to show what line is deleted
I'm Developing an ASP.NET Core web application & stuck in a problem regarding the Bootstrap dialog modal. I just want to load a partialView into a dialog modal on a button click & have implemented it in the code. But the problem is Dialog modal is not getting appear, instead page gets refreshes with instant dark splash.
It is very strange, because I have implemented modals previously too.
Here is my code in View.cshtml
#{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewData["Title"] = "Create";
}
<div class="content-wrapper">
<section class="content">
<div class="col-md-12">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Add Queue</h3>
</div>
<form asp-action="Create">
<div class="box-body">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group col-md-6">
#* ....... *#
</div>
<div class="form-group col-md-6">
#* ...... *#
</div>
<div class="form-group col-md-6">
#* ...... *#
#* ---- button that triggers the modal ---- *#
<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button>
</div>
<div class="form-group col-md-6"></div>
</div>
<div class="box-footer">
<input type="submit" value="Next" class="btn btn-primary" />
<input type="reset" value="Clear" class="btn btn-warning" />
</div>
</form>
</div>
</div>
</section>
</div>
#* ------- modal div ---------- *#
<div id="adHocAdd" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Create a New Menu</h4>
</div>
<div class="modal-body">
#**Load View*#
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Any help is welcome.
The problem seems to be due to your button is within the <form> tag. In ASP.NET I also have experienced this problem.
To overcome the problem you can add type="button" inside your <Button> tag & run the code. so your full code for button will be looks like following.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#adHocAdd">Add New</button>
According to my point of view, this problem is due to triggering of form submission on the button click which launches the model.
For further understanding purpose refer here (dotnetfiddle.net).
There are 2 buttons, one with same as in above problem, & other button is with type="button" respectively.
Button without type="button" will appear & get disappear within seconds. But other one will remain as normal.
A button inside a form will always act as submit if nothing is specified. So either you keep the form inside the model body or remove the model from the form and keep it outside of it.
Here the button is not only triggering the Model but is also submitting the form. So before your model appears, you are doing the post.
I have a Login & Register Boostrap Modal on my MasterPage.
The code is simple and works. The problem comes when user make an invalid use.
I have all validations on code behind, when user hit Login i need if its invalid, a Label show the error and popup keep alive. My Popup close everytime user hit Login, its ok or not. I tested some similar scenary in Content Pages, with registerstartupclient to call a function ShowModal, that reopen the modal. But i cant do that on MasterPage. So how can i validate input data and show a label without close the popup.
Im running Modal on Form Tag from Body because MasterPages dont allow more than one.
My Project is ASP.Net C# WebForms.
<div id="logmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal contenido-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><i class="fa fa-user-circle"> </i> Login</h4>
</div>
<div class="modal-body">
<%--<form id="Conectar">--%>
<div class="form-group">
<input type="text" id="txtUsuario" class="form-control" runat="server" placeholder="Usuario Web"/>
</div>
<div class="form-group">
<input type="password" id="txtPassword" class="form-control" runat="server" placeholder="Password"/>
</div>
<div class="form-group">
<asp:Button ID="Button1" runat="server" Text="LOGIN" CssClass="btn btn-default" OnClick="Button1_Click" />
</div>
<%--</form>--%>
<asp:Label ID="LblErrors" runat="server" Text=""></asp:Label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >Cerrar</button>
</div>
</div>
</div>
</div>
I have a table that lists users. I have a details link on last column. Link opens a modal that calls partial view. I used a static id (JohnSmith) and it works with below code.
Table row:
<td>
<a data-target="#modalDetay" data-toggle="modal" data-id="#item.UserName">
<i class="glyphicon glyphicon-eye-open"></i>
<span class="sr-only">Details</span>
</a>
</td>
Modal at the bottom of page:
<div id="modalDetay" class="modal fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-body">
#Html.Action("PartialDetay", "ActiveDirectory", new { id = "JohnSmith" })
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
<button type="button" data-dismiss="modal" class="btn blue">Continue</button>
</div>
</div>
I want to pass -row- data-id to id in #Html.Action. How can i do that?
Btw, i read lots of similar question but all answers include Jquery. I'm asking similar but looking for different answer. Isn't it possible without Jquery?