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!
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
}
How to save an image to the specific folder using HTTP POST method in asp.net c#?
This is my front-end page and I want to get an image in the C# page which can be saved to the specific folder.
I tried "Request.Files["value_resource_image"]" in c# page but its not working!
Thank You!
<form role="form" method="post" action="post.aspx" id="form2" >
<div class="box-body">
<div class="form-group">
<label>Resource ID</label>
<asp:TextBox ID="value_resource_id" ReadOnly="true" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Resource ID"></asp:TextBox>
</div>
<div class="form-group">
<label>Resource Name</label>
<asp:TextBox ID="value_resource_name" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Resource Name"></asp:TextBox>
</div>
<div class="form-group">
<label>Resource Type</label>
<asp:DropDownList ID="value_resource_type" ReadOnly="true" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Resource Type">
</asp:DropDownList> </div>
<div class="form-group">
<label>Category</label>
<asp:DropDownList ID="value_resource_category" ReadOnly="true" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Category">
</asp:DropDownList> </div>
<div class="form-group">
<label>Sub-Category</label>
<asp:DropDownList ID="value_resource_sub_category" ReadOnly="true" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Category">
</asp:DropDownList>
</div>
<div class="form-group">
<label>Resource Description</label>
<asp:TextBox ID="value_resource_description" TextMode="MultiLine" runat="server" class="form-control" placeholder="Enter Resource Description"></asp:TextBox>
</div>
<div class="form-group">
<label>Auther</label>
<asp:TextBox ID="value_resource_auther" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Resource Auther"></asp:TextBox>
</div>
<div class="form-group">
<label>Publisher</label>
<asp:TextBox ID="value_resource_publisher" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Resource Publisher"></asp:TextBox>
</div>
<div class="form-group">
<label>Resource Quantity</label>
<asp:TextBox ID="value_resource_quantity" runat="server" class="form-control" required="true" maxlength="110" placeholder="Enter Resource Quantity"></asp:TextBox>
</div>
<div class="form-group">
<label>Image</label>
<div class="row">
<div class="col-lg-6">
<asp:PlaceHolder ID="resource_image_modal" runat="server"></asp:PlaceHolder>
</div><asp:FileUpload ID="value_resource_image" style="margin-top:50px;" runat="server" /></div>
</div>
<div class="form-group">
<label>Status</label>
<asp:DropDownList ID="value_status" runat="server" class="form-control" required maxlength="110" placeholder="Enter Date of Birth">
</asp:DropDownList>
</div>
</div>
Close
Litteraly i have a problem when put file upload in modal. On this problem, i have a modal bootstrap which have sort of textbox and fileupload as mandatory. When user click save button, then the table or in this case a gridview show name of file and added year while keep the modal is alive and not getting postback or closed.This illustration can be seen here
As long i have tried, i am using update panel to keep the bootstrap alive, but unfortunately, the backdraw is i cannot get any fileupload data. Can anyone tell me how to solve this problem ? or are there any ways to fulfill the condition above, as long as the modal keep alive when user keep save and the gridview is updated? Thank you :)
PS: this is my code
<asp:ScriptManager runat="server" ID="ScriptManager2" />
.....
<asp:Panel ID="pnlRegistrationPhase6" runat="server">
<div class="modal fade " id="registerStep6" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<asp:UpdatePanel runat="server" ID="updRegistrationStep6">
<ContentTemplate>
<div class="modal-body ac-modal-success p-a0">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-4 col-md-4 p-l0 hidden-sm hidden-xs img-content">
<img src="images/form_registrasi-14-14.jpg" class="img img-responsive btn-block">
</div>
<div class="col-xs-12 pt-15 pb-10 m-b20 hidden-lg hidden-md heading-reg6">
<button type="button" class="close button-close-cust" data-dismiss="modal">X</button>
<h4 class="text-strong m-t5">Certification</h4>
<ul>
<li>Maximum 3 (three) latest certifications which sorted from the last, required if already have certifications</li>
</ul>
</div>
<div class="col-lg-8 col-md-8 col-lg-offset-4 col-md-offset-4 form-content">
<div class="col-lg-12 p-r m-b10">
<button type="button" class="close button-close-cust" data-dismiss="modal">X</button>
</div>
<div class="col-lg-12 mt-20">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<p class="text-primary text-strong m-b0">Do you have Certification?</p>
<span>(Internship or Final Paper isn't considered as Certification)</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<div class="radio radio-primary radio-inline">
<asp:RadioButton runat="server" ID="yescertification" ClientIDMode="Static" OnClick="showStep6();" GroupName="certification" />
<label for="yescertification">Yes</label>
</div>
<div class="radio radio-primary radio-inline">
<asp:RadioButton runat="server" ID="nocertification" ClientIDMode="Static" OnClick="hideStep6();" GroupName="certification" />
<label for="nocertification">No</label>
</div>
</div>
</div>
</div>
<div id="step6Content" class="col-lg-12 no-padding hide">
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Name of Certification<span class="text-danger">*</span></label>
<div class="col-lg-6">
<span class="has-float-label">
<asp:TextBox runat="server" ID="txtCertificationName" ClientIDMode="Static" placeholder=" " CssClass="form-control form-flat" ValidationGroup="txtCertificationName" />
<label class="text-small" for="certname">Certification Name</label>
</span>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ErrorMessage="Please Insert Certification Name" ControlToValidate="txtCertificationName" runat="server" ValidationGroup="txtCertificationName" />
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Institution/Company<span class="text-danger">*</span></label>
<div class="col-lg-6">
<span class="has-float-label">
<asp:TextBox runat="server" ID="txtCertificationInstitution" ClientIDMode="Static" placeholder=" " CssClass="form-control form-flat" ValidationGroup="txtCertificationInstitution" />
<label class="text-small" for="instname">Institution Name</label>
</span>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ErrorMessage="Please Insert Certification Institution/Company" ControlToValidate="txtCertificationInstitution" runat="server" ValidationGroup="txtCertificationInstitution" />
</span>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Year of Certification<span class="text-danger">*</span></label>
<div class="col-lg-2">
<div class="form-group has-float-label">
<asp:DropDownList runat="server" ID="ddlYearCertification" CssClass="form-control form-flat minimal" ValidationGroup="ddlYearCertification" Width="100%" OnChange="removeTextddlYearCertification();" ClientIDMode="Static">
</asp:DropDownList>
<span class="text-danger text-small" style="color: #D64541">
<asp:RequiredFieldValidator ID="rfvddlYearCertification" ErrorMessage="Please Insert Year" ControlToValidate="ddlYearCertification" runat="server" Display="Dynamic" ValidationGroup="ddlYearCertification" InitialValue="0" />
</span>
<!--<label for="certyear">Combo Box</label>-->
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<label class="col-lg-3 control-label text-strong text-right">Upload Certificate</label>
<div class="col-lg-9">
<div class="media">
<div class="media-left media-middle">
<div class="box-upload">
<span class="btn btn-primary btn-pill">
<asp:FileUpload runat="server" ID="FileUploadCertificate" CssClass="hidden" />
<label for="file" class="m-b0">Choose File</label>
</span>
</div>
</div>
<div class="media-body media-middle">
<span class="text-danger text-small" style="color: #D64541;">There was an error uploading images.
<br>
Please check and try again.</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
<asp:Button Text="Save" runat="server" CssClass="btn btn-primary btn-pill btn-modal-width" ID="btnSaveCertification" CausesValidation="true" OnClick="btnSaveCertification_Click " />
<asp:Button Text="Clear" runat="server" CssClass="btn btn-primary btn-pill m-l20 btn-modal-width" ID="btnClearCertification" OnClick="btnClearCertification_Click" />
<%-- <button class="btn btn-primary btn-pill btn-modal-width">Save</button>
<button class="btn btn-primary btn-pill m-l20 btn-modal-width">Clear</button>--%>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="row form-group">
<div class="col-lg-9 col-lg-offset-3">
</div>
</div>
</div>
</div>
<div class="col-lg-12 m-t20">
<div class="row form-group m-t20">
<div class="col-lg-8 col-lg-offset-3">
<button type="button" class="btn btn-primary btn-pill btn-modal-width" data-toggle="modal" data-target="#registerStep5" data-dismiss="modal">Previous</button>
<button type="button" class="btn btn-default btn-pill m-l20 btn-modal-width" data-toggle="modal" data-target="#registerStep7" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnClearCertification" />
<asp:AsyncPostBackTrigger ControlID="btnSaveCertification" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
</div>
</asp:Panel>
<div id="search-container">
<div class="form-inline">
<asp:DropDownList ID="drpSearchFilter" runat="server" CssClass="form-control">
<asp:ListItem>Title</asp:ListItem>
<asp:ListItem>Author</asp:ListItem>
<asp:ListItem>Keywords</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="txtSearchBox" CssClass="form-control" runat="server"/>
<asp:Button ID="btnSearch" runat="server" Text="Search" CssClass="btn btn-default" OnClick="btnSearch_Click"/>
</div>
</div>
Right now all of these controls are appearing on separate lines.
Try this one (from the Bootstrap documentation):
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>