Here is my code:
<CardHeader Title="#card.Title" SubTitle=#String.Format("AED {0}" ,#card.Price.ToString())
Need to add tooltip to Title field on adding
<CardHeader Title="#card.Title" title=#card.Title SubTitle=#String.Format("AED {0}" ,#card.Price.ToString())
on adding getting two parameters are unique and incasesensitive error
It looks like you are already using Syncfusion controls so why not use the SfTooltip as well? You'll need the Syncfusion.Blazor.Popups NuGet package if you're not using the generic package that has all the controls.
<SfTooltip Content="#card.Title" Position="Position.LeftCenter">
<CardHeader Title="#card.Title" SubTitle=#String.Format("AED {0}" ,#card.Price.ToString()) />
</SfTooltip>
Your requirement to add tooltip to the Card header title can be achieved by using the SfTooltip control. please check the code below,
Code snippet:
#using Syncfusion.Blazor.Cards
#using Syncfusion.Blazor.Popups
<SfTooltip ID="Tooltip" Target=".e-card-header-title" Content="#cardTitle">
<SfCard ID="HugeImage">
<CardHeader Title="#cardTitle" SubTitle="Sales Coordinator and Representative" />
</SfCard>
</SfTooltip>
#code{
public string cardTitle = "Laura Callahan";
}
Tooltip Documentation: https://blazor.syncfusion.com/documentation/tooltip/getting-started
Regards,
Vinitha
Related
I found out something curious and I am wondering if anyone knows the answer:
First of all this is not this question:
Different method calls in Blazor
That question refers to HTML elements. I am talking about Components.
So I have my own component named MyButton; and it has OnClick Parameter specified:
MyButton.razor
<button #onclick="OnClick">Do Something</button>
#code {
[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }
}
When I use MyButton I can use either the name exactly, i.e.
<MyButton OnClick="SomeMethod" />
But this is also working:
<MyButton #onclick="SomeMethod" />
When I remove the whole #code block from the MyButton.razor they both give me the exact same error message:
<Mybutton OnClick="MyMethod" />
Object of type 'MyButton' does not have a property matching the name 'OnClick'.
<Mybutton #onclick="MyMethod" />
Object of type 'MyButton' does not have a property matching the name 'onclick'.
The only difference is in the caps; "OnClick" vs "onclick"... that is logical. So it seems #onclick is the same as OnClick... but are they?
Is this simply an overload of some sorts?
#onclick is the native HTML click event and OnClick is the event parameter you explicitly expose in your MyButton component.
So in this case you should use
<MyButton OnClick="SomeMethod" />
I tried to reproduce the usage with #onclick but it didn't work in my case.
For science, you could try to add a text <p>Like this</p> to your MyButton component and see if the #onclick event still works and if it only fires if you click the button or also if you click the text.
Also, see Microsoft Docs for detailed information.
Do you use MudBlazor ? Because I think OnClick is part of the MudBlazor Button API and #onclick is part of the ASP.NET Core Blazor event handling features.
Im manually Creating the table using the built in razor GETHtml Function.
#table.GetHtml(
columns: table.Columns(
table.Column("Account"),
table.Column("Due"),
table.Column("Topic"),
table.Column("Type"),
table.Column("Completed?", format: #<input id="Complete" name="Complete" type="checkbox" onclick="/Tasks/Complete?ID=700" />)
)
)
What I want is a way of clicking a checkbox, or button to activate the controller. it is not accepting Dynamic checkbox. Nor does the html checkbox do anything.
I Have a working solution without using forms, the column would be set using the following code:
table.Column("Completed?", format: #<input type="checkbox" onclick="location.href='#Url.Action("Complete", "Tasks", new { TaskID = item.TaskID })'" />
I think its possible that having the name property was causing it to post it as a parameter, rather than treat it as a submit.
Otherwise it must ahve been the onclick event. Ive used location.href, then set it using razor syntax, and included the id as a property.
Couple of ways to go about performing a post to your desired controller. Wrap your table with the form you would like to submit or add a few AJAX handlers to post the data you desire. A simple form could be accomplished like:
<% using (Html.BeginForm<SomeController>(x=> x.SomeAction())
{
#table.GetHtml(
columns: table.Columns(
table.Column("Account"),
table.Column("Due"),
table.Column("Topic"),
table.Column("Type"),
table.Column("Completed?", format: #<input id="Complete" name="Complete" type="submit" " />)
)
)
}
I want to add tooltips to a form on my site. I am using the jQuery tools library. The tooltips show the content of the title attribute of an html input. Is there a way to make the asp.net textbox render out the title attribute in the html input it creates?
Since title is a global attribute, according to the W3C HTML language specifications, I would have expected a title property in the System.Web.UI.WebControls.WebControl.
However, Microsoft appears to have chosen a more 'appropriate' name for this property: Tooltip.
If you specify this property:
var label = new Label();
label.ToolTip = "tooltip";
label.Text = "text";
Controls.Add(label);
it will render:
<span title="tooltip">text</span>
which is just what you wanted.
Seeing that Tooltip is a property of the base WebControl, I assume that it will render as a title attribute for all WebControl classes.
You would do something like TextBox1.Attributes.Add("title", "Some title value");
Textbox.Attributes.Add("title","My text");
The .Attributes.Add("Attribute Name", "Attribute Value") lets you add most attributes to most controls, but always use the native property if available.
By far the easiest way is:
<asp:TextBox runat="server" title="My Title" />
Which renders
<input type="text" title="My Title" />
This also works with style etc, etc.
what is the best and most simplest way to create tooltip text for textboxes
With JavaScript and probably with a framework like jQuery that fits very well with ASP.NET MVC. Using the framework means that someone's alread done the hard work and written a plugin for it!
qtip
tooltip
List of some tooltip plugins
There is of course the title attribute on text inputs that shows as a popup tip in some browsers.
I found this to be the simplest and easy to maintain approach:
Create description using data annotation for the property of your model
Example:
[Display(Name="MyTextBox", Description = "Title for your entry")]
public string MyTextBox{ get; set; }
Then in your view access the description above using:
#Html.TextBoxFor(model => model.MyTextBox, new { title = ModelMetadata.FromLambdaExpression(model => model.MyTextBox, ViewData ).Description })
Just use the title tag :
<input type="text" title="Hello I'm the tool-tip"/>
Mvc way :
#Html.TextBoxFor(t => t.NameOfCustomer, new{ title= "Hello I'm the tool-tip" })
It's not fully customizable as is, but it does not require extra javascript nor a framework.
Use the data annotations on your model to put the tooltip in the Description property of the DisplayAttribute.
Then write your own Html Helper function that puts the Description property into the title attribute of the TextBox input field. You can call the helper TextBoxWithTooltipFor
In your view definition you can then replace the call to #(Html.TextBoxFor(...)) with the call to #(Html.TextBoxWithTooltipFor(...))
Here is the code that is tested and works.
I'm new to jquery, and sorry if this question is asked before (could find exactly what I was looking for)
I would like to implement the following convetion: If I create a error label with the name '_lblError' like this:
<div>
<asp:label ID="_lblError" text="this is a error msg"/>
</div>
classA or classB would be applied to it depending on a empty string or not in the 'text' parameter of the label.
I also would like to place this code in a external js file that would be used throughout the app.
Thanks for any help!
To start with, you probably need to give the label a css class that can be used for selection:
<asp:Label Id="_lblError" Text="This is the error message"
CssClass="ThisIsWhatWeWillllWorkWith" />
This will probably output something like
<span id="ct100__lblError" class="ThisIsWhatWeWillWorkWith">
This is the error message.
</span>
You can now select the label in jQuery using the class as selector, and add class A or B depending on whether the .text() property is empty or not.
$(function() {
$('.ThisIsWhatWeWillWorkWith').each(function() {
if($(this).text() == '') { $(this).addClass('ClassA'); }
else { $(this).addClass('ClassB'); }
});
});
All code is provided as is, with no guarantees of working without modification. But you get the general idea of how to solve the problem...
EDIT: In response to your comment, here's a way to do it without adding a css class to the label. Instead of using an <asp:Label> tag for the error message, wrap a literal in a tag you hard-code on your page:
<span class="ThisIsWhatWeWillWorkWith"><asp:Literal ID="__ltlError" Text="This is the error message.</asp:Literal></span>
Another, perhaps more elegant way, would be to create your own custom label, and use that instead.
public class ErrorLabel : System.Web.UI.WebControls.Label
{
public ErrorLabel() {
this.CssClass = "ThisIsWhatWeWillWorkWith";
}
}
You then put the error message on your page with the following line:
<asp:ErrorLabel ID="__lblError" Text="This is the error message" />
Again, not sure if the above code will work as is. But again, you get the idea of what to do...
If the idea is to provide say, have different font and/or background if there is an error and display nothing if there is no text in the error label then you could make the control a literal instead of a label. The literal control does not create a control with no text (MSDN doc)