ASP.NET Web Form & Entity Framework Add,Edit,Delete With Bootstrap Modal

Question

I want to do all database related commands with modals (add, edit, delete) I do this with Entity Framework But when I press the Create button in the modal, nothing happens Please help me to do this operation Reverently

My ProductControl Page 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">
    <link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
    <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="UpdatePanel1" runat="server">
                        <ContentTemplate>
                            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal">
                                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">
                    <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="BtnDelete" runat="server">Edit</asp:LinkButton>
                                <asp:LinkButton CssClass="btn btn-danger" ID="BtnEdit" runat="server">Delete</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 -->
        <asp:UpdatePanel ID="UpdatePanel" runat="server">
            <ContentTemplate>
                <div class="modal" id="myModal">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Add New Record</h4>
                                <button type="button" class="btn btn-success close" data-dismiss="modal">&times;</button>
                            </div>
                            <div class="modal-body">
                                <asp:TextBox ID="Name" placeholder="Name" runat="server"></asp:TextBox>
                                <asp:TextBox ID="Price" placeholder="Price" runat="server"></asp:TextBox>
                                <asp:TextBox ID="Type" placeholder="Type" runat="server"></asp:TextBox>
                                <asp:TextBox ID="Barcode" placeholder="Barcode" runat="server"></asp:TextBox>
                            </div>
                            <div class="modal-footer">
                                <asp:Button ID="BtnCreate" runat="server" CssClass="btn btn-success" data-dismiss="modal" Text="Create" OnClick="BtnCreate_Click" />
                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Content>

My ProductControl Page 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(Price.Text);

            Db.TblProducts.Add(Row);
            Db.SaveChanges();

            Response.Redirect("~/Pages/ProductControl.aspx");
        }
    }
}

Unfortunately, I was unable to remove the Run Code Snippet

when you say nothing happens, if you run it do you see network requests on the button click? if you have a breakpoint in your handler, does it get hit? — TZHX, Sep 01 '22 at 10:23
In my opinion, no request is sent to the network I have just finished the web form training classes. Please tell me about: Add, Edit, Delete With Bootstrap Modal — Hadi Jami, Sep 01 '22 at 10:45

score 0 · Answer 1 · answered Sep 01 '22 at 10:33

0

The button inside the UpdatePanel will not work.

Your problem probably is similar to this one Button click not working inside update panel

As per Sid M: set ChildrenAsTriggers of the UpdatePanel to true and add EventName="Click" to the UpdatePanel tag like this:

<asp:UpdatePanel>
     <Triggers>
         <asp:AsyncPostBackTrigger ControlID="btnBlock" EventName="Click"/> 
     </Triggers>
</asp:UpdatePanel>

answered Sep 01 '22 at 10:33

Majid ALSarra

394
2
7

the default value of the `ChildrenAsTriggers` property is true – TZHX Sep 01 '22 at 10:39
Have you tried to change the 'UpdateMode' property of the UpdatePanel to 'Always' ? you mentioned that nothing happens, so I expect that the problem is within the UI – Majid ALSarra Sep 01 '22 at 10:44
Inside the tag to warns And it doesn't work – Hadi Jami Sep 01 '22 at 10:47
And my goal is not only to add records, I want to edit and delete them as well – Hadi Jami Sep 01 '22 at 10:49
Due to the limitation, I will send the codes piece by piece – Hadi Jami Sep 01 '22 at 10:59
' ' – Hadi Jami Sep 01 '22 at 11:01
Is this code correct? – Hadi Jami Sep 01 '22 at 11:02

ASP.NET Web Form & Entity Framework Add,Edit,Delete With Bootstrap Modal

1 Answers1