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...
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 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.
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 created an ASP.NET Web Application (webforms) using visual studio 2013. bootstrap has been created and working properly.
my plan is to show a modal dialog which work perfectly as below using data-target attribute:
<div id="confimDialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Your request has been submitted successfully.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
<asp:Button runat="server" Text="Submit" data-target="#confirmDialog" />
When I moved to the next step to show the confirmation from code behind, after executing some update in my database, the modal dialog never showed up:
protected void Submit_Click(object sender, EventArgs e)
{
//my database codes here
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "script", "Confirm();", true);
}
and for sure I added the following script to my aspx page:
<asp:Button runat="server" Text="Submit" CssClass="btn btn-primary" OnClick="Submit_Click" />
<script>
function Confirm () {
$('#confirmDialog').modal('show');
return true;
};
</script>
I spent two days in this problem without any solution... I saw that there are some problem in showing a modal dialog from code behind, while many people say it's working using this codes.
could you please help in this or propose any alternative solution to show a confirmation dialog from code behind???
references:
bootstrap modal problem in code behind
thanks.
I figured out that if you move this two lines to the top ( inside the header ) it works,
<script src="https://code.jquery.com/jquery.js"></script>
<script src="Scripts/bootstrap.js"></script>
most of the people recommend put this two lines at the end, before the body ends, but I moved them to the header and it works.