i desire to create ASP.NET control with specific identification with C#:
MyControl myControl = new MyControl { ID = "my-control" };
but after render, the identification become:
<div id="ctl13_my-control"> ... </div>
i desire for style sheet of cascade:
<div id="my-control"> ... </div>
how to fix?
In ASP.NET 4 and above, you can set the ClientIDMode property to determine how the control's ID is rendered. For example using Static means whatever ID you give the control is what you will see in the HTML source.
You could try setting the ClientID property instead:
MyControl myControl = new MyControl { ClientID = "my-control" };
You can do that with the property "clientidmode" set to "static"
<div id="my-control" clientidmode="Static"> ... </div>
Been there, done that.
Related
I have a Blazor Server app. I dynamically add a custom control (which I created in a Razor Class Library) to my page, like this:
<div class="container ">
<div class="row ">
<div class="col-12">
<label>#p_section.question</label>
</div>
</div>
#foreach (object new_control_model in p_section.list_of_control_models)
{
DisaggregateControlModel new_disag_model = (DisaggregateControlModel)new_control_model;
<DisaggregateControl #ref="myComponents[new_disag_model.id]" model="new_disag_model">
</DisaggregateControl>
}
</div>
This add the control to my dictionary, which I can access.
#code {
private Dictionary<string, object> myComponents = new Dictionary<string, object>();
}
In the custom control, I have a method that sets a bool, which allows me to display or hide a Div. In the web component that has this code, I want to iterate over all the objects in myComponents and either turn on or off the div display. I do that like this:
foreach (string id in some_list_of_ids){
//find the object in myComponents list
object found_obj = myComponents.FirstOrDefault(x => x.Key == id).Value;
//cast to my custom control
DisaggregateControl myControl = (DisaggregateControl)found_obj;
// based on property, determine if I should show the div or not
if(myControl.some_vale >0){
//show
myControl.showDiv(true);
}else{
myControl.showDiv(false);
}
}
//updated all the controls, so update the page
StateHasChanged();
If I debug and walk through, I can see that the code works. The correct divs are shown/hidden. Until the code reaches StateHasChanged(), and then all the divs are hidden. If I remove StateHasChanged then the code also does not work (the divs are not shown, when they should be).
I am not sure what the issue is or how to best handle this?
Turns out that it was an issue with my variable. In the custom library, I showed/hid the div by setting a bool value. But, I inadvertently made the bool static. Once I changed that, it worked fine. I assume because the variable was static, once I changed it for one control, it got changed for all controls.
I use asp.net 4.5 in my project.
I try to add control in code behind bu I get error.
Here is my HTML code from view:
<div class="row" id="_FooterPanel" runat="server"></div>
Here is my code behind:
public void FooterPanelInit()
{
var myFooterTemplate = new TemplateField();
var viewFooter = new ViewFooterTemplate();
var editFooter = new EditFooterTemplate();
myFooterTemplate.ItemTemplate = viewFooter;
myFooterTemplate.EditItemTemplate = editFooter;
_FooterPanel.Controls.Add(myFooterTemplate);
}
In code above I try to add to div with id="_FooterPanel" the TemplateField.
But in this row:
_FooterPanel.Controls.Add(myFooterTemplate);
I get this error:
cannot convert from 'System.Web.UI.WebControls.TemplateField' to 'System.Web.UI.Control'
My question is how can I add TemplateField to div with id="_FooterPanel"?
TemplateField is databound control of type 'System.Web.UI.WebControls.TemplateField' but div control can have collection of controls of type System.Web.UI.Control
so you may use repeater control instead of div with runat='server'
or use your custom user control
In my scenario, there is a UserControl(Day) containing RadioButtonList and this UserControl is contained in another 5 UserControls(Monday, Tuesday...Friday) and this UserControls are placed in aspx page.
In the code behind of Day UserControl, the following code is present.
rdlUser.DataTextField = "Description";
rdlUser.DataValueField = "Value";
rdlUser.DataSource = userTypes;
rdlUser.DataBind();
rdlUser.Items[0].Enabled = false;
The markup for rdlUser in Day UserControl is as below...
<asp:RadioButtonList ID="rdlUser" AutoPostBack="true" OnSelectedIndexChanged="rdlUser_SelectedIndexChanged"></asp:RadioButtonList>
There are 4 userTypes that are getting created as rdlUser in Day UserControl from Database. The userTypes are given below...
rdlUser_0 - Normal User
rdlUser_1 - Supervisor
rdlUser_2 - Admin
rdlUser_3 - Super User
How can I apply class NormalUser to "Normal User" and rest as SpecialUser class from code behind with relevant attributes.
You can loop all the ListItem elements.
foreach (ListItem item in rdlUser.Items)
{
if (item.Text == "Normal User")
{
item.Attributes.Add("class", "NormalUser");
}
else
{
item.Attributes.Add("class", "SpecialUser");
}
}
Note that this will wrap a <span class="NormalUser"> around the RadioButton, so you may need to change the css.
.SpecialUser label { color:red; }
RadioButtonList generates HTML output containing input and labels.
<input id="rdlUser_0" type="radio" name="rdlUser_0" value="0">
<label for="rdlUser_0">Normal User</label>
Best practice, add your option's style to the css file.
#rdlUser input[value='0'] + label {color:red}
Or
#rdlUser label:nth-child(1){color:red}
I have following HTML code under Requisition.cshtml
foreach (var item in Model.RequisitionWorks)
{
<tr>
<td><div class="radio"><label name="#string.Format("Option_{0}", item.OptionNumber)">#item.OptionNumber</label></div></td>
<td>
<div class="radio">
<label>#Html.RadioButton(string.Format("Option_{0}", #item.OptionNumber),
"0", #item.IsOptionChecked("0"), new { #class = "OptionClass", id = string.Format("Option_None_{0}", #item.ToothNumber) }) #MyModelEntities.Properties.Resource.None
</label>
</div>
</td>
And I generate lots of radiobuttons...
So I would like to bind some jQuery event at the moment of rendering that code.
$("#Option_None_" + optionNumber).change(function () {
});
I need it because I generate id of html tag on fly.
Is it possible to do?
Why not apply using the class of the option instead of an id?
$(document).ready(function(){
$(".OptionClass").change(function () {
});
});
You can do this by using the .on jquery method (http://api.jquery.com/on/). To accomplish this you would select your containing div and then set the onchange for the inputs within it.
$('div.radio').on('change', 'input', function() {});
Edit: it's a lot easier to do what you want to if you give the radio buttons a common class and use the above method. Generally it's not necessary use something unique like the id to attach the same event handler to each one.
I am listing my data in an ItemTemplate.Then inside the ItemTemplate, i have two div tags as follows:
<ItemTemplate>
<div id="contentdiv">
<h4 id="titleresult"><%# Server.HtmlEncode(Eval("Name").ToString())%></h4>
</div>
<div id="showclick" class=hideAll>
<p class="brief"><%# Server.HtmlEncode(Eval("LegalName").ToString())%></p>
<p class="brief"><%# Server.HtmlEncode(Eval("FirstName").ToString())%></p>
<p><%# Server.HtmlEncode(Eval("LastName").ToString())%></p>
</div>
</ItemTemplate>
Then i have the css to define the hideAll class so that when the page loads, the data in this div tag is hidden until the user clicks on the contentdiv link.
.hideAll { display:none }
.displayAll { display:block; top:0px}
Then finally i have the javascript part for firing the click event.
<script type="text/javascript">
function showResults(UserID) {
var contentdiv= document.getElementById('contentdiv');
var showclick = document.getElementById('showclick');
<%
long id =0;
DataAccess dataAccess = new DataAccess();
Data = dataAccess.GetCounterParty(id);
%>
var UserID = <%=dataAccess.GetCounterParty(id) %>
contentdiv.style.visibility = "visible";
$(showclick).removeClass('hideAll');
}
</script>
The UserID is the id of every element in the list. The problem is, the click affects only the first element no matter which other element i click on the list.
In html id is used to refer to one element.
If you use it multiple times the browser would default to the first element.
You should use a class selector. Something like:
$(".contentdiv").click(function(){
$(this).next().removeClass('hideAll');
});
Here is a working example. I used toggleClass though, it seems more appropriate to me.
An id is a unique identifier, you cannot have two or more things on the same page with the same identifier and expect things to work properly. Make your identifiers unique, and bind to the click event using a class selector instead.
you should use class instead of id, id are unique, which only exist in 1 page, class can exist in multple div
some idea for u
html
<div class="showclick hideAll">
script
$('.showclick').on('click', function(){
$(this).toggle(); //toggle to show or hide, can be any element u want to toggle instead of this
});