I'm still getting my head around asp.net.
I followed some online examples of using multiviews and got them working just fine when I use something like a Menu class as the trigger to select the active view. Having the onClick event makes it pretty easy.
But I can't figure out how to change the emmited code from the Menu control.
I have the following multiview control...
<asp:View ID="0" runat="server">
<p>view page 1</p>
</asp:View>
<asp:View ID="1" runat="server">
<p>view page 2</p>
</asp:View>
And I need to have the following structure used to trigger the views.
(Note: this needs to be what gets emitted to the browser. Not necessarily the literal code in the aspx page)
<a class="button large-plain" href="" >
<span>
See page 1
</span>
</a>
<a class="button large-plain" href="" >
<span>
See page 2
</span>
</a>
For clarification: we have a style sheet provided by an exteranl designer that works with the above markup. If I could just make the triggers asp button controls, or a menu control, it would be easy. But the style sheet doesn't work then, and I'm told the world will end if the style sheet doesn't work.
Can I customise a Menu control so that it outputs this kind of structure? (And if so, how?)
I could just hard code the links that trigger the views (the structure is not going to change). But if I hardcode it, how do I call the onClick event what the links are clicked?
I think you might be able to try the following to change the tags into server-side controls and then use that as the trigger. Adding ID and runat="server" to any html element means that you can then access them programmatically as you would any other .NET style control. Additionally if you're using .NET 4.0 you can also add the ClientIdMode="Static" attribute so that the ID's are as you typed and not modified by ASP.NET.
To solve the Click problem you can add the OnServerClick="" attribute to specify which method to call on the server when the link is clicked.
<a class="button large-plain" href="" ID="ViewPage1" runat="server" OnServerClick="ViewPage1_Click">
<span>
See page 1
</span>
</a>
<a class="button large-plain" href="" ID="ViewPage2" runat="server" OnServerClick="ViewPage2_Click">
<span>
See page 2
</span>
</a>
Related
We have a Sitecore project and the code/files are from an ASP.NET web application.
The HTML for the products section is as follows
<div class="products-section">
<ul class="tabs">
<li>Product 1</li>
<li>Product 2</li>
</ul>
<div class="product">
<h3>Product Name</h3>
<img src="/images/img1.jpg" />
<span>Description</span>
</div>
</div>
This is how it works for an end user.
EU will click on a Product tab (eg: Product 1), which will change the content inside <div class="product">, without postback.
For the author, this section must be editable from the Experience editor. Usually, I would use asp:Repeater with sc:Text,sc:Image to render it.
But, here the data has to be retrieved using ajax calls, which means no Repeater or Sitecore controls.
In such case, how can I make the content editable from Experience editor.
The only ideas I came up with:
Get data of all the products in Page_Load, bind it using Repeater and then use jQuery to Show/Hide the respective divs. (doesn't seem a nice way though)
Tell the content author, that this section can only be edited from Content editor and not from the experience editor :)
What are my options here.
One option could be to render your page differently when in the experience editor. Check the mode in your code and use a repeater when editing, otherwise use the jquery output.
You can use Views to easily display/hide the output you want.
<asp:MultiView runat="server" ID="ProductsView">
<asp:View runat="server" ID="StandardView">
<div ...>
...
</div>
</asp:View>
<asp:View runat="server" ID="EditorView">
<asp:Repeater..>
...
</asp:Repeater>
</asp:View>
</asp:MultiView>
In your code behind:
ProductsView.SetActiveView((Sitecore.Context.PageMode.IsExperienceEditor || Sitecore.Context.PageMode.IsExperienceEditorEditing) ? EditorView : StandardView)
Based on the active view, you can decide to attach data to the repeater or not (don't do that when the StandardView is active, for performance)
I'm not sure why would an end user interact with Experience Editor as Experience editor is used by Content Authors for authoring the site and updating the content on the Page itself.
But if this is a requirement for a Content Author you can use the sitecore services client api for updating the content using ajax call.
Use this document to see how ssc works.
Let me know if you have a different ask.
I am trying to write chunks of html to a .aspx page from a .ashx handler file. In the handler file, I am trying to write a server tag
<asp:updatepanel id="UpdatePanel6" childrenastriggers="True" updatemode="Always" runat="server">
<contenttemplate>
<ajaxtoolkit:rating id="Rating6" autopostback="True" emptystarcssclass="Empty" filledstarcssclass="Filled" waitingstarcssclass="Saved" starcssclass="ratingItem" cssclass="ratingStar" currentrating="2" maxrating="5" runat="server"> </ajaxtoolkit:rating>
</contenttemplate>
</asp:updatepanel>
But this is not displayed on the corresponding .aspx page. When I inspect it in firebug, I see the code chunk there rather than the executed piece which should be something like
<div id="UpdatePanel11">
<div id="Rating11" class="ratingStar">
<input id="Rating11_RatingExtender_ClientState" type="hidden" value="2" name="Rating11_RatingExtender_ClientState">
<a id="Rating11_A" style="text-decoration:none" title="2" href="javascript:void(0)">
<span id="Rating11_Star_1" class="ratingItem Filled" style="float:left;"> </span>
<span id="Rating11_Star_2" class="ratingItem Filled" style="float:left;"> </span>
<span id="Rating11_Star_3" class="ratingItem Empty" style="float:left;"> </span>
<span id="Rating11_Star_4" class="ratingItem Empty" style="float:left;"> </span>
<span id="Rating11_Star_5" class="ratingItem Empty" style="float:left;"> </span>
</a>
</div>
Could someone help me with pointers on what I am missing here ? Thanks !
You can't do this. Response.Write injects directly into the output stream, without any processing. An .aspx page generates its output by building a control tree (consisting of the literal markup and the control tags in the .aspx file), and possibly adding more controls dynamically in code. Then the nodes of the tree are evaluated in top-down order to generate the HTML, which they send back to the browser through Response.Write calls.
Unlike an .aspx page, an .ashx handler does not deal with controls -- there is no control tree. You are responsible for reading the request and producing the raw response text yourself.
It sounds like you're trying to dynamically create controls; in that case, use an .aspx file and add controls to the tree in the codebehind file.
as Carl mentioned this is going to be a little hard to accomplish. If what you need to do is just to create a dynamic Rating thing, I would suggest to use page.Controls.Add and add handlers to them so that they can handle when an user clicks on them. If you need help please let us know.
I am writing a website with ASP.Net.
I will have lots of html generic controls like <div> <span> and so on..
I have some onclick javascript functions, onmouseover javascript functions..
They are working fine..
Then I need to control them on the server side.
So, I add runat="server"..
After that, all the javascripts aren't working anymore..
I understand they aren't working coz all the events are now going back to server side.
So, is there anyway to make them work??
For eg,
<div id="myDiv1" onclick="myfunction(para1)"><img src="..." /></div>
the above code is working..
<div id="myDiv1" runat="server" onclick="myfunction(para1)"><img src="..." /></div>
the above code is not working...
I can make it work, probably by
<div id="externalDiv1" onclick="myfunction(para1)"><div id="myDiv1" runat="server" ><img src="..." /></div></div>
Is there any other way?
I assume that you used document.getElementById() to get an element by its id. If you are using master pages, the IDs of server controls will be changed after rendering to the page, in that case, you have to use its ClientID
for e.g.
var myDiv1 = document.getElementById("<%= myDiv1.ClientID %>");
Server-side or client-side controls makes no difference as far as javascript is concerned. ALL server-side controls end up being rendered as normal HTML controls. If your javascript functions are not working might be because you are accessing them by the wrong id since by making them server-side controls they can now have ids that follow a pattern like <parent_id>_<control_id>.
For example, a span element declared like this:
<span id="mylabel" runat="server"> testing</span>
may end up being rendered as:
<span id="MainContent_mylabel"> testing</span>
ASP.NET 4.0 has a feature called CliendIDMode which can be set to static, meaning, that your ids on the markup will stay unchanged after the page is rendered.
Adding runat="server" is not rendering my server tags <%...%>
I have a masterpage with a few <li> for menu and since I have to set class=selected for the current page, I am using a little server tag to find the url and assign the particular class.
I have total of 10 <li> and not all menu is available to all types of user, I need to toggle few of the <li> if the user is not admin, so I have runat="server" added to them so I can set their visible=false through c#
Here is how it is at a glance:
<li runat="server" id="liBlog" class='<%= Request.Url.AbsoluteUri.EndsWith("/Blog") ? "selected" : "" %>'>Group Blog</li>
<li runat="server" id="liPoll" class='<%= Request.Url.AbsoluteUri.EndsWith("/Poll") ? "selected" : "" %>'>Poll</li>
<li id="liInvite" class='<%= Request.Url.AbsoluteUri.EndsWith("/Invite") ? "selected" : "" %>'>Invite</li>
<li id="liFavourite" class='<%= Request.Url.AbsoluteUri.Contains("/Favourite") ? "selected" : "" %>'>My Favourites</li>
The <li> without runat="server" works fine, when on correct page the source code shows class="selected" or class="" as appropriate, the other <li> used to work fine too, until I decided to add the runat="server".
Once I added that runat="server", the whole block of class="" is being sent out to the html page, its not processing the server tags at all! I right click on the html and look at the source, it's being rendered as:
<li id="ctl00_ctl00_ContentPlaceHolder1_liBlog" class="<%= Request.Url.AbsoluteUri.EndsWith("/Blog") ? "selected" : "" %>">Group Blog</li>
It's pouring out my server tags into the source code!
Why is this behaviour seen? How can I avoid it?
I looked up a lot of similar threads in here and there was nearly nothing in google, so made this, I dont think this is a duplicate question.
You can't use the <%= %> syntax inside the properties of tags that have the runat="server" attribute on them.
You either need to:
Set the properties via your code-behind
Create an Expression Builder (and part 2 and part 3) and use the <%$ %> syntax (note: these are links to stuff I wrote on my blog, so, beware the self link =)
for your requirement you can also use ASP.NET menu and XmlSiteMap to do the same thing.
I'm having a problem with <%= obj.ClientID %> expansion, in a .ascx user control.
I have a .js file, containing a javascript function:
function doSomething(objectId)
{
...
}
I have a .ascx file, with some html elements, and in one element's onclick= I want to call doSomething(), passing the ID of an element in that .ascx file, where the passed ID is of an element other than the one being clicked on, so I can't use "this.".
Maybe it'd be clearer with an example.
This works:
<script type="text/javascript">
function redirect()
{
doSomething('<%= top.ClientID %>');
}
</script>
<div id="top" runat="server">
<img src="..." alt="..." onclick="redirect();"/>
</div>
But this does not:
<div id="top" runat="server">
<img src="..." alt="..." onclick="doSomething('<%= top.ClientID %>');"/>
</div>
When I look at the source, I see that the <%= %> substitution has not happened, instead of "doSomething('ctl00_myControl_top');" I get "doSomething('<%= top.ClientID %>');"
For some reason, the script expansion happens in the former case, but not in the latter. The work-around, of course, is not acceptable because it will break if I include multiple copies of the control on a page - only one instance's "redirect()" function will be accessible.
Any ideas on how to make this substitution work?
Works on my machine?
<div id="top" runat="server">
rarrarara
</div>
Becomes
<div id="ctl00_ContentPlaceHolder1_top">
rarrarara
</div>
Consider an alternate route:
Ensure that the control you are referencing in JavaScript using the inline expression <%= (controlName).ClientID %> has its 'ClientIDMode' specifier set to a static value and then simply use the text in the ID field of that control to refer to it. I ended up using this in a recent project it works great. Please see the link below for a more detailed explanation:
Code Project - ASP.NET v4.0 Client ID Feature
Along with setting the 'ClientIDMode' specifier to "Static", I found a useful idea regarding placing text from a global resource file (in the case of language switching) into a field of a standard HTML control that does not have to run at the server level. I used this on a standard HTML button that was supposed to call a JavaScript function that would show/hide a specific div or ASP Panel. Use the GlobalResource function in the inline expression tags like so:
<input id="btnToggleFilterOptions" type="button" value="<%=GetGlobalResourceObject("SiteResource", "btnToggleFilterOption")%>" onclick="javascript:ToggleCssClass('divFilterOption','visible'); return false;" class="button submit" />
<asp:Panel ID="divFilterOption" ClientIDMode="Static" runat="server">
<asp:TextBox ID="txtFilterOption1" runat="server" />
</asp:Panel>
I know this is an old post, but it is a popular hit when searching on Google for Asp .NET and ClientID. I hope this helps somebody else out!