I've written a server control that extends the standard .net Gridview control.
However, by default the standard gridview control adds a border="0" attribute to the html markup that it produces, and I want to prevent this attribute from being rendered by my server control.
I could probably use ScriptManager to add a bit of Javascript that removes the attribute once the page that the control sits on has loaded, but that seems a bit clunky and I was hoping that somebody could tell me how to do it cleanly by, for example, adding this.Attributes.Remove("border"); to the PreRender event of the control or something similar (which didn't work by the way, or I wouldn't have to ask the question)
All you need to do is set Gridlines to "None"
refer: GridLines property of the GridView.
<asp:GridView GridLines="None" />
Ofcourse, if you want more control over the rendering, control adapters are what you are looking for.
I am using a devexpress gridview so it might be a bit different, but I noticed the same thing happening, and I added
grid.Attributes["border"] = "";
to the page load event, and the border no longer rendered in html. A bit of a hack but it worked for me.
Related
Page_Load generates a string of HTML for a dashboard. (html)
What control on an aspx page to bind that "text" to so when the page renders you see the tables, and buttons within?
Tried
With dhtml.Text = html but I don't see the buttons. I do see the tables as well as the borders of cells that I expect.
Any ideas?
TIA
You can inject any text/html into your ASPX page using: <% =GetMyText() %> where "GetMyText()" is a public or protected method in your code behind that returns a string.
You can also drop a Literal control onto a form and set the text via its "Text" property.
But if you want to do things the ASP.NET way, you might use a Gridview or Repeater to display tabular/repeating data, and Databind to it with some data.
If you are starting out with ASP.NET, you would probably be better off learning ASP.NET MVC as it is easier to get your head around if you are used to writing HTML. ASP.NET Web Forms, which you are using, generally tries to insulate you from HTML, CSS, and Javascript by giving you controls that you drop onto the page and bind data to. The controls do a lot of work for you, but take away almost all control of your HTML, CSS and Javascript.
I use javascript to dynamically create html elements. Your page_load function could register a javascript function which creates the elements you need.
Not sure why you were downvoted, but a very simple one to use is the HtmlGenericControl.
Basically, just add a span or div to your .aspx file and give it an ID and the runat="server" attribute.
Then, in your code behind just set the InnerHtml property of that control to your generated html.
I would like to understand how can I use jQuery to work with asp.net and css.
When I'm writing asp.net code and for example I'm adding to a page DropDownList, I can't see it in the source when I'm opening source of a page in web browser. Instead of dropdownlist I can see select tag. When does the "magic" is done to change asp.net tag to select?
What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names. But when I'm opening developer tools in IE, I can see CSS class names, which are same as in my definition.
And the last thing. What names of a tags sould I use in jQuery to traverse page which was developed in asp.net. Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags? What about CSS classes? Why I can't see them in a source of a page in a browser? Can use my names of a CCS classes under jQuery queries?
Please, can anybody explain me how does this three technologies work together?
When does the "magic" is done to change asp.net tag to select?
Most of "magic" you're wondering about is done by ASP.NET controls, which are designed to generate the markup that is sent to the browser.
When a request is received, the application iterates over each control, calling its Render method (inherited from the Control class), which allows each control to generate the markup they represent.
Following your example, the DropDownList control generates a <select> tag. As a ListControl, it uses the ListItem controls to create the <option> tags within.
Another would be the GridView, which generates a <table> using GridViewRow controls for <tr> and various HTML Controls, such as TableCell for <td> and <th>, to create the rest of the markup.
Shoud I use a tags which I see in the source code of a page in a browser or can I ask jQuery about asp.net tags?
No, jQuery/JavaScript have no knowledge of server-side control names, only the markup they generate. So, rather than searching for $('DropDownList'), you'd search for $('select').
What is more I can't see my CSS classes names added to asp.net tags. There are some kind of differen CSS class names.
By "CSS Names," do you mean IDs? I'm sorry to ask, but CssClass attributes shouldn't change in value from server-side to client-side, just in name -- CssClass to just class.
IDs, on the other hand, are prefixed to ensure their uniqueness throughout the page, including a prefix of the MasterPage and ContentPlaceHolder names, if they're used. For this reason, I'd steer away from trying to use IDs to apply CSS to server-side controls, using classes instead.
Now, the end of the ID should remain as the ID you gave in server-side, so you should still be able to find the element in jQuery using the Attribute Ends With Selector [name$='value']:
# ASP
<asp:DropDownList ID="AnyGivenDropDown" runat="server" />
# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown"></select>
# JavaScript
$('select[id$="_AnyGivenDropDown"]');
Otherwise, I'd stick to classes to find the controls you're looking for:
# ASP
<asp:DropDownList ID="AnyGivenDropDown" CssClass="anygiven" runat="server" />
# HTML (generated)
<select id="ctl00_PageContents_AnyGivenDropDown" class="anygiven"></select>
# JavaScript
$('select.anygiven');
# CSS
.anygiven { }
The "magic" happens in the render event of the asp.net page lifecycle. Asp.net server controls all render as standard html element(s). The most important difference is that you can access them and their values on the server side. WebControls also have a CssClass property that when rendered becomes the class attribute of the HTML element.
The id can be a bit tricky when working with jQuery and CSS. This is because depending on the controls hierarchy they may have a clientID such as ctl100_containerID_myControl instead of myControl. To overcome this in jQuery when you reference a control you can refrence it by its ClientID like so:
$('#<%=myControlID.ClientID%>')
This is serverside that will write the client side ID of the control after it is rendered.
ASP.NET: High-level web development framework. When you create a web form in .NET, the framework will work together with the IIS handlers and create (hopefully) valid HTML that will work with your server-side code during postbacks.
JQUERY: This will allow you to perform client-side scripting such as calculation, validation, and most notably AJAX, etc. This is basically just a wrapper for a simpler and easier-to-read version of javascript.
CSS: Takes the HTML and makes it pretty.
All three technologies work very well together if you know what you're doing.
I'm not sure if that's what you're looking for, but it sounds like you might want to invest in some beginner's literature.
Is it possible to have a custom server control with a single template (meaning the user can put any text they want) without having to require the an "ItemTemplate" like in a FormView control?
I would want the control in Source View to look like this
<foo:mycontrol runat="server" id="controlid">
User puts whatever html content they want here
</foo:mycontrol>
INSTEAD OF THIS
<foo:mycontrol runat="server" id="controlid">
<ItemTemplate>
User puts whatever html content they want here
</ItemTemplate>
</foo:mycontrol>
My custom server control needs to add 2 asp.net panel controls and the ajax collapsiblepanel control. one panel will be the expand/collapse panel and the other panel is what I would want to put the user text into and then have the collapsible panel collapse and hide the panel.
I know how to do this (at least I think I do) creating a composite server control and using ITemplate but that requires the child <ItemTemplate> tag in source view.
Any ideas?
I haven't tested this but I would think you could do this by inheriting from the literal or label control and then reading/writing to the Text property.
p.s. next time when you post a question check the preview to see if it's readable and format code with 4 spaces in-front so it's actually shown and syntax highlighted.
Hmm why don't you use an approach where you just specify the controls to be collapsed. For instance your declaration could look like
<foo:mycontrol runat="server" id="controlid" TargetControlId="pnlToCollapse" />
Internally, your mycontrol gets an instance of the specified TargetControlId by using the FindControl method (here's a recursive version). The same could be done for the 2nd panel you need.
Your server control does therefore just take configuration info and doesn't render anything, but controls the rendering of the other panels in this case. It is a much more flexible solution in my eyes.
Juri,
I should have clarified that this control might be used by non-developers or developers who we do not want to require too much knowledge of setting properties so I'm trying to develop a control where they would drag it on like a panel and just enter text and maybe set one property which would be the title. I was able to create a compositecontrol which I created a title panel, the collapsible panel and utilized the asp.net ajax collapsiblepanel control. I had to add an Template though which I would prefer not to do.
Darrell
I have a Repeater control that I bind server-side. It repeats a series of divs, and does so with no problem. I have some buttons that I use to sort the repeater (newest, highest ranked, random) and this works the way it should.
I would like to improve my user experience by making the buttons sort the divs using Ajax/jQuery somehow so that there is no page postback and the user does not lose his/her spot on the page.
Is there a way to use jQuery to access server-side code like this, or use Ajax to re-bind a server-side control?
Thanks... if I need to list more details, please let me know!
EDIT I'm aware of UpdatePanels, but I would prefer not to use them if I don't have to.
Have you considered moving the Repeater's functionality to the client-side?
Doing it that way, functionality like paging and sorting is not very difficult to add. In fact, you can lean on the framework pretty heavily by using ADO.NET data services as the service layer.
It's relatively easy.
Move your repeater to a separate custom control, let's say MyControl. Now repeater in your page becomes uc1:MyControl.
Wrap MyControl into a div:
<div id="mydiv">
<uc1:MyControl ID="MyControl1" runat="server" />
</div>
Create a new page, pgMyControl.aspx, that contains MyControl only.
On your main page, add jQuery handlers to your sort links. Use load method to dynamically replace div contents:
$('#link_sort_random').click(function()
{
$("#mydiv").load("pgMyControl.aspx&sort=random");
}
Use QueryStringParameter in datasource inside MyControl to change order. Or use Request.QueryString in code-behind file.
Using an updatePanel or a jquery Ajax postback are the same thing essentially. Both will ask your code to fetch the new query, then make your control render itself, and then feed the HTML back to the client as a partial page render, and then insert the content in place of the old content in the same DOM location.
It is considerably harder to make JQuery and ASP.NET talk to each other this way due to the nature of web controls and their lifecycle that determines when they render. An updatePanel knows how to call all this, maintain proper viewstate and return the result to the correct location.
In this case, don't make things any harder on yourself, use the updatePanel unless you have some very specific reason not to.
EDIT: If you're having JQuery issues with update panels it is probably due to the fact that new DOM nodes being created. JQuery has the live event to handle this. It will notice when new DOM elements are created and match them against your selector even after the document ready.
Maybe it's an OT, but you can consider to change the way you bind even the client and the server control, using XSLT transformation instead od the classics server controls.
You can find an example here (sorry, it's in italian...).
In a particular page i have a ascx control which contains a table.
Now I want to set this control visible/invisible but the visible method is not detected by the intellisense.
The only methods are 1)Equals and 2) ReferenceEquals
Main Page
<VPM:VotingPolls Runat="server"></VPM:VotingPolls>
Thanks
Thanks it has been solved
The problem was that no id was set.
<VPM:VotingPolls ID="VPS" Runat="server"></VPM:VotingPolls>
then
VPS.Visible=True/False
Make sure that your markup is well formed and that there is a proper header line for the ascx control on your page. 99% of the time, if intellisense doesn't work, it means that something is wrong with the code and/or markup.
Sometimes intellisense doesn't display available attributes. But the visible attribute will be available. So just type visible='true/false'. That should work.