Develop Reference

Close Modal Pop up after submit message in server side

I have a bootstrap modal pop up. Inside that there are many controls and submit button. So after successfully submitting I want to close that pop up. Below is the code which shows the message as Record Saved successfully.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
}
But with this, I want to close the modal popup which I am unable to. here is that div
<div class="modals">
<form id="frmFileUpload" runat="server">
<div class="col-sm-6">
<asp:HiddenField ID="hdnFileInfo" runat="server" />
<asp:HiddenField ID="hdnClose" runat="server" />
<label>Sap ID</label>
<asp:Label ID="lblSapId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Candidate ID</label>
<asp:Label ID="lblCandidateId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Technical Feasible</label>
<div class="selectWraper">
<asp:DropDownList ID="ddlTechFeasible" runat="server">
<asp:ListItem Text="Select" Value="Select" />
<asp:ListItem Text="YES" Value="YES" />
<asp:ListItem Text="NO" Value="NO" />
</asp:DropDownList>
</div>
</div>
<div class="col-sm-6">
<div class="upload">
<label>Upload Document</label>
<asp:HiddenField ID="hdnGetFileName" runat="server" />
<div id="dvFileUpload">
<asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" CssClass="chooseFile" />
</div>
</div>
</div>
<div class="col-sm-6">
<label>Remarks</label>
<asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine" />
</div>
<div class="col-sm-6" style="overflow: auto; height: 100px;">
<asp:GridView ID="grdFilesInfo" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
<Columns>
<asp:BoundField DataField="Text" HeaderText="Uploaded Files" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" ToolTip="download files" CssClass="fa fa-download" CommandArgument='<%# Eval("Value") %>' runat="server" OnClick="lnkDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" ToolTip="delete files" CssClass="fa fa-trash-o" CommandArgument='<%# Eval("Value") %>' runat="server" OnClientClick="if (!confirm('Are you sure you want delete the file?')) return false;" OnClick="lnkDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="clearfix"></div>
<div class="modalButton">
<asp:Button ID="btnSaveDraft" runat="server" Text="Save as Draft" OnClick="btnSaveDraft_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" data-dismiss="modal" OnClick="btnSubmit_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
</div>
</form>
</div>

JQuery and Ajax are your friend here.
You could just add this inside a document.ready...
$(document).ready(function() {
$('#<%= btnSubmit.ClientID %>').on('click', function () {
$('.modals').hide(); // hides anything with 'modals' as the class
}
}
You could also just give the modal an ID and use $('#ModalID').hide();
You could assign a static id to the submit button, but the <%= btnSubmit.ClientID %> will pull out the ID for you.
Is this an ajax operation? From the code you have there it looks like it would perform a postback and reload the page anyway.

if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Popup", "closePopUP();", true);
}
function closePopUP(){
$(".modals").modal('hide');
}

Value from hidden field in Panel ASP.NET has empty value after Link button click

I have panel in my HTML like this:
<asp:Panel ID="cropPanel" runat="server">
<div class="col-xs-6">
<h3 style="text-align:center; text-decoration:solid;">Before image: </h3>
<img style="width:100%;" id="before" src="" runat="server" />
<asp:HiddenField ID="X1" runat="server" />
<asp:HiddenField ID="Y1" runat="server" />
<asp:HiddenField ID="W1" runat="server" />
<asp:HiddenField ID="H1" runat="server" />
</div>
<!-- After image -->
<div class="col-xs-6">
<h3 style="text-align:center; text-decoration:solid;">After image: </h3>
<img style="width:100%;" id="after" src="" runat="server" />
<asp:HiddenField ID="X2" runat="server" />
<asp:HiddenField ID="Y2" runat="server" />
<asp:HiddenField ID="W2" runat="server" />
<asp:HiddenField ID="H2" runat="server" />
</div>
</asp:Panel>
This is the logic for getting the cropped image new dimensions using jQuery/JavaScript like following:
$('#<%=before.ClientID%>').Jcrop({
onSelect: SelectCropArea
});
function SelectCropArea(c) {
$('#<%=X1.ClientID%>').val(parseInt(c.x1));
$('#<%=Y1.ClientID%>').val(parseInt(c.y1));
$('#<%=W1.ClientID%>').val(parseInt(c.w1));
$('#<%=H1.ClientID%>').val(parseInt(c.h1));
}
$('#<%=after.ClientID%>').Jcrop({
onSelect: SelectCropArea2
});
function SelectCropArea2(c) {
$('#<%=X2.ClientID%>').val(parseInt(c.x2));
$('#<%=Y2.ClientID%>').val(parseInt(c.y2));
$('#<%=W2.ClientID%>').val(parseInt(c.w2));
$('#<%=H2.ClientID%>').val(parseInt(c.h2));
}
And when I press the link button event:
<asp:LinkButton ID="linkCrop" OnClick="linkCrop_Click" runat="server">Save & Upload</asp:LinkButton>
Code behind:
Rectangle CropAreaBefore = new Rectangle(Int32.Parse(X1.Value), Int32.Parse(Y1.Value), Int32.Parse(W1.Value), Int32.Parse(H1.Value));
Rectangle CropAreaAfter = new Rectangle(Int32.Parse(X2.Value), Int32.Parse(Y2.Value), Int32.Parse(W2.Value), Int32.Parse(H2.Value));
//The `X1/Y1/W1/H1 and X2/Y2/W2/H2 are empty
What am I doing wrong here??
Edit: I checked whether the values are set properly in jquery, they are, here's the pic showing it:

How to load/show asp.net form(panel) on click

I have a form with some data inside my .aspx webform
I also have a button. When i click that button, i need to load another, exactly the same form, but without refreshing the site, so i wouldn't loose any data in the previous form.
How can i do this?
<form id="form1" runat="server">
<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label><br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox><br />
<span style="color:red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span><br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label><br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox><br />
<button id="btnAddNewProduct" class="form-control">Add new product</button>
UPDATE
.aspx
<script src="Content/jquery-1.12.2.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Content/bootstrap.min.js"></script>
<script src="Content/hideForm.js"></script>
<script src="Content/live-preview.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#accordion" ).accordion();
} );
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.ticket').click(function () {
$(".skrijPrvo").slideToggle();
});
});
</script>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form id="form1" runat="server">
<div class="form-group">
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder><br />
</div>
<asp:Button ID="Button2" runat="server" class="form-control" Text="Zaključi nakup"/><br />
<asp:Button ID="Button3" runat="server" class="form-control" Text="Nazaj"/><br />
<asp:Button ID="Button4" runat="server" Text="Dodaj nov artikel" class="ticket" OnClick="AddControl_Click" /><br />
</form>
</div>
</div>
</div>
</div>
ascx
<body>
<div id="accordion">
<h3>Dodaj nov izdelek</h3>
<div class="skrijPrvo">
<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label><br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox><br />
<span style="color:red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span><br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label><br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox><br />
<span style="color:red"><asp:Label ID="errorKolicina" runat="server"></asp:Label></span><br />
<asp:DropDownList ID="inputDropdownList" class="form-control" runat="server">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="Material1" Value="Material1"></asp:ListItem>
<asp:ListItem Text="Material2" Value="Material2"></asp:ListItem>
<asp:ListItem Text="Material3" Value="Material3"></asp:ListItem>
</asp:DropDownList><br />
<span style="color:red"><asp:Label ID="errorDropDown" runat="server"></asp:Label></span><br />
<asp:FileUpload ID="fileUpload" runat="server" class="form-control" onchange="readURL(this)" /><br />
<span style="color:red"><asp:Label ID="errorFileUpload" runat="server"></asp:Label></span><br />
<asp:Image ID="fileUploadImg" class="form-control" runat="server" Height="300px"/><br />
</div>
</div>

I think you are looking for dynamically added User Controls.
Add a new User Control to your project and put your form in it.
<asp:Label ID="labelOpis" runat="server" Text="Opis izdelka"></asp:Label>
<br />
<asp:TextBox ID="inputTextArea" class="form-control" runat="server"></asp:TextBox>
<br />
<span style="color: red"><asp:Label ID="errorOpis" runat="server"></asp:Label></span>
<br />
<asp:Label ID="labelKolicina" runat="server" Text="Količina"></asp:Label>
<br />
<asp:TextBox ID="inputKolicina" type="number" class="form-control" runat="server"></asp:TextBox>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
On the page that will contain the Controls you need to add a PlaceHolder
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<br />
<asp:Button ID="AddControl" runat="server" Text="Button" OnClick="AddControl_Click" />
Then you need to (re)create the User Controls on every Page Load and the Add Control button click.
protected void Page_Load(object sender, EventArgs e)
{
//check if the viewstate exists and if so, build the controls
if (ViewState["controlCount"] != null)
{
addControls(Convert.ToInt32(ViewState["controlCount"]));
}
else
{
//if not add just 1 control
addControls(1);
}
}
private void addControls(int n)
{
//loop the amount of controls and add them to the placeholder
for (int i = 0; i < n; i++)
{
UserControl1 control = (UserControl1)LoadControl("~/UserControl1.ascx");
PlaceHolder1.Controls.Add(control);
}
//save the control count into a viewstate
ViewState["controlCount"] = PlaceHolder1.Controls.Count;
}
protected void AddControl_Click(object sender, EventArgs e)
{
//add an extra control
addControls(1);
}
UPDATE
You can access the values of the TextBoxes by setting a property in the User Control with a getter and a setter.
public string textBox1
{
get
{
return TextBox1.Text;
}
set
{
TextBox1.Text = value;
}
}
protected void Page_Load(object sender, EventArgs e)
{
}
And now you can access them from the Parent by looping all the controls and get the value.
foreach (UserControl1 control in PlaceHolder1.Controls)
{
Label1.Text += control.textBox1 + "<br>";
}

add you code inside
<asp:updatepanel>
tag and add onclick properties to you button. After that you can write your business code in code behind (aspx.cs). This is default ajax in asp.net

JavaScript Telerik if replacement

Using teleriks drag and drop demo I'm able to reproduce the functionality, however, what I want to do is if the browser isn't HTML5 compliant I want to load a different function. Below is the code i'm using.
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$("<span><strong>Your browser does not support Drag and Drop. Please take a look at the info box for additional information.</strong></span>"));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
}
}
</script>
I realize that you want to replace this section with the code you want:
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
How do I include whats below in this in the .replaceWith(
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
<div style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
</div>

This is how I did it, by creating additional divs and hiding elements based on divs
<script type="text/javascript">
var $ = $telerik.$;
function pageLoad() {
if (!Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".wrapper").replaceWith(
$(""));
}
}
function added(sender, args) {
if (Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable()) {
$(".ruDropZone").html("<div align=\"center\"><img src=\"images/logo.png\" width = \"300\"></div>");
$(".nonHTML5").replaceWith(
$(""));
}
}
</script>
<div class="wrapper">
<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" OnClientAdded="added" OnFileUploaded="RadAsyncUpload1_FileUploaded">
</telerik:RadAsyncUpload>
<br />
<telerik:RadProgressManager ID="Radprogressmanager1" runat="server" />
</div>
<div class ="nonHTML5" style="position:relative;">
<table>
<tr>
<td id="controlContainer">
<telerik:RadUpload
ID="RadUpload1" runat="server"
MaxFileInputsCount="5"
OverwriteExistingFiles="false" />
<telerik:RadProgressArea id="progressArea1" runat="server"/>
</td>
<td>
<div class="smallModule">
<div class="rc1"><div class="rc2"><div class="rc3" style="width:240px">
<asp:Label ID="labelNoResults" runat="server" Visible="True">No uploaded files yet</asp:Label>
<asp:Repeater ID="repeaterResults" runat="server" Visible="False">
<HeaderTemplate>
<div class="title">Uploaded files in the target folder:</div>
</HeaderTemplate>
<ItemTemplate>
<%#DataBinder.Eval(Container.DataItem, "FileName")%>
<%#DataBinder.Eval(Container.DataItem, "ContentLength").ToString() + " bytes"%>
<br />
</ItemTemplate>
</asp:Repeater>
</div></div></div></div>
</td>
</tr>
</table>
</div>
<asp:Button id="buttonSubmit" runat="server" CssClass="RadUploadSubmit" OnClick="buttonSubmit_Click" text="Submit" />
</td>
</tr>

ScriptManager.RegisterClientScriptBlock doesnot open window in specified sizes

Hello everyone iam trying to open a aspx page in a dialog box window from asp button click event but even after specifying the dialog height and dialog width i want i could see dialog window opening in a default size.It seems like the height and width parameters i am passing are ignored.
Here is the Server Side Code:
ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(),Guid.NewGuid().ToString(), "try { showMessageRulesDialog('MessageRuleCenterFrame.htm', true); }catch(e){alert(e);}", true);
JavaScript Code:
function showMessageRulesDialog(dialogName, refresh)
{
try {
var WinSettings = "wcenter:yes;resizable:no;onscroll:off;dialogHeight:700px;dialogWidth:610px;";
var ret = window.showModalDialog("../Dialogs/" + dialogName,"", WinSettings);
if (refresh) {
window.location = window.location;
}
}
catch (e)
{ alert("ShowDialog Error: " + e); }
}
HtmPage Properties
<iframe src="MessageRulesCenter.aspx" style="height:700px;width:610px;" frameborder="0" scrolling="yes"></iframe>
MessageRulesCenter.aspx
<%# Page Language="C#" AutoEventWireup="true" CodeFile="MessageRulesCenter.aspx.cs" Inherits="Dialogs_QuotaCenter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--<base target="_blank" /> --%>
<title>Quota Message Center</title>
<link rel="Stylesheet" href="../Skins/QuotaCenter.css" />
<script language="javascript" type="text/javascript" src="../Scripts/Common.js"></script>
<style type="text/css">
#form1
{
height: 450px;
width: 581px;
}
.formfield * {
vertical-align: middle;
border-width:0px;
}
</style>
</head>
<body style="text-align: left">
<form id="form1" runat="server">
<table style="height: 437px; width: 582px" >
<tr>
<td bgcolor="#91ACFF">
<div class="Section" id="Sec1">
<div>
<br />
<asp:Label ID="Label1" runat="server" Text="Message Rule Name : "
ForeColor="Black" Font-Bold="False"></asp:Label>
<asp:TextBox ID="txtRuleName" runat="server"></asp:TextBox>
<br /><br />
</div>
<div>
<asp:Label ID="Label2" runat="server" ForeColor="Black"
Text="Create Message Rule On :" Font-Bold="False"></asp:Label>
<br />
<br />
</div>
</div>
<div class="Section" id="Sec2">
<div>
<asp:RadioButton ID="rdoIncoming" GroupName="MessageRules" runat="server" ForeColor="Black"
Text="Incoming Message" AutoPostBack="True"
oncheckedchanged="rdoOutgoing_CheckedChanged" />
<asp:RadioButton ID="rdoOutgoing" GroupName="MessageRules" runat="server" ForeColor="Black"
Text="Outgoing Message" oncheckedchanged="rdoOutgoing_CheckedChanged"
AutoPostBack="True" />
<br />
<br />
</div>
<div>
<asp:Label ID="Label3" runat="server" ForeColor="Black" Text="Where"></asp:Label>
<br />
</div>
<div>
<p class="formfield">
<asp:Label ID="lblField1" runat="server" ForeColor="Black" Text="From field Contains :"></asp:Label>
<asp:TextBox ID="txtField3" runat="server" Width="272px" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btnAddContact" runat="server" Text="Add Contact" Width="102px" onclick="btnAddContact_Click"/>
<br />
</p>
</div>
<div>
<p class="formfield">
<asp:Label ID="lblFiled2" runat="server" ForeColor="Black" Text="Subject Contains :"></asp:Label>
<asp:TextBox ID="txtField4" runat="server" Width="270px"></asp:TextBox>
<br />
</p>
</div>
</div>
<div class="Section" id ="Sec3">
<div>
<asp:Label ID="Label4" runat="server" ForeColor="Black" Text="Then"></asp:Label>
</div>
<div>
<p class="formfield">
<asp:RadioButton ID="rdoMove" runat="server" GroupName ="ActionType" ForeColor="Black" Text="Move it to the Folder : " />
<asp:DropDownList ID="ddlMove" runat="server" Width="165px" onselectedindexchanged="ddlMove_SelectedIndexChanged" >
</asp:DropDownList>
</p>
</div>
<div>
<p class="formfield">
<asp:RadioButton ID="rdoCopy" runat="server" GroupName ="ActionType" ForeColor="Black" Text="Copy it to the Folder : " />
<asp:DropDownList ID="ddlCopy" runat="server" Width="165px" onselectedindexchanged="ddlMove_SelectedIndexChanged" >
</asp:DropDownList>
</p>
</div>
<div style="text-align:right">
<asp:Label ID="lblError" runat="server"></asp:Label>
<p class="formfield">
<asp:Button ID="btnDone" runat="server" Text="Done" OnClick="btnDone_Click" Width="61px" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Cancel" />
</p>
</div>
</div>
</td>
</tr>
</table>
</form>

I tried your code and it seems it works fine. My guess for why it is not working as expected could be because of the browser version.
Check if you get the required behavior if you remove the Doctype declaration (the top most line in the page).