I am having a problem with my bootstrap modal displaying inline with the html on the homepage of my site(AKA it is not invisible, it shows on the page). I have open sourced this project, so it is available here to view:
AdHoc Reporting Engine
This is a weird problem which suddenly popped up when I added panels to the page.
The following is my modal's code:
<!-- Placing excel upload modal here... -->
#using (Html.BeginForm("UploadExcel", "Home", FormMethod.Post, new { enctype = "multipart/form-data", #class = "form-horizontal" })) {
<div class="modal fade" id="excelModal" 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">Excel Upload</h4>
</div>
<div class="modal-body">
<p>Please upload an excel file that contains the data you are wishing to include in the report parameters.</p>
</div>
<div class="modal-footer">
<div>
<div class="form-group">
#Html.Label("Excel File:", new { #class = "control-label col-md-2" })
<div class="col-md-10">
<input id="excelFile"
name="excelFile"
type="file" />
<button class="btn btn-primary"
type="button"
ng-click="ExcelUpload()">
Submit
</button>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
The project is now open sourced, so you can download the whole thing. You will just have to know how to set up an instance of OracleXE, the learner's (free) edition. The project itself is a form of reporting engine, difference being that the user actually has to browse out to it in order to get their report.
You must call $('#excelModal').modal() at some point so the logic to turn it into a modal fires.
You just need to pass it an option to hide the modal until you show it via some event:
$('#excelModal').modal({
show: false
})
Correct me if I'm wrong but i'm not actually seeing where you hide the modal as default. It is my understanding that modals are not hidden by default. To the HTML compiler you are just making a regular modal that is shown to the user on page load.
Something like:
<div class="modal fade" id="excelModal" role="dialog" aria-hidden="true">
or
<div class="modal fade" id="excelModal" role="dialog" hidden="true">
aria-hidden means:
ARIA (Accessible Rich Internet Applications) defines a way to make Web content and Web applications more accessible to people with disabilities.
per: What's the difference between HTML 'hidden' and 'aria-hidden' attributes?
And then to show the modal with jquery would be
$("#excelModal).modal('show')
Please let me know if I am wrong and you are hiding the modal. Or if there is a better way to hide and show modals. I'm learning too.
Related
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
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".
I'm attempting to migrate some code from WPF to Blazor. The WPF code relied on ShowDialog() to display a modal dialog and suspend execution until the modal was closed. Is there a (server-side) Blazor equivalent that allows C# flow of control to be based, for example, on whether the user clicked Acknowledge vs Cancel in a modal dialog?
You can add a button
<button class="btn btn-primary"
#onclick="AddNewForecast">
Add New Forecast
</button>
That calls a method that sets a value to be true
bool ShowPopup = false;
void AddNewForecast()
{
// Open the Popup
ShowPopup = true;
}
And that value is wrapped around code that uses the bootstrap modal control (class="modal"):
#if (ShowPopup)
{
<!-- This is the popup to create or edit a forecast -->
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Edit Forecast</h3>
<!-- Button to close the popup -->
<button type="button" class="close"
#onclick="ClosePopup">
<span aria-hidden="true">X</span>
</button>
</div>
<!-- Edit form for the current forecast -->
<div class="modal-body">
<input class="form-control" type="text"
placeholder="Celsius forecast"
#bind="objWeatherForecast.TemperatureC" />
<input class="form-control" type="text"
placeholder="Fahrenheit forecast"
#bind="objWeatherForecast.TemperatureF" />
<input class="form-control" type="text"
placeholder="Summary"
#bind="objWeatherForecast.Summary" />
<br />
<!-- Button to save the forecast -->
<button class="btn btn-primary"
#onclick="SaveForecast">
Save
</button>
</div>
</div>
</div>
</div>
}
You will have a popup that is "modal"
The best way to port a WPF or WinForms application to Blazor is to use Nevron Open Vision for Blazor:
https://www.nevron.com/products-open-vision.aspx
It allows you to develop User Interfaces that run on Blazor and WPF/WinForms from a single code base! No HTML or JS knowledge is required either - you simply code your UI in C#.
Right now, there is no out-of-the-box equivalent like in WPF.
But some good documentented samples regarding this:
https://www.telerik.com/blogs/creating-a-reusable-javascript-free-blazor-modal
https://www.syncfusion.com/blazor-components/blazor-modal-dialog
The only question for me is how to animate this kind of Dialog, e.g. with fly in / fade in animation and such things...
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 MVC5 application using C#, jQuery and Select2 v3.5.2, together with Bootstrap 2.3.2.
Now I am new to the select2, so I am having some trouble. For example, I want a text box with multiple items, as seen in the example of Tagging support.
Now, this shouldn't be hard, but the problem is that I need to update those values dynamically in a Bootstrap modal, using jQuery, after making an Ajax call to the server.
It sounds complex, but it is simple. When a user clicks a button to Edit an item, I show a Bootsrap modal, with the information of that item, after querying the server for the information on that item:
//Show Edit Package modal
$("a.btn.btn-default.editPackage").click(function () {
//ask the server for item information
$.ajax({
url: $(this).data('url'),
type: 'get',
cache: false,
success: function (result) {
//this input field belongs to the modal
$(input #SubCategoryId).attr('data-edit-values', '13 - Orange');
$('#myModal').show();
}
});
return false; //prevent browser defualt behavior
});
And here is the Modal (mostly boiler plate code):
<div class="modal fade" id="#Model.modalId" tabindex="-1" role="dialog" aria-labelledby="#Model.modalId" aria-hidden="true">
<div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">#Model.modalTitle</h4>
</div>
<div class="modal-body" data-val="#Model.packageId">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label">Select the Function:</label>
<div class="controls">
<input class="select2s" data-edit-values="#Model.functionsString" data-o2f-placeholder="Select Employee Function..." data-o2f-url="#Url.Action("FunctionsMultiple", "Home")" data-val="false" id="SubCategoryId" name="SubCategoryId" multiple="multiple" type="text"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" id="#Model.saveButtonId" data-url="#Model.saveButtonUrl">#Model.saveButtonText</button>
</div>
</div>
</div>
</div>
The problem is that when I load the popup, the values on the field are not loaded.
What am I doing wrong in my javaScript?
To update the value of a select2 field in any modal I realized I had to use a special function from select2 for the effect: $('#fieldId').select2('data', "blablablaMyData");