Develop Reference

My Onclick Element in my LinkButton not triggered because of the modal(?)

so i use the same modal to create new and edit existing Studio Detail. when i want to edit existing, i click on the studio name on the table, get the data from DB, and insert it to textbox and change the button inside the modal as "Update" to update the record. but when i want to create new, it set the textbox inside the modal to empty, and change the button text to Save, but when i pun debug point at the OnClick function, it didn't triggered.
Modal:
<asp:UpdatePanel runat="server" ID="upDetailModal" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="row">
<div class="col-7">
</div>
<div class="col-5">
<asp:LinkButton runat="server" ID="lbAddDetail" Text="Add Detail" CssClass="btn userButton" OnClick="lbAddDetail_Click" CausesValidation="false" data-bs-toggle="modal" data-bs-target="#detailModal"/>
</div>
</div>
</div>
<div id="modalDetail">
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="Studio Background" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="detailTitle">Studio Background</h4>
</div>
<div class="modal-body">
<p>Studio Background Name</p>
<asp:TextBox runat="server" ID="txtStudioBackgroundName" CssClass="loginForm" />
<br />
<br />
<p>Studio Background Capacity</p>
<asp:TextBox runat="server" ID="txtStudioBackgroundCapacity" CssClass="loginForm" />
<br />
<br />
<p>Studio Package</p>
<asp:FileUpload runat="server" ID="fuStudioBackground" AllowMultiple="true" accept="image/png,image/jpeg" CssClass="loginForm" />
</div>
<div class="modal-footer">
<asp:LinkButton runat="server" ID="lbSaveDetail" CssClass="btn userButton" Text="Save" OnClick="lbSaveDetail_Click" />
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
protected void lbAddDetail_Click(object sender, EventArgs e)
{
idDetail = 0;
txtStudioBackgroundCapacity.Text = "";
txtStudioBackgroundName.Text = "";
lbSaveDetail.Text = "Save";
upDetailModal.Update();
showDetailModal();
}
I think the modal and the onClick function is clashed. i expect the onClick function to be triggered when i click the button

How can I select the record in the grid view and delete or edit this record? In Asp.Net Web Form

How can I select the record in the grid view and delete or edit this record? In Asp.Net Web Form
I want this to be done with the Bootstrap modal
I do this with Entity Framework
I have only been able to code to add
The methods I know for editing and deleting are not suitable for this project and they do not work on Bootstrap Modal
Html Code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ProductControl.aspx.cs" Inherits="AppData.Pages.ProductControl" %>
<asp:Content ID="HeadContent" ContentPlaceHolderID="Head" runat="server">
<script src="../Scripts/jquery-3.6.0.slim.min.js"></script>
<script src="../Scripts/Site.js"></script>
</asp:Content>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="container">
<div class="row">
<div class="col-md-12 table-responsive" id="ProductDiv">
<div class="d-flex justify-content-between align-items-center mb-3 mt-3">
<h4>List of Products</h4>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel" runat="server">
<ContentTemplate>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#ModalAdd">
Add Product
</button>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:GridView ID="GridView" runat="server" CssClass="table text-center table-bordered table-hover" HeaderStyle-CssClass="table-dark" AutoGenerateColumns="false" DataKeyNames="Id" OnRowCommand="GridView_RowCommand">
<Columns>
<asp:TemplateField HeaderText="" ItemStyle-Font-Size="Small">
<HeaderTemplate>Row</HeaderTemplate>
<ItemTemplate><%# Container.DataItemIndex+1 %></ItemTemplate>
<ItemStyle Wrap="False" />
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Price" HeaderText="Price" />
<asp:BoundField DataField="Type" HeaderText="Type" />
<asp:BoundField DataField="Barcode" HeaderText="Barcode" />
<asp:TemplateField HeaderText="Commands" ItemStyle-Font-Size="Small">
<ItemTemplate>
<asp:LinkButton CssClass="btn btn-warning" ID="BtnEdit" runat="server">Edit</asp:LinkButton>
<asp:LinkButton CssClass="btn btn-danger" ID="BtnDelete" runat="server" data-toggle="modal" data-target="#ModalDelete">Delete</asp:LinkButton>
<asp:LinkButton CssClass="btn btn-info" ID="BtnDetail" runat="server">Detail</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="row">
<asp:Label ID="LblNotFound" runat="server" Text="No Product Found" CssClass="col-12 alert alert-danger text-center" Visible="false"></asp:Label>
</div>
</div>
<!-- Modal Add -->
<asp:UpdatePanel ID="UpdatePanelModalAdd" runat="server">
<ContentTemplate>
<div class="modal" id="ModalAdd">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add New Record</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<p>Name:</p>
<asp:TextBox ID="Name" placeholder="Name" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-6">
<p>Price:</p>
<asp:TextBox ID="Price" placeholder="Price" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="row">
<div class="col-6">
<br />
<p>Type:</p>
<asp:TextBox ID="Type" placeholder="Type" runat="server" CssClass="form-control"></asp:TextBox>
</div>
<div class="col-6">
<br />
<p>Barcode:</p>
<asp:TextBox ID="Barcode" placeholder="Barcode" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="BtnCreate" runat="server" CssClass="btn btn-success" Text="Create" OnClick="BtnCreate_Click" />
<asp:Button ID="BtnCancel" runat="server" CssClass="btn btn-danger" Text="Cancel" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnCreate" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="BtnCancel" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<!-- Modal Detail -->
<asp:UpdatePanel ID="UpdatePanelModalDetail" runat="server">
<ContentTemplate>
<div class="modal" id="ModalDetail">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Detail Record</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<p>Name:</p>
<asp:Label ID="LblName" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
<div class="col-6">
<p>Price:</p>
<asp:Label ID="LblPrice" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
</div>
<div class="row">
<div class="col-6">
<br />
<p>Type:</p>
<asp:Label ID="LblType" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
<div class="col-6">
<br />
<p>Barcode:</p>
<asp:Label ID="LblBarcode" CssClass="text-secondary" runat="server" Text=""></asp:Label>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-success" Text="Create" OnClick="BtnCreate_Click" />
<asp:Button ID="Button2" runat="server" CssClass="btn btn-danger" Text="Cancel" data-dismiss="modal" />
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<!-- Modal Delete -->
<asp:UpdatePanel ID="UpdatePanelModalDelete" runat="server">
<ContentTemplate>
<div class="modal" id="ModalDelete">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Delete Record</h4>
</div>
<div class="modal-body">
<h6 class="text-center">Are you sure you want to delete this record?</h6>
<br />
<div class="text-center">
<asp:Button ID="Delete" CssClass="btn btn-danger border-2 border-dark" runat="server" Text="Delete" CommandArgument='<%# Eval("Id") %>' CommandName="Delete" />
<button id="Cancel" class="btn btn-light border-2 border-dark" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Delete" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</asp:Content>
And Backend Code:
using AppData.Models;
using System;
using System.Collections.Generic;
using System.EnterpriseServices;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AppData.Pages
{
public partial class ProductControl : System.Web.UI.Page
{
Models.ProductDbEntities Db = new Models.ProductDbEntities();
protected void Page_Load(object sender, EventArgs e)
{
if (GridView.Rows.Count > 0)
{
LblNotFound.Visible = false;
}
else
{
GridView.DataSource = Db.TblProducts.ToList();
GridView.DataBind();
}
}
protected void BtnCreate_Click(object sender, EventArgs e)
{
TblProduct Row = new TblProduct();
Row.Name = Name.Text;
Row.Price = Price.Text;
Row.Type = Type.Text;
Row.Barcode = Convert.ToInt64(Barcode.Text);
Db.TblProducts.Add(Row);
Db.SaveChanges();
Response.Redirect("ProductControl.aspx");
}
protected void BtnCancel_Click(object sender, EventArgs e)
{
Response.Redirect("Pages/ProductControl.aspx");
}
protected void GridView_RowCommand(object sender, GridViewCommandEventArgs e)
{
var id = e.CommandArgument;
if (e.CommandName == "Delete")
{
Int64 Id = Convert.ToInt64(id);
var Row = Db.TblProducts.FirstOrDefault(n => n.Id == Id);
Db.TblProducts.Remove(Row);
Db.SaveChanges();
Response.Redirect("DataControl.aspx");
GridView.DataSource = Db.TblProducts.ToList();
GridView.DataBind();
}
}
}
}

I understand your approach, but if you are using bootstrap modals you need to write a little bit more code.
One way to achieve this is by following the next steps:
In the Delete modal add a hidden field to hold the selected productId and an event handler for the delete button:
<div class="modal-body">
<h6 class="text-center">Are you sure you want to delete this record?</h6>
<br />
<!--add this inside delete modal -->
<input type="hidden" id="productIdToDelete" runat="server" />
<div class="text-center">
<!-- remove CommandArgument and CommandName from the Delete button. They are useless in the popup. -->
<!-- add an event handler to OnClick-->
<asp:Button ID="Delete" CssClass="btn btn-danger border-2 border-dark" runat="server" Text="Delete" OnClick="BtnDelete_Click" />
...
Create event handlers for when the modal is opened in order to propagate the productId from the current row in the grid to the modal:
<script src="../Scripts/Site.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
//use a jquery selector to assign an event handler to all Delete Buttons found on the page (nottice they all start with the same prexif)
$("[id*=MainContent_GridView_BtnDelete]").click(function () {
//get the id of the product from the selected row first cell and assign it to the hidden field in the modal
$("#MainContent_productIdToDelete").val($(this).closest('tr').find('td').eq(0).html());
});
});
</script>
Finally, handle the delete event in the code behind:
protected void BtnDelete_Click(object sender, EventArgs e)
{
string idVal = Request.Form[productIdToDelete.UniqueID];
var id = Convert.ToInt64(idVal);
// implement delete logic ...
}
Use the same approach for Edit. (Look at this example.)

Modal pop up wont show up regardless of what i do

am currently trying to find a way to open up a modal box based on the rows in the table. however when i run the program and click the edit button, the modal wont show up. Here is a sample code:
Gridview:
<asp:Gridview CssClass=" table table-borderless" ID="PO_Form" runat="server" AutoGenerateColumns="false" OnRowCommand="PO_Form_RowCommand">
<Columns>
<asp:ButtonField Text="Edit" ControlStyle-CssClass="page-link" CommandName="EditForm"/>
<asp:BoundField DataField="PO_no" HeaderText="PO No." />
<asp:BoundField DataField="supplier_name" HeaderText="Supplier name" />
<asp:BoundField DataField="flight_no" HeaderText="Flight No." />
<asp:BoundField DataField="bkg_date" HeaderText="Booking Date" />
<asp:BoundField DataField="status" HeaderText="Status" />
</Columns>
<HeaderStyle BackColor="#666666" />
</asp:Gridview>
</div>
Modal:
<div id="editmodal" class="modal fade" role="dialog" >
<div class="modal-dialog">
<%-- Modal Content --%>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
back code:
protected void PO_Form_RowCommand(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName == "EditForm")
{
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Pop", "EditFormModal();", true);
}
}

Opening Bootstrap Modal Form In Code Behind C#

I was closely following the tutorial that was placed on this guide to create a modal View/Edit form for GridView. Everything seems to be working as it should, however, the modal form simply doesn't show up, the Screen turns gray but the form itself doesn't show up. Furthermore, if I check source code for the page, I can see that The modal form contains the data that I've passed to it.
Code For GridView
//REFERENCES IN HEAD
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
//.............
<asp:ScriptManager runat="server" ID="ScriptManager1" />
<asp:UpdatePanel ID="upCrudGrid" runat="server">
<ContentTemplate>
<div class="col-md-6">
<asp:GridView ID="CompanyUserList" GridLines="None" CssClass="table table-striped" OnRowCommand="CompanyUserList_RowCommand" Style="margin-top: 2em;" runat="server">
<Columns>
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="View & Edit" HeaderText="Edit Record">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
</div>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
Code For Modal Body
<div id="editModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>
<asp:UpdatePanel ID="upEdit" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr><td>Country Code : <asp:Label ID="lblCountryCode" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Population : <asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Country Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Continent:<asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CompanyUserList" EventName="RowCommand"/>
<%--<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />--%>
</Triggers>
</asp:UpdatePanel>
</div>
C# Code To Populate Modal Form
protected void CompanyUserList_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index = Convert.ToInt32(e.CommandArgument);
GridViewRow gvrow = CompanyUserList.Rows[index];
lblCountryCode.Text = HttpUtility.HtmlDecode("test");
txtPopulation.Text = HttpUtility.HtmlDecode("test");
txtName.Text = HttpUtility.HtmlDecode("test");
txtContinent1.Text = HttpUtility.HtmlDecode("test");
lblResult.Visible = false;
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#editModal').modal('show');");
sb.Append(#"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(),
"EditModalScript", sb.ToString(), false);
}
Now If I had to Guess there's a problem somewhere in the ScriptManager.RegisterClientScriptBlock , however I can't really tell if that's the case and/or what should be done in order to fix the problem since I'm limited to c# knowledge.
Could Anyone give a hint or two on where the problem is or how to fix it?

After some intense digging around, I realized that in the tutorial Bootstrap 2.2.2 was used, so in order to make it work with the newest bootstrap I had to slightly modify the HTML/CSS.
<div id="editModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<%--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="editModalLabel">Edit Record</h3>
</div>--%>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<asp:UpdatePanel ID="upEdit" runat="server">
<ContentTemplate>
<div class="modal-body">
<table class="table">
<tr>
<td>Country Code :
<asp:Label ID="lblCountryCode" runat="server"></asp:Label></td>
</tr>
<tr>
<td>Population :
<asp:TextBox ID="txtPopulation" runat="server"></asp:TextBox>
<asp:Label ID="Label1" runat="server" Text="Type Integer Value!" /></td>
</tr>
<tr>
<td>Country Name:<asp:TextBox ID="txtName" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Continent:<asp:TextBox ID="txtContinent1" runat="server"></asp:TextBox></td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Label ID="lblResult" Visible="false" runat="server"></asp:Label>
<asp:Button ID="btnSave" runat="server" Text="Update" CssClass="btn btn-info" />
<button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="CompanyUserList" EventName="RowCommand" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>

Add Form in a Modal

I making an add form in my modal. The modal contains 2 dropdownlists, 4 textboxes (1 hidden) and a button for adding.
I bind my dropdown list for the item category then bind my other dropdown list for the item name. However when I change my Item Category in my dropdown list the dropdown list for my item name is not responding or it not binding. Can anyone help me?
<div id="addModal" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add Item</h4>
</div>
<div class="modal-body">
<div class="form-inline form-group">
<asp:Label ID="Label1" CssClass="control-label col-xs-3" runat="server" Text="Category:"></asp:Label>
<div class="col-xs-offset-3">
<asp:DropDownList ID="drpCategory" runat="server" CssClass="form-control col-xs-5" OnTextChanged="drpCategory_TextChanged" />
</div>
</div>
<div class="form-inline form-group">
<asp:Label ID="Label2" CssClass="control-label col-xs-3" runat="server" Text="Item Name:"></asp:Label>
<div class="col-xs-offset-3">
<asp:TextBox ID="txtitem" runat="server" CssClass="form-control col-xs-5" Visible="false" />
<asp:DropDownList ID="drpItem" runat="server" CssClass="form-control col-xs-5" Visible="true" />
</div>
</div>
<div class="form-inline form-group">
<asp:Label ID="Label3" CssClass="control-label col-xs-3" runat="server" Text="Unit:"></asp:Label>
<div class="col-xs-offset-3">
<asp:TextBox ID="txtUnit" runat="server" CssClass="form-control col-xs-5" Enabled="false" />
</div>
</div>
<div class="form-inline form-group">
<asp:Label ID="Label4" CssClass="control-label col-xs-3" runat="server" Text="Quantity:"></asp:Label>
<div class="col-xs-offset-3">
<asp:TextBox ID="txtQty" runat="server" CssClass="form-control col-xs-3" type="number" min="1" onkeypress="return isNumberKey(event)" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" ID="btnADD" CssClass="btn btn-sm" OnClick="btnADD_Click" Text="Add" />
</div>
</div>
</div>
then this is the code behind:
public void drpCategory_TextChanged(object sender, EventArgs e)
{
if (drpCategory.Text == "Others")
{
drpItem.Visible = false;
txtitem.Visible = true;
}
else
{
byCateg();
DataBind();
drpItem.Visible = true;
txtitem.Visible = false;
}
}
Is there a problem in my code?