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?
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 little bit new in web development. I have an application with many Index sites which display list with elements. These elements are deletable with a HtmlAction. I want to make a generic? modal which appear when the user has clicked the button. This modal request a confirmation from user to delete the selected element from list. If I'm right I have to pass some data to this modal e.g. (which controller, which action, which elementId). Somehow can I create a parameterized modal? Can you give me some startpoint for this?
<div class="row ">
<div class="card">
<table class="table">
<tr>
<td>
<h5>#Html.DisplayNameFor(item => item.SupplyTypeName)</h5>
</td>
<td></td>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.SupplyTypeName)
</td>
<td>
<i class='material-icons'>
#Html.ActionLink("mode_edit", "Edit", new { id = item.Id })
</i>
<i class='material-icons' data-toggle="modal" data-target="#myModal">
*
</i>
</td>
</tr>
}
</table>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Delete Confirmation</h4>
</div>
<div class="modal-body">
Are you sure want to delete this item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
Without writing JavaScript you have to create own modal for every row. Also it's nice to show user something related to row in modal so user knows they clicked delete for correct row.
If you plan to use JavaScript then simplest is to add click event handler and show browsers own confirm popup with confirm function then cancel event if they don't click ok. Like Delete
If you write JavaScript for Bootstrap modal you need add your own click event handler that gets data attributes of delete button and patches (maybe sets id for url where confirm button posts) modal using that data before showing it.
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>