I have a index page the renders objects from my database as a treeview, each item has a link href="/MessageGroupType/Edit/1002 that makes an Ajax call to display a partial view in a DIV.
Within the partial view there is a delete button which calls my controller to delete the item.
However, i do a check to make sure the item can be deleted, if the item cant be deleted then i wish a pop-up to appear back on the edit form telling the user they cant delete this record.
In my Edit partial view i have the following code
<asp:PlaceHolder runat="server">
<script src="<%= Url.Content("../../Scripts/JQuery/jquery-1.4.1.min.js") %>" type="text/javascript">
</script>
</asp:PlaceHolder>
<script type="text/javascript" >
$(function() {
$("#dialog").dialog();
});
</script>
<% if (Boolean.Parse(ViewData["DisplayWindow"].ToString())){%>
<div id="dialog" title="Cannot Delete Message Group Type">
<p>This Mesage group Type Cannot be deleted as is linked to other message group Types </p>
</div>
<% }%>
So my main questions are
Can i make a reference to a javascript script within my Partial View (i dont want my master page to be called on the partial view)
When i dynamically load the partial view data into my DIV - can i then after calling my controller insert another DIV into the first DIV.
I am i doing this the wrong way - so any pointers is appreciated
Cheers
In your tree view, you can add an Ajax.ActionLink with a OnFailure option in AjaxOptions that will point to your $("#dialog").dialog();
In your controller, if the user can not delete the record associate a bad request code (Response.StatusCode = (int)HttpStatusCode.BadRequest;) to your HttpResponse, so your OnFailure function will be called (and your popup displayed).
Do not forget to associate a OnSuccess function to your Ajax.ActionLink if the record has been deleted
Related
I have a dynamically named DIV in a GridView which contains a user control with a dynamically assigned Parent_ID. The javascript is used to show or hide the DIV. I'll show you two examples of different rows without the ASP code.
Row 1 showing for Order # 123456:
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>
Row 2 showing for Order # 678901:
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel678901');" %>" >+</a>
<div id='Order_Notes_Panel678901' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='678901'/>
</div>
The good news is that the user control binds and works perfectly. The javascript shows (sets the style to "display:block;") and hides (style set to "display:none;") the appropriate DIV each time the '+' is clicked.
Here is my problem: there is a 'Reply' link in the user control that, when clicked, does a post-back and puts the control into Edit mode. When I employ this user control on another page without a containing DIV, you won't notice a thing. However, when the 'Reply' does its post-back, the containing DIV reverts back to style="display:none;".
Can you provide a recommendation how to set the parent DIV's style to "display:block;" while a user is obviously working with it? I would imagine the appropriate code would go in the code behind of the user control when it goes into Edit mode.
Thanks,
Rob
Update: I recognize that there is no runat=server in my DIV. Since I'm trying to establish a dynamic ID for each, I get an error if I try to use the runat. That is probably the reason why I can't reach it from code behind...
I am very happy of myself... (see the YouTube video for this phrase, you'll be glad you did.)
In summary, this is what I added:
1. New Javascript function to add the name of the target DIV to a hidden field (The "collapseExpand" function is in the Site.Master. I couldn't put "load_div_to_hidden" in the Site.Master since "myhiddenField" isn't set up on every page
2. New hidden field to capture the name of the target DIV
3. New Javascript function to run on window.onload, check if we've got a post-back, and then display the value from the hidden field
4. Adding second Javascript call from the href in the link
Below are the new snippets of code:
<script type="text/javascript">
function load_div_to_hidden(obj) {
var hidden = document.getElementById('<%= myhiddenField.ClientID %>');
hidden.value = obj;
}
function windowOnLoad() {
var isPostBack = (('<%= IsPostBack %>').toLowerCase() == 'true') ? true : false;
if (isPostBack == true) {
var hid_field_value = document.getElementById('<%= myhiddenField.ClientID %>').value;
var right_div = document.getElementById(hid_field_value);
right_div.style.display = "block";
}
}
window.onload = windowOnLoad;
</script>
<input type="hidden" id="myhiddenField" runat="server" value="" />
<a href="<%#"javascript:collapseExpand('Order_Notes_Panel123456'); javascript:load_div_to_hidden('Order_Notes_Panel123456');" %>" >+</a>
<div id='Order_Notes_Panel123456' style="display:none;">
<uc:Comments_Control id="Comments_Control_ID" runat="server" Parent_ID='123456'/>
</div>
Works like a charm!
I am a desktop client developer. I now got to continue this project is ASP.NET with AJAX, so I am learning web development the hard way.
I need to get a list of all check boxes and their states from repeater control on Summary.aspx when user clicks button CmdSave on ChoicePage.aspx.
Can I subscribe to event CmdSave_Click() in Summary.aspx or is there some way to approach Summary.aspx's repeater control from ChoicePage.aspx?
(MSDN talks about passing values from page to page in this article but this doesn't help me)
Here is the problem:
Page ChoicePage.aspx is included in Master AppMaster.master page. ChoicePage has Content tag which includes CmdSave and it's event handler CmdSave_Click() and it also includes iframe tag for displaying another page, Summary.aspx
On Summary.aspx I have repeater control which is bound to DataSource and relevant fields are of type bool represented by column of editable check boxes. Clicking these checkboxes mustn't cause Summary.aspx to refresh so I am not looking to handle (server-side) CheckedChanged event.
I am not sure if any code example would help here since this is more a concept question
function SetFrameStatus() {
var v = hdCommand.value.toString().toLowerCase();
hdCommand.value = "";
var frms = (GetFrameAll("FrameSummary"));
if (frms)
{ }
else return;
FrameSummary = frms[0];
DivSummary = FrameSummary.parentNode;
var FrameWindow = frms[1];
var FrameDocument = frms[2];
if (v == "showsummary") {
FrameWindow.location.replace(SummaryPageName);
}
}
<asp:Content ID="ContentSummary" ContentPlaceHolderID="NoUpdateDiv" runat="server">
<div id="DivMenu" class="Flat" style="overflow:visible; display:none;position:absolute;">
<input type="button" id="CmdSave" value="Save" onclick="CmdSave_Click()" />
</div>
<div id="DivSummary" style="position:absolute;margin:0px;padding:0px;display:none">
<iframe title="Loading" id="FrameSummary" marginheight="0px" marginwidth="0px" scrolling="auto"
style="padding:0px; margin:0px;width:auto;" src="loading.htm?Redirect=Summary.aspx" frameborder="0"
onload="FrameSummary_Load()"
></iframe>
</div>
In the end this is what solved my problem:
On ChoicePage.aspx in CmdSave_Click() function I called another function on Summary.aspx.
This other function did __dopostback("Repeater", "") and on Render event in my code behind I iterate through a Repeater.
I am leaving this question unanswered because I am sure there is a better way to do this.
I'm looking for a solution to my problem for two days and I didn't find anything that can help. I have two page : page 1 and page 2
Page1 contains parameters that will be send to page2 and a button "Create"
Page2 contains the GridView and on page_load I have
GetParameters() ; // extract parameters
PrepareParameters(); // prepare local variable
DataTable dt = CreateDataTable(); // create the BoundField/Columns based on prepared local variables
myGridView.DataSource = dt;
myGridView.DataBind();
My problem is that the method PrepareParameters() takes time due to the huge amount of data even though it's optimized. When I click on "Create" button the browser doesn't move to page2 but instead it doesn't respond and stay in page1 and the user does not know what happens.
So I'm wondering how to redirect the browser to page2 and show to the user a loading animation on the grid place until the PrepareParameters() finish processing data and display the GridView once finished?
Thanks for your reply.
You can use Javascript to do that. Get any loader image you prefer, there are many available on net, google it
put this image top/bottom of grid, assign some id to it and set default property Visible = false.
Now on button click call javascript where you make this image visible.
Sample code
<html>
<head>
<script type="text/javascript" language="JavaScript">
function Loading() {
document.getelemanebyId('Img').visibility = visible;
}
</script>
</head>
<body>
<form action="" method="POST" id="myForm">
//Gridview control here
<img id="Img" src="give image file path" runat="server" visible="false"/>
<button name="Create" onClientClick="Loading();" runat="server" >
</form>
</body>
</html>
I have a GridView with a few columns. One of the columns is a button. It is in a template field which looks like this:
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnApply" Text="View Details" CssClass="viewdetails" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
My JQuery code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$('.viewall, .viewdetails').click(function() {
alert('Must be a member to view all');
});
});
</script>
When I first visit the page and click the view details button, the alert pops up, but after that, if I click any other view details button, it does not popup until the page is refreshed. The View All button displays the message all the time because when I click that, the page is refreshed.
A couple notes. The View Details button is inside an asp.net GridView and the GridView is inside an asp.net UpdatePanel.
Also, since view all and viewdetails calls the same message, is there a way to combine them into one click event, for example, $('.viewall .viewdetails').click(.......
If I remove the update panel, it works, but everytime I click View All or View Details, I get a flicker, so I added a return false; and this stopped the flicker, however, this prevents the user from going to the Member page if they are indeed logged in. If I take the return false off and they are signed in, the message still popsup and then takes them to the Member Page. This is obviously not supposed to happen, but I am not sure how to handle it. Basically the events should be:
If the user is not logged in and they click the View all or View details button, display a message saying they must sign in or become a member.
If the user is logged in and they click the View all or View details button, redirect them to the Members Page. Both View All and View Details have server side click events which do a Response.Redirect to the Members Page if they are logged in.
You need to cancel the click event in these cases...
$(document).ready(function() {
$('.viewall').click(function(e) {
alert('Must be a member to view all');
e.preventDefault();
});
$('.viewdetails').click(function(e) {
alert('Must be a member to view all');
e.preventDefault();
});
});
You can use multiple selectors by delimiting them with a comma...
$(".selector1, .selector2").click(function() { ... });
A TextBox is set to AutoPostback as changing the value should cause a number of (display-only) fields to be recalculated and displayed.
That works fine.
However, when the field is tabbed out of, the focus briefly moves on to the next field, then disappears when the page is redrawn so there is no focus anywhere.
I want the focus to be on the new field, not the textbox I've just changed.
Is there a way to work out which field had the focus and force it to have it again when the page is redrawn?
This is "by design". If you are using ASP.NET 2.0+ you can try calling the Focus method of your TextBox once the postback occurs (preferably in the TextChanged event of the TextBox).
I am not sure if there is any built-in way to track focus but I found this article in CodeProject which should do the trick.
You could also consider refresh display-only fields using AJAX UpdatePanel. This way you won't lose focus from the new field.
Also I have proposed pure server-side solution based on WebControl.Controls.TabIndex analysis, you can use it, if you like.
This is what is happening:
1) TAB on a field - client event
2) Focus on next field - client event
3) Postback - server event
4) Page redrawn - client event new page overrides preious client events
The solution of your problem is to:
a) get the element that has gained focus BEFORE postback
<script>
var idSelected;
$("input").focusin(function () {
idSelected = this.id;
});
</script>
b) store the ClientID (actually in var idSelected) somewhere (i.e. an hidden Textbox, vith ViewState = true) BEFORE postback
** b) get ClientID ** (extract from hidden TextBox and put it in var idSelected) AFTER postback
d) get the element with ClientID and set focus AFTER postback
<script>
$(document).ready(function () {
if (idSelected != null) {
$("#" + idSelected).focus();
idSelected = null;
});
});
</script>
Note: this sample scripts use JQuery.
Remember to put Jquery.js in your solution and a reference in your page
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<asp:ScriptManager runat="server" >
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery.js" ScriptMode="Auto" />
....
Note2: this solution works without AJAX.
Look at this answer: to make Javascript work over Ajax you must use code like this:
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
MyScript();
}
</script>