.aspx code
<asp:Timer ID="timer" Interval="3000" runat="server" OnTick="Timer1_Tick">
</asp:Timer>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer" EventName="Tick" />
</Triggers>
<ContentTemplate>
<div class="row-fluid">
<ul class="ov_boxes">
<li class="blue">
<div class="p_bar_up">
<span style="display: none;">2,4,9,7,12,8,16</span>
</div>
<div class="ov_text">
Total <strong><a href="../Reports/GetAllEmployeeReport.aspx" target="_blank">
<asp:Label Style="color: White;" ID="lblTotal" runat="server"></asp:Label></a>
</strong>
<% Response.Write(ToDateString(System.DateTime.Now.ToString())); %>
</div>
</li>
</ul>
<ul class="ov_boxes">
<li class="pink">
<div class="p_bar_down">
<span style="display: none;">20,15,18,14,10,13,9,7</span>
</div>
<div class="ov_text">
Total IN <strong><a href="../Reports/InEmployeeReport.aspx" target="_blank">
<asp:Label Style="color: White;" ID="lblInEmp" runat="server"></asp:Label></a>
</strong>
<% Response.Write(ToDateString(System.DateTime.Now.ToString())); %>
</div>
</li>
</ul>
<ul class="ov_boxes">
<li class="grey">
<div class="p_line_up">
</div>
<div class="ov_text">
Total OUT<strong><a href="../Reports/OutEmployeeReport.aspx" target="_blank">
<asp:Label Style="color: White;" ID="lblTotal" runat="server"></asp:Label></a>
</strong>
<% Response.Write(ToDateString(System.DateTime.Now.ToString())); %>
</div>
</li>
</ul>
</div>
</ContentTemplate>
</asp:UpdatePanel>
and code behind is
protected void Timer1_Tick(object sender, EventArgs e)
{
GetTodayInOutData();
UpdatePanel3.Update();
}
private void GetTodayInOutData()
{
try
{
var objEmployeeBAL = new EmployeeBAL();
Entity.Employee objEmployee = new Entity.Employee();
DataSet ds = objEmployeeBAL.GetRealtimeData();
DataSet ds1 = objEmployeeBAL.GetRealtimeOutData();
DataSet ds2 = objEmployeeBAL.GetRealtimeInData();
if (ds.Tables[0].Rows.Count > 0)
{
lblTotal.Text = ds.Tables[0].Rows[0]["Total"].ToString();
}
}
catch (Exception)
{
throw;
}
}
GetTodayInOutData() method is called after every 3 second and get the correct value but lblTotal displays old value means it's not updating. I can not find what is the wrong in this. Any help would be appreciated. Thanks.
Set AutoPostBack true for Label lblTotal and also set UpdateMode property to Conditional:
<asp:Label Style="color: White;" AutoPostBack="true" UpdateMode="Conditional" ID="lblTotal" runat="server"></asp:Label>
Related
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.)
I bring products from the database to the default.aspx with Eval. My default.aspx code and view is as follows:
<section id="products" class="portfolio-area section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title">
<h1>Products</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="iso-wraper">
<div class="iso-nav">
<ul>
<li class="hvr-shutter-out-vertical none-border portfolio-active" data-filter="*">All</li>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li class="hvr-shutter-out-vertical none-border" data-filter=".<%#Eval("productcategory") %>"><%#Eval("productcategory") %></li>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:rebornConnectionString %>" SelectCommand="SELECT [productcategory] FROM [product] GROUP BY [productcategory]"></asp:SqlDataSource>
</ul>
</div>
<div class="iso-content">
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
<ItemTemplate>
<div class="single-project <%#Eval("productcategory") %>">
<div class="col-md-12">
<div class="trainer-part">
<img src="<%#Eval("productimage") %>" alt="">
<br />
<br />
<br />
<br />
<br />
<div class="trainer-dec" style="height: 110px;">
<h3><%#Eval("productname") %></h3>
<h3>Fiyat: <%#Eval("price") %> TL</h3>
</div>
<div class="trainer-social-link">
<asp:LinkButton ID="LinkButton1" runat="server" OnCommand="LinkButton1_Click" CommandArgument='<%#Eval("productid") %>'>Detail</asp:LinkButton>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:rebornConnectionString %>" SelectCommand="SELECT [productid], [productcategory], [productname], [price], [productimage] FROM [product]"></asp:SqlDataSource>
</div>
</div>
</div>
</div>
</div>
</section>
Please click to see my default.aspx view.
And my default.aspx.cs code:
protected void LinkButton1_Click(object sender, CommandEventArgs e)
{
Session["productid"] = e.CommandArgument.ToString();
Response.Redirect("product-detail.aspx");
}
My problem is: When I click "Detail" button, nothing happens.
When I put the mouse over the detail button, something like this appears on the bottom left of the browser:
Please click to see the writing.
Response.Redirect("~/product-detail.aspx");
Try replacing OnCommand with OnClick
Your button click is not going to server side that is why your code is not working.
<section id="products" class="portfolio-area section-padding">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title">
<h1>Products</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="iso-wraper">
<div class="iso-nav">
<ul>
<li class="hvr-shutter-out-vertical none-border portfolio-active" data-filter="*">All</li>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<li class="hvr-shutter-out-vertical none-border" data-filter=".<%#Eval("productcategory") %>"><%#Eval("productcategory") %></li>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:rebornConnectionString %>" SelectCommand="SELECT [productcategory] FROM [product] GROUP BY [productcategory]"></asp:SqlDataSource>
</ul>
</div>
<div class="iso-content">
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource2">
<ItemTemplate>
<div class="single-project <%#Eval("productcategory") %>">
<div class="col-md-12">
<div class="trainer-part">
<img src="<%#Eval("productimage") %>" alt="">
<br />
<br />
<br />
<br />
<br />
<div class="trainer-dec" style="height: 110px;">
<h3><%#Eval("productname") %></h3>
<h3>Fiyat: <%#Eval("price") %> TL</h3>
</div>
<div class="trainer-social-link">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click" CommandArgument='<%#Eval("productid") %>'>Detail</asp:LinkButton>
</div>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:rebornConnectionString %>" SelectCommand="SELECT [productid], [productcategory], [productname], [price], [productimage] FROM [product]"></asp:SqlDataSource>
</div>
</div>
</div>
</div>
</div>
</section>
UpdateProgress works good on first button click . But when i click second time the UpdateProgress didn't appeared.Instead of UpdateProgress all things works good on second click. Please help me..
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSubmit" />
</Triggers>
<ContentTemplate>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Class</b></p>
<asp:DropDownList ID="drpClass" CssClass="form-control" OnSelectedIndexChanged="drpClass_SelectedIndexChanged" AutoPostBack="true" runat="server"></asp:DropDownList>
</div>
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Division</b></p>
<asp:DropDownList ID="drpDiv" CssClass="form-control"
runat="server">
</asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Date</b></p>
<asp:TextBox runat="server" ID="txtDateGiven" CssClass="form-control"
placeholder="Select a Date"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender2" runat="server" Format="dd/MMM/yyyy" PopupButtonID="txtDateGiven"
TargetControlID="txtDateGiven">
</asp:CalendarExtender>
</div>
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Date of Submission</b></p>
<asp:TextBox runat="server" ID="txtDateSubmit" CssClass="form-control"
placeholder="Select a Date"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MMM/yyyy" PopupButtonID="txtDateSubmit"
TargetControlID="txtDateSubmit">
</asp:CalendarExtender>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Subject</b></p>
<asp:DropDownList ID="drpSubject" CssClass="form-control" runat="server"></asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Type</b></p>
<asp:DropDownList ID="drpAssignmentType" CssClass="form-control" runat="server"></asp:DropDownList>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Title</b></p>
<asp:TextBox ID="txtAssignmentTitle" CssClass="form-control" placeholder="Enter Title"
runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<p style="margin: 0 0 5px 0;"><b>Description</b></p>
<asp:TextBox ID="txtAssignmentDes" CssClass="form-control" TextMode="MultiLine" Height="250"
placeholder="Enter Description"
runat="server"></asp:TextBox>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="updProgress"
AssociatedUpdatePanelID="UpdatePanel1"
runat="server">
<ProgressTemplate>
<div class="modal">
<div class="center">
<span style="padding-left: 10px"><b>Please Wait..</b></span>
<img alt="" src="../images/Preloader_3.gif" width="50" height="50" />
</div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div class="form-group row">
<div class="col-sm-6">
<p style="margin: 0 0 5px 0;"><b>Upload File</b></p>
<asp:FileUpload ID="imgPhoto" runat="server" />
<br />
<asp:Button ID="btnUpload" Text="Upload" runat="server" OnClick="Upload" Style="display: none" />
<% if (ViewState["Image"] != null)
{%>
<a target="_blank" href="<%=ViewState["ImageName"]%>">View Attachment</a>
<%}
else
{ %>
<asp:Label ID="Label1" runat="server" ForeColor="Red" Text="No File Uploaded"></asp:Label>
<%} %>
</div>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="form-group row">
<div class="col-sm-6">
<div class="col-sm-6">
<asp:Button ID="btnSubmit" OnClick="btnSubmit_Click"
OnClientClick="javascript:return btnSubmit();" CssClass="btn btn-primary"
runat="server" Text="Submit" />
Cancel
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Code behind
updProgress.Visible = true;
SendEmail(Convert.ToInt32(drpDiv.Text));
updProgress.Visible = false;
txtAssignmentTitle.Text = "";
txtAssignmentDes.Text = "";
txtDateGiven.Text = "";
txtDateSubmit.Text = "";
ViewState["Image"] = null;
ViewState["ImageName"] = null;
drpAssignmentType.Items.Clear();
drpClass.Items.Clear();
drpDiv.Items.Clear();
drpSubject.Items.Clear();
drpSubject.Items.Insert(0, new ListItem("--Select--", "0"));
drpAssignmentType.Items.Insert(0, new ListItem("--Select--", "0"));
LoadClass();
LoadClassAndAssignmentType();
drpDiv.Items.Insert(0, new ListItem("--Select--", "0"));
i am using update panel to avoid page load .Also the UpdateProgress didn't appeared if i try to reload the page using response.redirect . Please help me ..
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>
I have the below FormReport.aspx. I want to create a replica of what is inside of the div class=employeebox> but Programmatically when addrow_clic is click ? Any help would be appreciated
FormReport.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="FormReport.aspx.cs" Inherits="Tardy_Absentee_Report.FormReport" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">
#headerform
{
height: 56px;
}
#Div1
{
height: 70px;
}
.colum-left
{
width: 122px;
}
.colum-cenleft2
{
width: 344px;
}
.employeebox
{
height: 37px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<fieldset>
<legend>Supervisor information </legend>
<div class="row">
<div class="column-left">Supervisor Name:<span></span> </div>
<div class="column-cenleft">
<asp:TextBox ID="txtsupervisorname" runat="server" Width="103px"></asp:TextBox></div>
<div class="column-cenright"><span>Department:</span></div>
<div class="column-right">
<asp:DropDownList ID="DDownDepartment" runat="server" Height="24px" Width="154px">
</asp:DropDownList>
</div>
</div>
<div class="row">
<div class="column-left">Supervisor Number:<span></span> </div>
<div class="column-cenleft">
<asp:TextBox ID="txtSupervisorNumber" runat="server" Width="103px"></asp:TextBox></div>
<div class="column-cenright"><span>Date of Incident:</span></div>
<div class="column-right">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox></div>
</div>
</fieldset>
<fieldset>
<legend> Employee Information</legend>
<div id="EmployeeInfo">
<div class="column-left2"><span>Employee Number</span></div>
<div class="column-left2"><span>Employee Name</span></div>
<div class="colum-left2"><span>Reason Code</span></div>
</div>
<div class="employeebox">
<div class="column-left2"><asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:DropDownList ID="DDownResoncode1" runat="server" Width="153px">
</asp:DropDownList>
</div>
</div>
<div class="employeebox">
<div class="column-left2"><asp:TextBox ID="TextBox7" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:TextBox ID="TextBox8" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:DropDownList ID="DDownResoncode2" runat="server" Height="20px" Width="153px">
</asp:DropDownList></div>
</div>
<div class="employeebox">
<div class="column-left2"><asp:TextBox ID="TextBox10" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:TextBox ID="TextBox11" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:DropDownList ID="DDownResoncode3" runat="server" Width="153px"></asp:DropDownList>
</div>
</div>
<div class="employeebox">
<div class="column-left2"><asp:TextBox ID="TextBox13" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:TextBox ID="TextBox14" runat="server"></asp:TextBox></div>
<div class="column-left2">
<asp:DropDownList ID="DDownResoncode4" runat="server" Height="16px" Width="153px">
</asp:DropDownList>
</div>
</div>
<div style="height: 33px">
<asp:Button ID="addrow" runat="server" Text="AddRow" onclick="addrow_Click" />
</div>
<div>
<asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
</div>
</fieldset>
</asp:Content>
FormReport.aspx.cs
protected void addrow_Click(object sender, EventArgs e)
{
TextBox newtextbox = new TextBox();
Panel panel1 = new Panel();
panel1.Controls.Add(panel1);
}
You can use HtmlGenericControl to create a div inside panel or add a panel inside parent panel
and to add a style you can using control.Style.Add("style", "value")
ASPX:
or you can use placeholder
C#
protected void addrow_Click(object sender, EventArgs e)
{
Panel pnlEmployeeBox = new Panel();
pnlEmployeeBox.CssClass = "pnlEmployeeBox";
HtmlGenericControl columnLeft2= new HtmlGenericControl("div");
columnLeft2.CssClass = "column-left2";
TextBox txt1 = new TextBox();
columnLeft2.Controls.Add(txt1);
pnlEmployeeBox.Controls.Add(columnLeft2);
columnLeft2 = new HtmlGenericControl("div");
txt1 = new TextBox();
pnlEmployeeBox.Controls.Add(columnLeft2);
// and same goes for the dropdown list
}