locked
Show Bootstrap Modal Pop Up from GridView Edit button for the row & Update on submit RRS feed

  • Question

  • User-371483830 posted

    Hi, 

    I have developed a bootstrap form in asp.net project which opens up inside modal pop up on add new button. Working Fine!!

    But when i try to open the same modal pop up from asp.net c# code pop up does not open.

    Following is my code

    <%@ Page Title="" Language="C#" MasterPageFile="~/Portal.Master" AutoEventWireup="true"
    CodeBehind="Manufacturer.aspx.cs" Inherits="SFS.Manufacturer" %>

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <link href="PortalCss/footable.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="PortalJs/footable.min.js"></script>
    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="PortalJs/bootstrap.min.js"></script>

    <script type="text/javascript">
    function openModal() {
    $('[id*=addModal]').modal('show');
    }

    $(function () {
    $('[id*=grdManufact]').footable();
    });
    jQuery.noConflict();


    </script>
    <div id="page-wrapper">

    <div id="mainContainer" class="container">
    <div class="shadowBox">
    <div class="page-container">
    <div class="container">
    <div class="jumbotron">
    <p class="text-danger">
    Manufacturers
    </p>
    </div>
    <div class="table-title">
    <div class="row">
    <div class="col-sm-6">
    <a href="#addModal" class="btn btn-success" data-toggle="modal" id="btnAdd"><span>Add
    New</span></a> <a href="#" class="btn btn-danger" data-toggle="modal"><span>Cancel</span></a>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-lg-12 ">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
    <asp:GridView ID="grdManufact" CssClass="footable" runat="server" AutoGenerateColumns="false"
    Style="max-width: 95%" OnRowCommand="grdManufact_RowCommand">
    <Columns>
    <%-- <asp:TemplateField HeaderText="Update">
    <HeaderStyle HorizontalAlign="Left" />
    <ItemStyle HorizontalAlign="Left" />
    <ItemTemplate>
    <a href="#editEmployeeModal" class="" data-toggle="modal" onclick=""><span>Edit</span></a>
    </ItemTemplate>

    </asp:TemplateField> --%>
    <asp:TemplateField HeaderText="Update">
    <ItemTemplate>
    <asp:LinkButton ID="btnEdit" runat="server" CommandName="EditRecord" class="btn btn-info" ClientIDMode="Static">Edit</asp:LinkButton>
    <%--<a href="#addModal" class="btn btn-info" id="editLink" runat="server">Edit</a> --%>

    </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="ManufacturerId" HeaderText="Id" />
    <asp:BoundField DataField="ManufacturerName" HeaderText="Manufacturer Name" />
    </Columns>
    </asp:GridView>
    </ContentTemplate>
     <Triggers>
      <asp:AsyncPostBackTrigger ControlID="grdManufact" EventName="RowCommand" />
      
     </Triggers>
    </asp:UpdatePanel>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div id="addModal" class="modal hide fade"
           tabindex="-1" role="dialog" aria-labelledby="editModalLabel"
           aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
    <h4 class="modal-title">
    Manufacturer Details</h4>
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    &times;</button>
    </div>
    <div class="modal-body">
    <div class="form-group">
    <label>
    Name</label>
    <asp:TextBox runat="server" ID="txtManufactName" CssClass="form-control" required></asp:TextBox>
    <%--<input type="text" class="form-control" required>--%>
    </div>
    </div>
    <div class="modal-footer">
    <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
    <%--<input type="submit" class="btn btn-success" value="Add">--%>
    <asp:Button ID="btnAddManufact" runat="server" OnClick="btnAdd_Click" Text="Save"
    CssClass="btn btn-success" />
    </div>
    </div>
    </div>
    </div>

    </asp:Content>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using System.Text;

    namespace SFS
    {
    public partial class Manufacturer : System.Web.UI.Page
    {
    bool isEdit = false;
    DataSet dsManufact = new DataSet();
    BusinessLayer.BAL objManuFact = new BusinessLayer.BAL();

    protected void Page_Load(object sender, EventArgs e)
    {
    if (!this.IsPostBack)
    {
    GetManufactDetails();

    ////Adds THEAD and TBODY to GridView.
    grdManufact.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    }

    protected void btnAdd_Click(object sender, EventArgs e)
    {
    Entity.EntityProduct ProductEntity = new Entity.EntityProduct();
    ProductEntity.ManufacturerName = txtManufactName.Text.Trim();

    if (isEdit == false)
    {
    int result = objManuFact.InsertManufactName(ProductEntity);
    if (result == 1)
    {
    GetManufactDetails();
    //MetroMessageBox.Show(this, "Manufacturer Name has been saved successfully.", "Success", MessageBoxButtons.OK, MessageBoxIcon.Information);
    StringBuilder sb = new System.Text.StringBuilder();
    sb.Append(@"<script type='text/javascript'>");
    sb.Append("alert('Record Added Successfully');");
    sb.Append("$('#addModal').modal('hide');");
    sb.Append(@"</script>");
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "AddHideModalScript", sb.ToString(), false);
    }
    }
    }

    private void GetManufactDetails()
    {
    dsManufact = objManuFact.GetManufactDetails();

    if (dsManufact.Tables.Count > 0)
    {
    DataTable dt = new DataTable();
    grdManufact.DataSource = dsManufact.Tables[0] ;
    grdManufact.DataBind();

    grdManufact.HeaderRow.Cells[0].Attributes["data-class"] = "expand";

    //Attribute to hide column in Phone.
    grdManufact.HeaderRow.Cells[1].Attributes["data-hide"] = "phone";
    grdManufact.HeaderRow.Cells[2].Attributes["data-hide"] = "phone";

    //Adds THEAD and TBODY to GridView.
    grdManufact.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
    }

    //public void Display(object sender, EventArgs e)
    //{
    // int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
    // GridViewRow row = grdManufact.Rows[rowIndex];

    // txtManufactName.Text = grdManufact.Rows[row.RowIndex].Cells[1].Text;
    // //ScriptManager.RegisterStartupScript(Page, Page.GetType(), "Pop", "$('#addModal').modal();", true);
    // ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    //}

    protected void Display()
    {
    //int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
    GridViewRow row = grdManufact.Rows[2];
    StringBuilder sb = new System.Text.StringBuilder();
    //lblstudentid.Text = (row.FindControl("lblstudent_Id") as Label).Text;
    //lblmonth.Text = (row.FindControl("lblMonth_Name") as Label).Text; ;
    txtManufactName.Text = "Demo";
    sb.Append(@"<script type='text/javascript'>");
    sb.Append("$('#addModal').addClass('show');");
    sb.Append(@"</script>");
    ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "EditModalScript", sb.ToString(), false);
    }

    protected void Submit_Click(object sender, EventArgs e)
    {
    //Your code here
    }

    protected void grdManufact_RowCommand(object sender, GridViewCommandEventArgs e)
    {
    if (e.CommandName == "Edit")
    {
    Display();
    }
    }

    public void anchHomePage_ServerClick(object sender, System.EventArgs e)
    {
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
    ClientScript.RegisterStartupScript(this.GetType(), "Pop", "openModal();", true);
    }

    protected void linkButton_Click(object sender, EventArgs e)
    {
    Page.ClientScript.RegisterStartupScript(GetType(), "modelBox", "$('#addModal').modal('show');", true);
    }
    }
    }

    Saturday, June 22, 2019 5:58 AM

All replies

  • User665608656 posted

    Hi nirajzambad,

    According to your issue and the code you provided, I'm not sure if you quoted any files on the master page.

    Based on the files you quoted in your current page, you should  also quoted a bootstrap.min.css file to achieve this function and put the jQuery reference file before js, otherwise there will be an error prompt.

    You could download bootstrap.min.css file in this link : https://getbootstrap.com/docs/4.3/getting-started/download/

    Here is the result of my work demo:

    Best Regards,

    YongQing

    Monday, June 24, 2019 5:37 AM