I am using masterpages in my site to change the url in the site. I use the <a> of my navigation bar using a full change/reload of the url in the href to webforms nested within my masterpage.
After doing some ajax on the site with UpdatePanels, I couldn't stop to try something with the pushState.
I did some research on the internet, and while doing this:
$("a[data-role='ajax']").click(function (e) {
if (Modernizr.history) {
e.preventDefault();
var pageName = $(this).attr("href");
window.history.pushState(null, "", pageName);
navigateToPage();
}
});
I really get a change of the url and with some more code implemented where was the masterpage content page, I put a div where I dynamically load it with a new content from other page. As a simple approach I have:
Home.aspx
<head runat="server">
<title></title>
</head>
<body>
<h1>Home</h1>
<ul>
<li>Home</li>
<li><a href="page1.aspx" data-role=
"ajax">Page 1</a></li>
</ul>
<form id="form1" runat="server">
<div id="content-host" class="fragment">
Home
</div>
</form>
<script src="modernizr-custom.js"></script>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Page1.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<h1>Home</h1>
<ul>
<li>Home</li>
<li><a href="page1.aspx" data-role=
"ajax">Page 1</a></li>
</ul>
<form id="form1" runat="server">
<div id="content-host" class="fragment">
page 1
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
<script src="modernizr-custom.js"></script>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Clicking the a the scripts changes the url with the pushState and the new information on the div "contest-host" is changed.
Basicaly when navigate to page1.aspx the url changes to page1.aspx and in the div it shows the textbox, but my problem is when I click on the textbox and put some text and do the enter it comes back to the home.aspx. I noticed if I go to page1.aspx and press enter in the url the page reloads and the textbox on postback doesn't make the page go back to home.aspx.
I'm not an expert in ASP. This is the kind of situation that I think that there is no way to keep the next page and do something like a textchangedevent without a full reload, but anyway I ask, if it is possible.
Related
Is there a pattern or anything I can do to load remote asp.net views properly? I have my index page that basically looks like this:
Index page works fine using new kendo.mobile.Application(document.forms[0]):
<form runat="server">
<div data-role="view" id="indexPageInitialView"> ... </div>
<div data-role="view" id="indexPageOtherView"> ... </div>
</form>
Remote view page issue:
<form runat="server">
<div data-role="view" id="remoteView1"> ... </div>
<div data-role="view" id="remoteView2"> ... </div>
</form>
I know Kendo loads remote views that can be [at most] descendants within the body tag, so I am thinking I'm backed into a corner here.
Update
When I attempt to simply load the remote view that is surrounded with the form tag, I get this error:
Uncaught TypeError: Cannot call method 'getAttribute' of undefined kendo.all.min.js:9
kendo.initWidget kendo.all.min.js:9
w.extend._createView kendo.all.min.js:31
w.extend._createRemoteView kendo.all.min.js:31
(anonymous function) kendo.all.min.js:31
l jquery.min.js:2
c.fireWith jquery.min.js:2
T jquery.min.js:2
r
If I nest the form tag within the remote view, it works, however, that is not a viable solution.
Update 2
Here is a more complete example of my situation.
index.aspx:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
</head>
<body>
<form runat="server">
<div id="indexPageInitialView" data-role="view">
<div data-role="content">
Load remote view
</div>
</div>
</form>
<script src="jquery.min.js"></script>
<script src="kendo.all.min.js"></script>
<script>
var app = new kendo.mobile.Application(document.forms[0]);
</script>
</body>
</html>
remote.aspx:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Remote</title>
</head>
<body>
<form runat="server">
<div id="remoteView1" data-role="view">
<div data-role="content">
<h1>Hi I am a remote view</h1>
</div>
</div>
</form>
</body>
</html>
Kendo will load only the first view found in the remote view. So if you make the call to remote view correctly, remoteView1 should load. If this is not the answer you are looking for, please post the full code in JSFiddle with more description.
I have this asp.net code in my page :
<div id="prx">ABC</div>
And I want to change the value "ABC" to something when for example the user type a value in TextBox.
How can I do that using Ajax ?
Thanks
You don't need AJAX to do this. You can simply use Javascript to update the content of the DIV tag with the contents of the INPUT widget. See How to set the value of a form element using Javascript.
Now if you'd like to update the TextBox with something from the server without reloading the page, then that's AJAX. I'd use jQuery.ajax() function over UpdatePanels though. Here's a jQuery AJAX Tutorial.
May be using javascript?)
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication11.WebForm2" %>
<!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 id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function setDivContent() {
var textInput = document.getElementById('text1');
var divPrx = document.getElementById('prx');
divPrx.innerHTML = textInput.value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button onclick="javascript:setDivContent(); return false;">Set</button>
</div>
</form>
</body>
</html>
Check out the ASP.NET AJAX UpdatePanel control. It lets you change text on a page and "AJAX-ifies" anything inside it, instead of doing a full postback. Here is a good tutorial on it.
I know this is old question.. but it might help someone
JQUERY for this would be :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(e){
e.preventDefault();
$("#prx").text($("#text1").val());
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="prx">ABC</div>
<br />
<input type="text" id="text1" />
<button type="button" id="btn1">Set</button>
</div>
</form>
</body>
</html>
Here's what I have so far but thing aren't really working. (I dragged the jQuery.js file from the Solution Explorer to the area of my html.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SignUpFormTest._Default" %>
<!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">
<title></title>
<script src="Scripts/jquery-1.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//fade in the context of whatever is inside the div tag.
$('#name').fadeIn("slow");
});
</script>
</head>
<body bgcolor="#FFFFFF">
<p>
Note that this form doesn't actually do anything
except illustrate the Required Field Validator.
</p>
<form id="frmValidator" action="required.aspx" method="post" runat="server">
Enter Your Name:
<asp:TextBox id="txtName" runat="server" />
<div id="name"><asp:RequiredFieldValidator id="valTxtName" ControlToValidate="txtName" ErrorMessage='<img src="../Images/no.png">' runat="server" /></div>
<br />
<asp:button id="btnSubmit" text="Submit" runat="server" />
</form>
<p>
Hint: Try submitting it before you enter something.
</p>
</body>
</html>
When validating the icon just pops up.
No fade in or anything. Also, I know my current solution is hacky, so I'd really like someone to tell me what I should do instead of a creating a DIV tag just for the purpose of one animation.
Make sure the reference to JQuery is valid and use this code:
$(document).ready(function() {
$('#name').hide().fadeIn("slow");
});
If I'm not mistaken, since the div is already visible in your case, jQuery will not fade it in. The hide() method ensures that the div is initially not visible and then fades in slowly.
$(document).ready(function() {
document.getElementById('valTxtName').onpropertychange = function(){
$('#name').fadeIn("slow");
}
});
I have a parent page with two data controls. I want to be able to open a child window, do something on it, and when it closes I want to rebind only one of the two data controls on the parent page. I have the control I want to update within an UpdatePanel so would like to call rebind it and call UpdatePanel.Update().
From a child window, you can't actually "call" a server side function for the parent page, however you can use some javascript to invoke client side functions on that page.
On the parent page:
<script language="Javascript" type="text/javascript">
function CallAlert()
{
alert("This is parent window's alert function.");
}
</script>
On the child page:
<script language="Javascript" type="text/javascript">
function CallParentWindowAlert()
{
window.opener.CallAlert();
return false;
}
</script>
In the example you provided, in particular where you have an UpdatePanel, you've actually left yourself a few options here. If the UpdatePanel is set with some form of trigger to force it to update, be it all children or just specified ones, in your parent function you can force a postback on one of those controls. Ultimately, the parent pages javascript function should have some form of a __doPostBack() call, referencing the id of a control and some (empty) parameter, however you'd probably be better off generating that javascript with codebehind via:
Page.ClientScript.GetPostBackEventReference(control, null);
Once you put that together, it's all a matter of tying the actual invocation to whatever client side event you want on your child page, be it onUnLoad() or in some custom function you call.
Try this out all you got to do is call __doPostBack on the parent page targeting the update panel or something in the update panel.
Parent Code:
<%# Page Language="C#" %>
<!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">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Parent Window</h1>
Time:
<%= DateTime.Now.ToString() %>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Update Panel Time<%= DateTime.Now.ToString() %>
<br />
<asp:Button ID="Button1" Text="Submit" runat="server" />
Click To Open Child Window
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Child Code:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function UnloadMe() {
if (opener) {
opener.__doPostBack("UpdatePanel1", "");
}
}
</script>
</head>
<body onunload="UnloadMe()">
<form id="form1" runat="server">
<div>
<h1>Child Window</h1>
</div>
</form>
</body>
</html>
Scenario
I have an application using asp.net Master Pages in which I would like to repeat some content at the top and bottom of a page. Currently i use something like this:
Master Page
<html>
<body>
<asp:ContentPlaceHolder ID="Foo" runat="server">
</asp:ContentPlaceHolder>
<!-- page content -->
<asp:ContentPlaceHolder ID="Bar" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Content Page
<asp:Content ID="Top" ContentPlaceHolderID="Foo" runat="server">
<!-- content -->
</asp:Content>
<asp:Content ID="Bottom" ContentPlaceHolderID="Bar" runat="server">
<!-- content repeated -->
</asp:Content>
Maintenance
As you know, repeating things in code is usually not good. It creates maintenance problems. The following is what I would like to do but will obviously not work because of the repeated id attribute:
Master Page
<html>
<body>
<asp:ContentPlaceHolder ID="Foo" runat="server">
</asp:ContentPlaceHolder>
<!-- page content -->
<asp:ContentPlaceHolder ID="Foo" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Content Page
<asp:Content ID="Top" ContentPlaceHolderID="Foo" runat="server">
<!-- content (no repetition) -->
</asp:Content>
Possible?
Is there a way to do this using asp.net webforms? The solution does not necessarily have to resemble the above content, it just needs to work the same way.
Notes
I am using asp.net 3.0 in Visual Studio 2008
Hey, if someone still needs a solution for this here is what I did:
Put it in the Code File of your master page
protected override void RenderChildren(HtmlTextWriter writer)
{
Control mainPlaceHolder = FindControl("MainContentPlaceHolder");
Control doublePlaceHolder = FindControl("ContentDoublePlaceHolder");
StringBuilder sb = new StringBuilder();
using (StringWriter sw = new StringWriter(sb))
using (HtmlTextWriter tw = new HtmlTextWriter(sw))
{
mainPlaceHolder.RenderControl(tw);
}
LiteralControl lc = new LiteralControl(sb.ToString());
doublePlaceHolder.Controls.Add(lc);
base.RenderChildren(writer);
}
I'm not sure about performance issues here, but it certainly works.
In the case where you just want to repeat a string, this worked for me:
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
Can be referenced elsewhere as:
<% Dim title As LiteralControl = TitleContent.Controls.Item(0)
Response.Write(title.Text)
%>
No warranty on that being the right course of action though :)
As others have said, depending on the content itself there are shortcuts that can be taken depending on the type of content that will be there.
Assuming however you need the "content" to be fully functioning asp.net code then I would suggest a UserControl for each ContentPage that contains the content itself and then you only need to duplicate one line of code.
Example
Master Page
<html>
<body>
<asp:ContentPlaceHolder ID="Foo" runat="server">
</asp:ContentPlaceHolder>
<!-- page content -->
<asp:ContentPlaceHolder ID="Bar" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
Content Page
<asp:Content ID="Top" ContentPlaceHolderID="Foo" runat="server">
<uc1:Page1Control id="page1Control1" runat="server" />
</asp:Content>
<asp:Content ID="Bottom" ContentPlaceHolderID="Bar" runat="server">
<uc1:Page1Control id="page1Control2" runat="server" />
</asp:Content>
You can create a COMMON user control for the same and add it to your master page in the top & bottom. You can create a property describing whether the control has loaded at the top or bottom.
Depending on the content you may be able to do this in code. If its just HTML just put it in a variable and assign it to the other. If you have controls, you can loop over the controls collection and create a duplicate control and place it in the other area. In either case the second location would not be a contentplaceholder a div should due.