I am developing an ASP.NET webforms app, and I have a minor problem.
The page contains a GridView control that displays a list of office records, and the user can either add a new record or edit an existing one.
Either way, a Bootstrap modal form is launched. When the user clicks the 'Edit' button in the GridView, it loads the full record using the DataKey value of the selected row, and that SHOULD populate the fields of the modal form, which is then displayed.
The thing is, all of this works, except when the form opens, the fields are blank. The record does load from the database, and no error occurs, either in the ASP.NET code or in the javascript console in debug mode. Am I missing something about how this should work?
The modal code is as follows:
<div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<div class="col-md-3"> </div>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
<label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
<div class="col-md-9 d-flex">
<asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
<label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
<div class="col-md-3 d-flex">
<asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder="$50.00" runat="server"
CssClass="form-control input-md rounded w-50" />
</div>
</div>
</div>
<input type="hidden" id="tbID" runat="server" />
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
</div>
</div>
</div>
</div>
And the code in the ASP.NET code-behind file to load the selected record from the GridView into the modal is as follows:
protected void GvOffices_RowCommand ( object sender, GridViewCommandEventArgs e ) {
int dataKeyValue = (int)gvOffices.DataKeys[int.Parse(e.CommandArgument.ToString())].Value;
var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
tbAddress1.Text = ofc.Address1;
tbAddress2.Text = ofc.Address2;
tbCity.Text = ofc.City;
tbGlobalRate.Value = ofc.GlobalRate.ToString ( );
tbLocalRate.Value = ofc.LocalRate.ToString ( );
tbLocalRateCap.Text = string.Format ( "${0}", ofc.LocalRateCap );
tbOfficeMgr.Text = ofc.OfficeMgr;
tbOfficeName.Text = ofc.OfficeName;
tbPhone.Text = ofc.OfficePhone;
tbZIP.Text = ofc.ZIPCode;
tbID.Value = ofc.ID.ToString ( );
ScriptManager.RegisterStartupScript ( this, this.GetType ( ), "Pry", "openModal()", true );
}
Again, all of this code works without throwing an error of any kind, and a record DOES get loaded from the database via a custom object:
var ofc=OfficeDB.Get(dataKeyValue, out bool ok, out string err);
Still, I don't understand why the form fields aren't being populated. Help please?
Well, it turns out the answer is to wrap the modal code in an UpdatePanel control, like so:
<asp:UpdatePanel ID="updModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal fade" id="mdlOffice" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Add/Edit Office Record</h4>
</div>
<div class="modal-body">
<div class="form-group row">
<label for="tbOfficeName" class="col-md-3 text-right col-form-label">Office Name:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeName" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbOfficeMgr" class="col-md-3 text-right col-form-label">Office Manager:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbOfficeMgr" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbAddress1" class="col-md-3 text-right col-form-label">Street Address:</label>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress1" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<div class="col-md-3"> </div>
<div class="col-md-9 d-flex">
<asp:TextBox CssClass="flex-fill form-control input-md rounded w-100" ID="tbAddress2" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbCity" class="col-md-3 text-right col-form-label">City:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbCity" runat="server"
MaxLength="32" ClientIDMode="Static" />
</div>
<label for="tbZIP" class="col-md-3 text-right col-form-label">ZIP Code:</label>
<div class="col-md-3 d-flex">
<asp:TextBox CssClass="form-control input-md rounded w-100" ID="tbZIP" runat="server"
MaxLength="32" ClientIDMode="static" />
</div>
</div>
<div class="form-group row">
<label for="tbPhone" class="col-md-3 text-right col-form-label">Telephone:</label>
<div class="col-md-9 d-flex">
<asp:TextBox ID="tbPhone" CssClass="form-control input-md rounded w-50" runat="server" ClientIDMode="Static" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRate" class="col-md-3 text-right col-form-label">Local Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbLocalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
<label for="tbGlobalRate" class="col-md-3 text-right col-form-label">Global Rate:</label>
<div class="col-md-3 d-flex">
<input type="number" id="tbGlobalRate" placeholder="0.5" step="0.05" min="0" max="1" runat="server"
class="form-control input-md rounded w-50" />
</div>
</div>
<div class="form-group row">
<label for="tbLocalRateCap" class="col-md-3 text-right col-form-label">Rate Cap:</label>
<div class="col-md-3 d-flex">
<asp:TextBox ID="tbLocalRateCap" ClientIDMode="Static" pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$"
value="" data-type="currency" placeholder="$50.00" runat="server"
CssClass="form-control input-md rounded w-50" />
</div>
</div>
</div>
<input type="hidden" id="tbID" runat="server" />
<div class="modal-footer">
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-success" Text="Save Changes" OnClick="BtnSave_Click" />
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel/Close</button>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
Then, in the code-behind, add this line of code to the RowCommand event of the GridView control just before calling the script code to display the modal:
updModal.Update ( );
This allows me to populate the fields of the form from the code-behind and display them on the click of the GridView.
Thanks for the feedback I did get from some of you guys. Have a great day!
The following code works fine in 4.0 framework but not in 4.5. The form does not raise any error whenth invalid value is typed in textbox that goes against the regex defined. For e.g the txtFees should not allow any alpha characters. But form does not raise any errors any is successfully submitted.
Here is my code.
<%# Page Title="" Language="C#"
MasterPageFile="~/PresentationLayer/MasterPage.master"
AutoEventWireup="true" CodeFile="PackagesAdd.aspx.cs"
Inherits="PresentationLayer_PackagesAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
runat="Server">
<head>
<script src="../src/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="../production/css/sweetalert.css">
<script type="text/javascript">
function JSalert(x) {
swal(x);
}
</script>
</head>
<div class="x_panel">
<div class="x_title">
<h2>
Add Packages </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="x_content">
<br />
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Package Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtPackageName" runat="server" class="form-control col-md-7 col-xs-12"
ValidationGroup="Add"></asp:TextBox>
<asp:RegularExpressionValidator ID="RangeValidator1" runat="server" ControlToValidate="txtPackageName"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[a-zA-Z0-9 -.]{1,}$"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Fees
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtFees" runat="server" class="form-control col-md-7 col-xs-12"
ValidationGroup="Add"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="txtFees"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[0-9.]{1,}$"
SetFocusOnError="True" EnableClientScript="true" ></asp:RegularExpressionValidator>
</div>
</div>
<div class="ln_solid">
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 text-center">
<asp:Button ID="btnSubmit" runat="server" class="btn btn-success" Text="Add" ValidationGroup="Add"
CausesValidation="true" OnClick="btnSubmit_Click" />
</div>
</div>
</div>
</div> </asp:Content>
Try below block of code to resolve your issue.
//Error ValidationGroup.
you should add ValidationGroup name in Validation control.
<%# Page Title="" Language="C#"
MasterPageFile="~/PresentationLayer/MasterPage.master"
AutoEventWireup="true" CodeFile="PackagesAdd.aspx.cs"
Inherits="PresentationLayer_PackagesAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
runat="Server">
<head>
<script src="../src/js/sweetalert-dev.js"></script>
<link rel="stylesheet" href="../production/css/sweetalert.css">
<script type="text/javascript">
function JSalert(x) {
swal(x);
}
</script>
</head>
<div class="x_panel">
<div class="x_title">
<h2>
Add Packages </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false"><i class="fa fa-wrench"></i></a></li>
</ul>
<div class="clearfix">
</div>
</div>
<div class="x_content">
<br />
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Package Name <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtPackageName" runat="server" class="form-control col-md-7 col-xs-12"> </asp:TextBox>
<asp:RegularExpressionValidator ID="RangeValidator1" runat="server" ControlToValidate="txtPackageName" ValidationGroup="Add"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[a-zA-Z0-9 -.]{1,}$"
SetFocusOnError="True"></asp:RegularExpressionValidator>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">
Fees
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<asp:TextBox ID="txtFees" runat="server" class="form-control col-md-7 col-xs-12"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="txtFees" ValidationGroup="Add"
Display="Dynamic" ErrorMessage="Invalid Input" ValidationExpression="^[0-9.]{1,}$"
SetFocusOnError="True" EnableClientScript="true" ></asp:RegularExpressionValidator>
</div>
</div>
<div class="ln_solid">
</div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3 text-center">
<asp:Button ID="btnSubmit" runat="server" class="btn btn-success" Text="Add" ValidationGroup="Add"
CausesValidation="true" OnClick="btnSubmit_Click" />
</div>
</div>
</div>
</div> </asp:Content>
Did you try using setting UnobtrusiveValidationMode to none
protected void Application_Start(object sender, EventArgs e)
{
ValidationSettings.UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;
}
So I'm trying to create a Login button but it seems as it doesnt fire, I've put a few breakpoints inside the eventhandler BtnLogin_Click but it's not reaching it.
Why is that?
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1>
</div>
<form id="loginForm" runat="server" class="user">
<div class="form-group">
<form>
<asp:TextBox TextMode="Email" ID="inputEmail" CssClass="form-control form-control-user" runat="server" placeholder="Enter Email Address..." />
</form>
</div>
<div class="form-group">
<form>
<asp:TextBox TextMode="Password" ID="inputPassword" CssClass="form-control form-control-user" runat="server" placeholder="Password" />
</form>
</div>
<asp:Button ID="LoginBtn" CssClass="btn btn-primary" Text="Login" runat="server" OnClick="BtnLogin_Click" />
</form>
<hr>
<div class="text-center">
<a class="small" href="Register.aspx">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the cs
protected void BtnLogin_Click(object sender, EventArgs e)
{
//Doesnt reach this
}
I have a project with master page and content page in content page design not load as their html,that is project solution version 5. I think this version code changed but I'm trying to recover this from my solution version 4 since appear same problem i'm refreshing my browser but not work.........I don't understand what happened and what should i do now.
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-shopping-cart" aria-hidden="true"> </i>Product Info</h3>
</div>
<div class="panel-body">
<h6> Invoice Number</h6>
<asp:TextBox ID="tbxInvoice" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
<h6> Product Name</h6>
<asp:DropDownList ID="productNameDDL" CssClass="form-control" DataSourceID="" runat="server" OnTextChanged="productNameDDL_TextChanged">
</asp:DropDownList>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-product-hunt" aria-hidden="true"></i> Product Quantity</h3>
</div>
<div class="panel-body">
<h6> Total Quantity</h6>
<asp:TextBox ID="tbxTotalQuantity" CssClass="form-control" onkeyup="setPrice();" runat="server"></asp:TextBox>
<div class="row">
<div class="col-md-6">
<h6> Total Price</h6>
<asp:TextBox ID="tbxTotalPrice" CssClass="form-control" onkeyup="setPrice();" runat="server"></asp:TextBox>
</div>
<div class="col-md-6">
<h6> Price/Item</h6>
<asp:TextBox ID="tbxPricePerItem" CssClass="form-control" ReadOnly="true" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"> <i class="fa fa-dollar" aria-hidden="true"></i> Product Price</h3>
</div>
<div class="panel-body">
<h6> Sale Price/Item</h6>
<asp:TextBox ID="tbxSalePricePerQuantity" CssClass="form-control" runat="server"></asp:TextBox>
<h6> Comments</h6>
<asp:TextBox ID="tbxComments" CssClass="form-control" runat="server"></asp:TextBox>
</div>
</div>
</div>
</div>
For better understand check this design image
Try to check if you don't miss any reference to some CSS class. Try to remove CssClass="form-control" and see what happens.
How to bind a property exist in a related entity in a ListView control :
<asp:ListView ID="lv_science_degree" runat="server" ItemPlaceholderID="scienceDegreeContainer" ItemType="DomainClasses.SCIENCEDEGREE" >
<LayoutTemplate>
<fieldset id="FieldSet1">
<legend>Science Degree </legend>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3">
CODE
</div>
<div class="col-lg-3">
NAME
</div>
<div class="col-lg-3">
CATEGORY
</div>
<div class="col-lg-3">
</div>
</div>
</div>
<asp:PlaceHolder ID="jobDegreeCategoryContainer" runat="server"></asp:PlaceHolder>
</fieldset>
</LayoutTemplate>
<ItemTemplate>
<div id="toappend">
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3 code">
<%#:Item.SDEGREE_CODE%>
</div>
<div class="col-lg-3 name">
<asp:Label ID="lbl_degree_name" Class="lbl_degree_name" runat="server" Text="<%#:Item.DEGREE_NAME.Trim()%>"></asp:Label>
<asp:TextBox ID="txt_degree_name" Class="txt_degree_name HideElement" runat="server" Text="<%#:Item.DEGREE_NAME.Trim()%>"></asp:TextBox>
</div>
<div class="col-lg-3 cat">
<asp:RadioButtonList ID="rbl_degree" runat="server"></asp:RadioButtonList>
<asp:Label ID="lbl_degree_cat" Class="lbl_degree_cat" runat="server" Text="<%#:Item.SCATEGORY_CODE%>"></asp:Label> <%-- Want To Bind to QUALCATEGORY Entity to Bind to the Name instead of the code --%>
</div>
<div class="col-lg-3">
<a id="lbtn_edit" class="btn btn-primary btn-md white_cr" onclick="Edit(this);"><span class="glyphicon glyphicon-pencil"></span></a>
<a id="lbtn_update" class="btn btn-primary btn-md white_cr HideElement lbtn_update" onclick="Update(this);">update</a>
<a id="lbtn_cancel" class="btn btn-primary btn-md white_cr HideElement lbtn_cancel" onclick="Cancel(this);">cancel</a>
<a id="lbtn_delete" class="btn btn-primary btn-md white_cr HideElement lbtn_delete" onclick="Delete(this);">delete</a>
</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
Here I want to bind the list view to QUALCATEGORY joined with SCIENCEDEGREE so that i can bind the label lbl_degree_cat the CategoryName property which exist in QUALCATEGORY entity instead of the CategoryCode in SCIENCEDEGREE entity .
EDIT:
My Bind method :
in .cs file i call the following method in (!IsPostBack)
protected void GetAllScienceDegrees()
{
using (scienceDegreeRepository repo= new scienceDegreeRepository ())
{
lv_science_degree.DataSource = repo.All.ToList();
lv_science_degree.DataBind();
}
}