I need partial render with ajax; I don't know what is wrong. ¿What is the problem?
My code:
ascx
<div id="temasatratar" onclick="__doPostBack('UpdatePanel1', '');"><h1>Temas a tratar</h1></div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
</ContentTemplate>
</asp:UpdatePanel>
ascx.cs
protected void UpdatePanel1_Load(object sender, EventArgs e)
{
Random rnd = new Random();
int number = rnd.Next(0, 99999);
Label1.Text = "Best "+number;
}
Any suggest?
My application: Sharepoint - Visual web part / C# / Asp.Net / Visual Studio
I would use a fake-button that is invisible as trigger for the UpdatePanel:
<div id="temasatratar" onclick="__doPostBack('fakeButton', '');"><h1>Temas a tratar</h1></div>
<asp:LinkButton ID="fakeButton" style="display:none" runat="server" Text="foo" OnClick="fakeButton_Click" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="fakeButton" />
</Triggers>
</asp:UpdatePanel>
Now this click-event is handled in an async postback when the user clicks on the div.
protected void fakeButton_Click(Object sender, EventArgs e)
{
// you are in an asynchronous postback now
}
Related
SelectedIndexChanged only works after form submit.If i select the data from drpdown list that it selects the index and gets data from database to texboxes.But it doesnot do that instead if i click the submit button it shows the data
I tried using postback but it didn't work.Is there any alternative to solve this problem.
Html
<div class="col-md-4">
<asp:Label ID="Label10" runat="server" Text="Related Word"></asp:Label>
<asp:UpdatePanel ID="update" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtRelatedWord" runat="server" class="form-control" AutoPostBack="true" OnTextChanged="txtRelatedWord_TextChanged" placeholder="Word" ></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="txtRelatedWord" EventName="TextChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
<div class="col-md-4" style="margin-top:37px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:DropDownList ID="cmbRelatedWord" CssClass="form-control" AutoPostBack="true" OnSelectedIndexChanged="cmbRelatedWord_SelectedIndexChanged" runat="server" >
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="cmbRelatedWord" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</div>
Code Behind
private static void InsertRequest(ref RequestModel model, string connection)
{
using(var con = new SqlConnection(connection))
{
using(var cmd = new SqlCommand("Insert into infromationRequests (Gender, Age, IsMedicine, IsTransplant, Operations, ResponseJson) values (#Gender, #Age, #IsMedicine, #IsTransplant, #Operations, NULL); SELECT SCOPE_IDENTITY();", con))
{
cmd.Parameters.AddWithValue("#Gender", model.Gender);
cmd.Parameters.AddWithValue("#Age", model.Age);
cmd.Parameters.AddWithValue("#IsMedicine", model.Medicine);
cmd.Parameters.AddWithValue("#IsTransplant", model.Transplant);
cmd.Parameters.AddWithValue("#Operations", model.Operations);
con.Open();
model.Id = Convert.ToInt32(cmd.ExecuteScalar());
con.Close();
}
}
}
Well, I managed to do a simple test which worked fine :
Back :
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Console.WriteLine("Load triggered");
}
protected void ddlist_SelectedIndexChanged(object sender, EventArgs e)
{
Console.WriteLine("event triggered");
tb.Text = (sender as DropDownList).SelectedValue;
}
}
And front :
<asp:ScriptManager runat="server" ID="smanager"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upanel">
<ContentTemplate>
<asp:DropDownList ID="ddlist" runat="server" OnSelectedIndexChanged="ddlist_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
</asp:DropDownList>
<asp:TextBox runat="server" ID="tb" Text="Default"></asp:TextBox>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlist" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
According to this I can give you those clues :
Did you try to put both component in the same Update panel ?
Are you sure your event isn't triggered ? Or mayeb you just didn't used any Postback check in your page ? If you don't check if your page is a postback on page load, then your component contents will be reloaded before the even is triggered.
<asp:UpdatePanel id="up1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:CheckBox ID="chkParent" runat="server" autopostback="true" OnCheckedChanged="chkParent_OnCheckedChanged" />
<asp:DataList ID="ChildList" runat="server" OnItemDataBound="ChildList_OnItemDataBound">
</ContentTemplate>
</asp:UpdatePanel>
protected void chkParent_OnCheckedChanged(object sender, EventArgs e)
{
this.ChildList.DataSource = this.ChildValues;
this.ChildList.DataBind();
}
On check changed of parent, child gets updated but the entire page also loads. Any way to avoid it?
Is there a way to update a textbox without using postback? I'd like to populate the txtDFS field with the value of (100 - txtStocked) after the user enters data in the txtStocked field.
The following code works, but it uses postback so the page refreshes. Is there a way to accomplish this without refreshing the page?
<asp:TextBox ID="txtStocked" runat="server" Width="75px" AutoPostBack="true" OnTextChanged="txtStocked_TextChanged"></asp:TextBox>
<asp:TextBox ID="txtDFS" runat="server" Width="75px"></asp:TextBox>
protected void txtStocked_TextChanged(object sender, EventArgs e)
{
int stocked = Convert.ToInt16(txtStocked.Text);
int dfs = (100 - stocked);
txtDFS.Text = dfs.ToString();
txtDFS.Text = txtStocked.Text;
}
Solved this by using an UpdatePanel. Here is the updated code:
<asp:ScriptManager ID="SCManager" runat="server" />
<asp:UpdatePanel ID="SCPanel" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:TextBox ID="txtStocked" runat="server" Width="75px" autopostback="true" OnTextChanged="Update_Text"></asp:TextBox>
<asp:TextBox ID="txtDFS" runat="server" Width="75px" ReadOnly="True"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
protected void Update_Text(object sender, EventArgs e)
{
int stocked = Convert.ToInt16(txtStocked.Text);
int dfs = (100 - stocked);
txtDFS.Text = dfs.ToString();
SCPanel.Update();
}
My code works fine when used in a normal webform. but when I use it in a webform using masterpages, It doesn't work.
page header : ~/Manager/BaseManager.master
and some nested master pages : Base.master > Pages.master > BaseManager.master
ASP
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger EventName="Click"
ControlID="btnUpdateEditPage" />
</Triggers>
<ContentTemplate>
<asp:Label ID="lblTest" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnUpdateEditPage" CssClass="btnUpdateEditPage" runat="server"
Text="Button" OnClick="btnUpdateEditPage_Click" />
C#
protected void btnUpdateEditPage_Click(object sender, EventArgs e)
{
lblTest.Text += "**";
}
Do the following please:
1- Add UpdatePanel1.Update(); like the following:
protected void btnUpdateEditPage_Click(object sender, EventArgs e)
{
lblTest.Text += "**";
UpdatePanel1.Update();
//Your UpdatePanel should be UpdateMode="Conditional" as what you have now..
}
2- Put the button inside the update Panel
3- Remove the Trigger to not fire a post back, so your code has to be like:
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTest" runat="server" Text="Label"></asp:Label>
<asp:Button ID="btnUpdateEditPage" CssClass="btnUpdateEditPage" runat="server"
Text="Button" OnClick="btnUpdateEditPage_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Place the button inside UpdatePanel.
SOLVED.
I change
<form id="form1" runat="server" action="post">
to
<form id="form1" runat="server">
and my problem solved.
But why?!
Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:
Display a ModalPopup to prevent the user from pressing any buttons or changing values
Call my code behind method, hiding the ModalPopup when finished
Here is the ASP markup:
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="btnSaveData" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Now, here is my code behind C# code:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.Enabled = false;
}
Why doesn't this work? The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires.
UPDATE: The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
popup is ALWAYS equal to null.
FINAL UPDATE: This is my final solution for getting this to work (Take specific note of the use of OnClientClick AND OnClick):
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="pnlHidden" runat="server" style="display: none;">
<div>
<h1>Saving...</h1>
</div>
</asp:Panel>
<cc1:ModalPopupExtender ID="modalPopup"
BackgroundCssClass="modalBackground" runat="server"
TargetControlID="hdnField" PopupControlID="pnlHidden"
BehaviorID="ShowModal">
<asp:HiddenField ID="hdnField" runat="server" />
</cc1:ModalPopupExtender>
<asp:Button ID="btnSaveData" runat="server" Text="Save Data"
OnClientClick="showModal();" OnClick="btnSaveData_Click" />
</ContentTemplate>
</asp:UpdatePanel>
Using this Javascript function:
function showModal() { $find('ShowModal').show(); }
... And this code behind:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.hide();
}
Try this.
Create a dummy hidden field:
<asp:HiddenField ID="hdnField" runat="server" />
Set the TargetcontrolID = "hdnField" in your Modal Popup declaration.
In your btnSaveData_Click event, do this:
modalPopup.Show();
Try this. It is 100% working
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
<asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<input type="button" value="Get" onclick="abc()" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
PopupControlID="Panel1">
</asp:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Server side code
protected void Btnshow_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
ModalPopupExtender1.Hide();
}
First attempt: Try to set your ButtonID into OkControlID Tag and try again
OR
Second attempt: Call your event over javascript there seems to be some problems with click events
<div>
<cc1:ModalPopupExtender PopupControlID="Panel1"
ID="ModalPopupExtender1"
runat="server" TargetControlID="LinkButton1" OkControlID="Ok"
OnOkScript="__doPostBack('Ok','')">
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
<asp:Panel ID="Panel1" runat="server">
<asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />
</asp:Panel>
From this example you can easily control panel show up depends on conditions instead of just immediately show up panel once you click button.
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server"
TargetControlID="hdnField"
ID="btnAdd_ModalPopupExtender"
PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>
//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
if( dt.Rows.Count == 0 )
{
btnAdd_ModalPopupExtender.Show();
}
else
{
add();
}
}
In code behind, you can do this:
if (true)
{
var script = #"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}
Change this 'behavoirIDModal'