How to call a function from code behind when the save changes is clicked by the user?
<div class="container">
<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog">
<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">Warning you're going to delete a data</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to continue?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes </button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</div>
something like this
protected void deleterecord(){
}
In MVC you can do this by sending request to controller's action like
#Html.ActionLink("Save Changes", "DeleteRecord", null, new { #class="btn btn-primary" })
or
<input type="button" value="Save Changes" class="btn btn-primary"
onclick="location.href='#Url.Action("DeleteRecord", "MainController")'" />
and add action in controller
public ActionResult DeleteRecord()
{
this.deleterecord();
return View();
}
In Web Forms you can append event handler on button click event
<asp:Button
ID="Button_Save"
runat="server"
Text="Save Changes"
CssClass="btn btn-primary"
OnClick="Button_Click" />
or
<input type="button" value="Save Changes" runat="server" class="btn btn-primary"
onclick="Button_Click" />
and add code behind handler for this event
protected void Button_Click(object sender, EventArgs e)
{
this.deleterecord();
}
You can try this in your web form with a button called btnSave for example:
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="javascript:SaveWithParameter('Hello Michael')">Close</button>
<script type="text/javascript">
function SaveWithParameter(parameter)
{
__doPostBack('btnSave', parameter)
}
And in your code behind add something like this to read the value and operate upon it:
public void Page_Load(object sender, EventArgs e)
{
string parameter = Request["__EVENTARGUMENT"]; // parameter
// Request["__EVENTTARGET"]; // btnSave
}
Related
I want to delete a record from table and I sent CategoryId with this code:
Main view :
<a data-toggle="modal" data-target="#Deletemodal" onclick="Func_LoadPv('#item.CategoryId')" class="btn btn-danger btn-xs">delete</a>
function Func_LoadPv(Cid) {
$.get("/AdminPanel/Category/ShowPartialView?CategoryId=" + Cid, function (res) {
$("div.modal-body").append(res);
});
}
Controller :
public IActionResult ShowPartialView(Guid CategoryId)
{
return PartialView("_DeleteMainCategory", CategoryId);
}
How can I get this value that is sent from the controller to the partial Modal?
And the problem I have is that the modal only opens once ?
How can I get this value that is sent from the controller to the partial Modal?
You can specify a model for your partial view _DeleteMainCategory.cshtml, like below.
#model Guid
<h1>DeleteMainCategory Partial View</h1>
#*content here*#
<h2>#Model</h2>
the problem I have is that the modal only opens once
The following sample with testing data work well for me, you can check and compare it with yours.
<table>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #rowCount</td>
<td>#item.CategoryTitle</td>
<td>#item.IconCategory</td>
<td>
<a data-toggle="modal" data-target="#Deletemodal" title="delete"
class="btn btn-danger btn-xs" onclick="Func_LoadPv('#item.CategoryId')">delete</a>
</td>
</tr>
}
</tbody>
</table>
<div id="Deletemodal" 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">Modal Header</h4>
</div>
<div class="modal-body">
#*modal body here*#
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section scripts{
<script>
function Func_LoadPv(Cid) {
$.get("/AdminPanel/Category/ShowPartialView?CategoryId=" + Cid, function (res) {
$("div.modal-body").html(res);
});
}
</script>
}
Test Result
I solved
Modal :
<div id="deletemodal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">delete category</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div id="bodyModal" class="modal-body">
</div>
</div>
</div>
JQuery :
function DeleteCategory(id) {
$.ajax({
url: "/AdminPanel/Category/DeleteCategory/" + id,
type: "Get",
data: {}
}).done(function (result) {
$('#deletemodal').modal('show');
$('#bodyModal').html(result);
});
}
Controller :
public IActionResult DeleteCategory(Guid? id)
{
return View();
}
[HttpPost]
public IActionResult DeleteCategory(Guid id)
{
_admin.DeleteMainCategory(id);
return RedirectToAction("ShowMainCategory", "Category");
}
Partial View :
<form asp-action="DeleteCategory" class="form-padding">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<h5 class="text-center">Are You Sure ?</h5>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info waves-effect">delete</button>
<button type="button" class="btn btn-danger waves-effect"
data-dismiss="modal">
cancel
</button>
</div>
In my loop I'm creating a table from the model with a loop but when I use my delete function it returns back an array of all ID's instead of the singular clicked.
<tbody id="itemTable">
#foreach (var item in Model.tableItems)
{
<tr>
<td id="idRow">#item.ID</td>
<td>#item.MemberName</td>
<td>#item.Details</td>
<td>#item.StatusDesc</td>
<td class="justify-content-center">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notesModal-#item.ID">
<i class="fas fa-plus fa-2x"></i>
</button>
<button type="button" class="btn btn-danger" id="showDeleteModalBtn" data-toggle="modal" data-target="#deleteModal-#item.ID" data-show="true">
<i class="fas fa-trash-alt fa-2x "></i>
</button>
<!---------------------- DELETE MODAL------------------------------------------>
<div class="modal fade" id="deleteModal-#item.ID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="titleLabel">Are you Sure?</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div>#item.ID</div>
where I am assigning the ID
<input type="hidden" name="ID" id="itemID-#item.ID" value="#item.ID" asp-for="ID" />
<label class="form-text text-muted">Delete for #item.MemberName ?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger">Delete<i class="fas fa-trash-alt ml-2"></i></button>
</div>
</div>
</div>
</div>
}
And here is what its returning.
Maybe because your modal is inside the for loop?
Answer: My Form was submitting all I had to re arrange the form to submit only the model in the loop instead of capturing all.
<tbody id="dissatTable">
#foreach (DissatisfactionTableModel item in Model.tableItems)
{
<tr>
<td>#item.ID</td>
<td>#item.MemberName</td>
<td>#item.Details</td>
<td>#item.StatusDesc</td>
<td class="justify-content-center">
<form action="/Dissatisfactions/DeleteDissat" method="post">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#notesModal">
<i class="fas fa-plus fa-2x"></i>
</button>
<button type="button" class="btn btn-danger" id="showDeleteModalBtn" data-toggle="modal" data-target="#deleteModal-#item.ID" data-show="true">
<i class="fas fa-trash-alt fa-2x "></i>
</button>
<!---------------------- DELETE MODAL------------------------------------------>
<div class="modal fade" id="deleteModal-#item.ID" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="titleLabel">Are you Sure?</h3>
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input id="dissatID" type="text" name="ID" value="#item.ID" asp-for="ID" />
<label class="form-text text-muted">Delete Dissat for #item.MemberName ?</label>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" onclick="">Delete<i class="fas fa-trash-alt ml-2"></i></button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
}
</tbody>
I have a problem: how can I hide some buttons and make them visible when another button is clicked? I am using Blazor and ASP.NET Core, and I have seen several examples but they are in Javascript and jQuery but not in C#.
This is the button that will execute the event to show the buttons:
<button class="btn btn-dark" #onclick="GuardarCotizacion"><i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar Cotización</button>
These are the buttons that I want to have hidden are inside a dropdown:
<div class="box-footer">
<div class="pull-right">
<div class="btn-group">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item" type="button" #onclick="#DescargarPDF"><i class="oi oi-envelope-closed"></i> Descargar Cotización</button>
<button class="dropdown-item" type="button"><i class="oi oi-eye"></i> Ver Correo</button>
</div>
</div>
</div>
<button type="button" class="btn btn-outline-info" #onclick="#AgregarProducto"><i class='fa fa-plus'></i> Agregar productos</button>
</div>
</div>
<div class="btn-group">
<div class="btn-group">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Facturación</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
#if (isFacturado)
{
<button class="dropdown-item" type="button"><i class="oi oi-eye"></i> Ver Factura</button>
}
else
{
<button class="dropdown-item" type="button" #onclick="FacturarDemo"><i class="oi oi-file"></i> FacturarDemo</button>
<button class="dropdown-item" type="button"><i class="oi oi-file"></i> ---- </button>
<button class="dropdown-item" type="button" #onclick="Facturar"><i class="oi oi-file"></i> Facturar</button>
}
</div>
</div>
</div>
</div>
<a class="btn btn-outline-primary" href="detalles-carritos"><i class="oi oi-eye"></i> Ver Artículos</a>
</div>
<button class="btn btn-dark" #onclick="GuardarCotizacion"><i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar Cotización</button>
In Blazor it is preferable to speak in terms of rendering or not, rather than making them visible or hiding them. Thus, if GuardarCotizacion is a method that should hide some buttons when called can be as described in the #code block below:
#code
{
private bool show = false;
private void GuardarCotizacion()
{
show = true;
}
}
Note: The code above defines a boolean variable set to false by default.
Now, when you click on the "Guardar Cotización" button, the method GuardarCotizacion is called and set the variable to true, after which the StateHasChanged method is automatically called, and the component is rendered.
If you want, for example, to "hide" this button:
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>
and show it only when you click on the "Guardar Cotización" button, you can wrap the button in an if statement like this:
#if( show)
{
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Correo</button>
}
Now, when your component is freshly created, this button is not going to be displayed, because the initial value of the variable show is false, but after changing it to true it is going to be rendered.
This is how you can do that with the rest of your button, together or separately,
in a simple manner or a sophisticated manner, according to your whims.
#if (ShowButtons)
{
<button....... />
}
#code
{
private bool ShowButtons = true;
private void GuardarCotizacion()
{
ShowButtons = !ShowButtons;
}
}
I have this code in my action
var singedUser = HttpContext.User.Identity.Name;
try
{
_purchaseService.PurchaseCard(singedUser, cardName);
}
catch
{
}
And I want this to open ONLY if the code enters the catch block
<div id="Modal" 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">Purchasing Card</h4>
</div>
<div class="modal-body">
<p>You have unsufficient funds!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
And here is my button
<a class="button btn btn-success"
asp-controller="Store" asp-action="Buy"
asp-route-data ="#card.Name">Buy (#card.Price coins)</a>
I would appreciate if someone would tell me how I can open this dialogue box in the same page only if the code enters the catch block
You can also use an ajax call to return the partial view and add it to the DOM. Setting up a modal to load a partial view is actually pretty straight forward :
Create partial view : _ModalContent.cshtml
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Purchasing Card</h4>
</div>
<div class="modal-body">
<p>You have unsufficient funds!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
Modify your Index page :
<a id="button1" class="button btn btn-success"
asp-controller="Store" asp-action="Buy"
asp-route-data ="#card.Name">Buy (#card.Price coins)</a>
<div id="myModal"></div>
#section Scripts{
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("#button1").on("click", function (e) {
$('#myModal').load(this.href, function () {
$('#Modal').modal({
keyboard: true
}, 'show');
});
return false;
});
});
</script>
}
Controller function :
public IActionResult buy(string data)
{
.....
{
return PartialView("_ModalContent");
}
}
I would pass a variable through the ViewBag on the controller/action. Something like this in the controller:
var singedUser = HttpContext.User.Identity.Name;
try
{
_purchaseService.PurchaseCard(singedUser, cardName);
}
catch
{
ViewBag.ShowModal = false;
}
Then toggle whether or not to trigger JQuery to show the Modal in the scripts section of the view:
#section Scripts{
<script>
#if(ViewBag.ShowModal == true){
#Html.Raw("$('#Modal').modal('show');");
}
</script>
}
I have input form in Bootstrap model popup. I want to show error message in div when submit button for saving. My model popup is in update panel. I am trying to do and its not working.
<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">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required" runat="server">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" />
</div>
</div>
</div>
</div>
Below is the server side method to show content.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
}
How can I show error content to div?
To open error model popup from Server side.
You need to update your Server side function ShowError to this.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true);
}
for this you have to put the div with id myModal, into update panel.
This will trigger jQuery function on Client side after server side execution complete and the model open manually.
Other way to do this
If you don't want to put model div into update panel then follow this way.
Update your Model div like below
<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">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
Add JavaScript function as below into aspx file.
function showError(error){
$("#ErrorDiv").html(error);
$('#myModal').modal('show');
}
And call the JavaScript function from server side like this
public void ShowError(string Message)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true);
}
Here, you can explore more about ScriptManager.RegisterStartupScript Method