ASP.NET custom control, can template fields have attributes? - asp.net

For example:
<uc:AdmiralAckbar runat="server" id="myCustomControl">
<Warning SomeAttribute="It's A Trap">
My Data
</Warning>
</uc:AdmiralAckbar>
I'm not sure how to add SomeAttribute. Any ideas?
Code without the attribute is:
private ITemplate warning = null;
[TemplateContainer(typeof(INamingContainer))]
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate Warning
{
get
{
return warning;
}
set
{
warning = value;
}
}

The answer is yes.
For this you should create a type which implements ITemplate interface and add a custom property/properties there (I added property Name in my example); also add a class which inherits from Collection<YourTemplate>.
Here is an example of doing that:
public class TemplateList : Collection<TemplateItem> { }
public class TemplateItem : ITemplate
{
public string Name { get; set; }
public void InstantiateIn(Control container)
{
var div = new HtmlGenericControl("div");
div.InnerText = this.Name;
container.Controls.Add(div);
}
}
and a control itself:
[ParseChildren(true, "Templates"), PersistChildren(false)]
public class TemplateLibrary : Control
{
public TemplateLibrary()
{
Templates = new TemplateList();
}
[PersistenceMode(PersistenceMode.InnerProperty)]
public TemplateList Templates { get; set; }
protected override void RenderChildren(HtmlTextWriter writer)
{
foreach (var item in Templates)
{
item.InstantiateIn(this);
}
base.RenderChildren(writer);
}
}
and finally an example of usage:
<my:TemplateLibrary runat="server">
<my:TemplateItem Name="hello" />
<my:TemplateItem Name="there" />
</my:TemplateLibrary>
BTW, you could also use it as:
<my:TemplateLibrary runat="server">
<Templates>
<my:TemplateItem Name="hello" />
<my:TemplateItem Name="there" />
</Templates>
</my:TemplateLibrary>
the effect will be the same.

Related

Clear entry text from ViewModel using RelayCommand

I would like to clear entry text from my ViewModel which is binded there. In the code below I tried it by using a RelayCommand, but it doesn't work.
What i want to accomplish: When clicking button named AddQuestionToQuiz, a function is executed by using Command on the button. The function OnCreateQuizClick(), located in my ViewModel, is triggerd and this function needs to clear my entry text, which i don't get for the moment.
I also tried to use a regular Command instead of using a RelayCommand, but also here it doesn't want to work.
EDIT: UNDERNEATH CODE WORKS FINE - GOT UPDATED
Code is used to clear entry text when clicking on a button from your ViewModel, implementing INotifyPropertyChanged Interface
.xaml - code
<Button x:Name="AddQuestionToQuiz" WidthRequest="200" Command="{Binding CreateQuizCommand}" Style="{StaticResource ButtonStyle}" Text="Add question to quiz"></Button>
ViewModel - code
internal class CreateQuizPageViewModel : INotifyPropertyChanged
{
// Quiz Name Input
public String QuizNameInput { get; set; }
private String quizQuestionInput = "";
public String QuizQuestionInput
{
get { return quizQuestionInput; }
set { quizQuestionInput = value; OnPropertyChanged(); }
}
public RelayCommand CreateQuizCommand { get; set; }
public CreateQuizPageViewModel()
{
CreateQuizCommand = new RelayCommand(OnCreateQuizClick);
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public void OnCreateQuizClick()
{
QuizQuestionInput = "";
}
}
EDIT: VIEWMODEL UPDATED
.xaml - code
<Button x:Name="AddQuestionToQuiz" WidthRequest="200" Command="{Binding CreateQuizCommand}" Style="{StaticResource ButtonStyle}" Text="Add question to quiz"></Button>
ViewModel - code
internal class CreateQuizPageViewModel : INotifyPropertyChanged
{
// Quiz Name Input
public String QuizNameInput { get; set; }
private String quizQuestionInput = "";
public String QuizQuestionInput
{
get { return quizQuestionInput; }
set { quizQuestionInput = value; OnPropertyChanged(); }
}
public RelayCommand CreateQuizCommand { get; set; }
public CreateQuizPageViewModel()
{
CreateQuizCommand = new RelayCommand(OnCreateQuizClick);
}
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public void OnCreateQuizClick()
{
QuizQuestionInput = "";
}
}

Blazor Server side, set parent class name based on child class name

I have a EditForm with MatBlazor Expansion panels. I am trying to set the individual panels border color if any of the form fields are invalid inside it. I am trying to achieve following..
<MatExpansionPanel Class="#(<bool>ChildElementHasValidationMessage() ? "invalid-red-border": "")">.....</MatExpansionPanel>
I am OK with simple equivalent css solution to find a parent element. Please advice.
Just use Style instead Class to override css:
<MatExpansionPanel Style="#(your expression);"
I answered a related question about MatExpansionPanel: Mat Blazor mat-expansion-panel remove elevation/border
Edited
I wrote my own component to send EditContext on changes. I pasted it below. This is how it works:
<h1>#ShowDemo</h1>
<EditForm Model="#model" OnValidSubmit="#SaveItem">
<DataAnnotationsValidator />
<ValidationSummary />
<MyValidationSneak UpdateDelegate="#( (ctx)=>UpdateUI(ctx) )" />
<InputText id="ItemName" #bind-Value="#model.ItemName" />
<ValidationMessage For="#(() => model.ItemName)" />
<button type="submit">Submit</button>
</EditForm>
#code {
string ShowDemo = "res de res";
protected void UpdateUI(EditContext ctx)
{
var _fieldIdentifier = FieldIdentifier.Create( () => model.ItemName );
ShowDemo = string.Join(", ", ctx.GetValidationMessages(_fieldIdentifier) );
}
ItemModel model = new ItemModel();
private void SaveItem() { }
public class ItemModel
{
[Required]
public string ItemName{ get; set; }
}
}
See it in action at BlazorFiddle:
The MyValidationSneak:
public class MyValidationSneak: ComponentBase, IDisposable
{
[CascadingParameter] EditContext CurrentEditContext { get; set; }
[Parameter] public Action<EditContext> UpdateDelegate { get; set; }
private readonly EventHandler<ValidationStateChangedEventArgs> _validationStateChangedHandler;
public MyValidationSneak()
{
_validationStateChangedHandler = (sender, eventArgs) => GoUpdate();
}
private void GoUpdate() => UpdateDelegate(CurrentEditContext);
private EditContext _previousEditContext;
protected override void OnParametersSet()
{
if (CurrentEditContext == null)
{
throw new InvalidOperationException($"{nameof(ValidationSummary)} requires a cascading parameter " +
$"of type {nameof(EditContext)}. For example, you can use {nameof(ValidationSummary)} inside " +
$"an {nameof(EditForm)}.");
}
if (CurrentEditContext != _previousEditContext)
{
DetachValidationStateChangedListener();
CurrentEditContext.OnValidationStateChanged += _validationStateChangedHandler;
GoUpdate();
_previousEditContext = CurrentEditContext;
}
}
protected virtual void Dispose(bool disposing) {}
void IDisposable.Dispose()
{
DetachValidationStateChangedListener();
this.Dispose(disposing: true);
}
private void DetachValidationStateChangedListener()
{
if (_previousEditContext != null)
{
_previousEditContext.OnValidationStateChanged -= _validationStateChangedHandler;
GoUpdate();
}
}
}
Get code at github

Expose nested HTML property on asp.net UserControl

I have an asp.net UserControl that writes HTML content from a SharePoint list to a Literal control. Currently I insert a title in h5 tags before each SharePoint list item I write to the Literal. Instead of having the title hardcoded to be placed in h5 tags, I'd like to expose a public property of my user control that lets me define the html format for the title. This is a little different from the templated user control questions I've found so many of because it's not really a template for the user control. I just need a string containing html. Here's what I'm looking to do:
public class MyUserControl: UserControl
{
public string TitleFormat { get; set; }
private void ShowContent()
{
...
string output = String.Format(TitleFormat, title) + someContent;
ltlOutput.Text = output.
}
}
In markup:
<UC:MyUserControl id="muc1" runat="server">
<TitleFormat>
<h3>{0}</h3>
</TitleFormat>
</UC:MyUserControl>
How can I set this up?
Here is the answer (provided by Decker Dong in the asp.net forums):
To nest another class into one, you have to declare a new property but
just declare it is an InnerProperty. And set its Design properties.
Now here's a full sample for you:
[ParseChildren(true),PersistChildren(false)]
public partial class MyUserControl : System.Web.UI.UserControl
{
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[PersistenceMode(PersistenceMode.InnerProperty)]
public string TitleFormat
{
get;
set;
}
protected void Page_Load(object sender, EventArgs e)
{
}
}
With these attributes you can use the control as written in the question.
What you need is http://msdn.microsoft.com/en-us/library/system.web.ui.itemplate.aspx
HTML
<test:NamingControl runat="server" ID="NamingControl" TitleFormat="This is myTitle">
<TitleFormatTemplate>
My title is <%# Container.TitleFormat %>
</TitleFormatTemplate>
</test:NamingControl>
UserControl
public partial class MyUserControl : System.Web.UI.UserControl
{
private ITemplate template;
protected void Page_Load(object sender, EventArgs e)
{
}
public string TitleFormat
{
get;
set;
}
[PersistenceMode(PersistenceMode.InnerProperty),
TemplateContainer(typeof(TitleFormatTemplate))]
public ITemplate TitleFormatTemplate
{
get { return template; }
set { template = value; }
}
protected override void CreateChildControls()
{
base.CreateChildControls();
TitleFormatTemplate t = new TitleFormatTemplate();
t.TitleFormat = this.TitleFormat;
template.InstantiateIn(t);
this.Controls.Add(t);
this.DataBind();
}
}
Child Control - INamingContainer
public class TitleFormatTemplate : Control, INamingContainer
{
private string _TitleFormat = "";
public string TitleFormat
{
get { return _TitleFormat; }
set { _TitleFormat = value; }
}
}
The simpler approach - No more TitleFormat tag
MyUserControl.ascx
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs"
Inherits="testgingweb.usrcontrols.MyUserControl" %>
<h3><asp:Label runat="server" ID="PassedValueLabel"></asp:Label</h3>
The Codebehind - MyUserControl.ascx.cs
public string TitleFormat
{
get { return ViewState["TitleFormat"]; }
set { ViewState["TitleFormat"] = value; }
}
protected void Page_Load(object sender, EventArgs e)
{
PassedValueLabel.Text = String.Format("Whatever {0} here", this.TitleFormat);
}
HTML
<test:MyUserContorl runat="server" ID="NamingControl" TitleFormat="This is myTitle">
</test:MyUserContorl>
Notice that I didn't have the TitleFormat tag anymore.

How do I create an ASP.NET control that simulates switch/case?

I've got a repeater looping through a list of objects that are of different types. I'd like to render the objects differently depending on their type. For this I need some kind of control (since I want to avoid using the code-behind) that has a behavior similar to a switch/case statement. Basically it could look like this:
<xxx:TestType Object='<%# Container.DataItem %>'>
<Case Type="Namespace.ClassX">
<asp:Label ... />
</Case>
<Case Type="Namespace.ClassY">
<asp:TextBox ... />
</Case>
<Default>
<p>Other</p>
</Default>
</xxx:TestType>
I've made web controls before, but this is a rather complex one...
How do I make it support multiple <Case> elements?
Is it possible to implement the <Case Type="..."> elements, or am I limited to attribute-less elements?
I'm guessing I have to make a type for the <Case> elements and somehow specifying it for the main web control?
I'd be grateful for any pointers, links to tutorials, etc!
Alternative
Alternatively, suggest a nicer way of rendering different HTML/ASP.NET controls based on the type of the currently bound object. The first method that popped into my head was this, which I consider (very) ugly:
<asp:PlaceHolder Visible='<%# CheckType(Container, typeof(ClassX)) %>' runat="server">
...
</asp:PlaceHolder>
<asp:PlaceHolder Visible='<%# CheckType(Container, typeof(ClassY)) %>' runat="server">
...
</asp:PlaceHolder>
The MultiView control is the closest thing out-of-the-box in ASP.NET to a C# switch statement.
Look at implementing ITemplate interface
public class Case
{
[PersistenceMode(PersistenceMode.Attribute)]
public string Type { get; set; }
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public ITemplate Template { get; set; }
}
public class DeclarativeCase
: CompositeControl
{
[PersistenceMode(PersistenceMode.InnerProperty)]
public List<Case> Cases { get; set; }
[PersistenceMode(PersistenceMode.InnerProperty)]
public ITemplate Default { get; set; }
}
<xxx:DeclarativeCase runat="server" ID="test">
<Cases>
<xxx:Case Type="Namespace.TypeName">
<Template>
<asp:Label ID="Label1" runat="server"></asp:Label>
</Template>
</xxx:Case>
</Cases>
<Default>
<asp:Label ID="Label2" runat="server"></asp:Label>
</Default>
</xxx:DeclarativeCase>
Why don't you ditch the server control and use the C# switch statement. All you need is to wrap it in the code tags.
Another approach is a iteration (for loop). Create an interface with a type property and a render method. Then iterate over the interfaces until you've found the correct type.
I had a similar requirement a while ago and I did something similar to:
[ParseChildren(true, "Templates")]
public class TypedRepeater : CompositeDataBoundControl
{
[
PersistenceMode(PersistenceMode.InnerProperty),
Browsable(false),
MergableProperty(false)
]
public TypedTemplateCollection Templates
{
get;
}
protected TypedTemplate GetTemplate(object dataItem)
{
if (dataItem == null)
{
return null;
}
foreach (TypedTemplate template in Templates)
{
Type itemType = dataItem.GetType();
if (dataItem.IsAssignableFrom(template.Type))
{
return template;
}
}
return null;
}
protected TypedTemplateRepeaterItem CreateItem(int index, object dataItem, bool dataBinding)
{
TypedTemplateRepeaterItem repeaterItem = new TypedTemplateRepeaterItem();
if ((!dataBinding) && (ViewState[string.Format("TemplateIxc_{0}", index)] is int))
{
int _template = (int)ViewState[string.Format("TemplateIxc_{0}", index)];
if ((_template >= 0) && (_template < Templates.Count) && (Templates[_template].ItemTemplate != null))
{
Templates[_template].ItemTemplate.InstantiateIn(repeaterItem);
}
else
{
DefaultTemplate.InstantiateIn(repeaterItem);
}
}
else if (dataBinding)
{
TypedTemplate template = GetTemplate(dataItem);
ITemplate itemTemplate = DefaultTemplate;
if (template != null)
{
itemTemplate = template.ItemTemplate;
ViewState[string.Format("TemplateIxc_{0}", index)] = Templates.IndexOf(template);
}
else
{
ViewState[string.Format("TemplateIxc_{0}", index)] = -1;
}
repeaterItem.DataItem = dataItem;
repeaterItem.DataItemIndex =
repeaterItem.DisplayIndex = index;
itemTemplate.InstantiateIn(repeaterItem);
repeaterItem.DataBind();
repeaterItem.DataItem = null;
}
return repeaterItem;
}
protected override int CreateChildControls(IEnumerable dataSource, bool dataBinding)
{
int count = 0;
if (dataSource != null)
{
foreach (object dataItem in dataSource)
{
TypedTemplateRepeaterItem repeaterItem = CreateItem(count, dataItem, dataBinding);
Controls.Add(repeaterItem);
count++;
}
}
return count;
}
}
where TypedTemplateCollection is a StateManagedCollection of a TypedTemplate class:
[ParseChildren(true, "ItemTemplate")]
public class TypedTemplate
{
public Type Type
{
get { return Type.GetType(TypeName); }
}
[
PersistenceMode(PersistenceMode.Attribute),
Browsable(true),
DefaultValue("")
]
public string TypeName
{
get;
set;
}
[
PersistenceMode(PersistenceMode.InnerProperty),
Browsable(true),
DefaultValue(typeof(ITemplate), null),
TemplateContainer(typeof(TypedTemplateRepeaterItem))
]
public ITemplate ItemTemplate
{
get;
set;
}
}
and TypedTemplateRepeaterItem is:
public class TypedTemplateRepeaterItem : WebControl, INamingContainer, IDataItemContainer
{
#region IDataItemContainer Members
public object DataItem
{
get;
set;
}
public int DataItemIndex
{
get;
set;
}
public int DisplayIndex
{
get;
set;
}
#endregion
}
The MSDN site has a simple clear example of templating and it certainly seems like the way to go in your case.

asp.net Web server control with child controls, event not firing

I have a simple web control (TaskList) that can have children (Task) which inherit from LinkButton, that can be added declaratively or programatically. This works ok, but I can't get the onclick event of a Task to be fired in my code behind. The code ..
[ToolboxData("<{0}:TaskList runat=\"server\"> </{0}:TaskList>")]
[ParseChildren(true)]
[PersistChildren(false)]
public class TaskList : System.Web.UI.Control
{
//[DefaultProperty("Text")]
public TaskList()
{}
private List<Task> _taskList = new List<Task>();
private string _taskHeading = "";
public string Heading
{
get
{
return this._taskHeading;
}
set
{
this._taskHeading = value;
}
}
[NotifyParentProperty(true)]
[PersistenceMode(PersistenceMode.InnerProperty)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
public List<Task> Tasks
{
get
{
return this._taskList;
}
set
{
this._taskList = value;
}
}
protected override void CreateChildControls()
{
foreach (Task task in this._taskList)
this.Controls.Add(task);
base.CreateChildControls();
}
protected override void Render(HtmlTextWriter writer)
{
writer.Write("<h2>" + this._taskHeading + "</h2>");
writer.Write("<div class='tasks_container'>");
writer.Write("<div class='tasks_list'>");
writer.Write("<ul>");
foreach (Task task in this._taskList)
{
writer.Write("<li>");
task.RenderControl(writer);
writer.Write("</li>");
}
writer.Write("</ul>");
writer.Write("</div>");
writer.Write("</div>");
}
}
public class Task : LinkButton
{
private string _key = "";
public string Key
{
get
{
return this._key;
}
set
{
this._key = value;
}
}
}
Markup:
<rf:TaskList runat="server" ID="tskList" Heading="Tasks">
<Tasks>
<rf:Task Key="ba" ID="L1" Text="Helllo" OnClick="task1_Click" runat="server" />
</Tasks>
</rf:TaskList>
The Onclick event task1_Click never fires when clicked (although a postback occurs).
TaskList needed to implement INamingContainer to correctly route the events of each Task.
You could also inherit from CompositeControl, which implements INamingContainer for you, instead of inheriting from Control.
Have you thought about INamingContainer.

Resources