I am new to blazor and currently working on a small project where I have a lot of text input fields on a page, which would be validated on submit. The page is responsive and would shrink into a column format when reducing device screen size. The message for a couple of validations is too long, and the string overflows out of its parent div element. What is a good way to fix that, and make the string break into multi-line?
Code
Code
The default ValidationMessage component generates a div and assigns the css class 'validation-message' at rendering time. If you want to change the look and feel, you can do one of these :
create a custom ValidationMessage c# class, and use your own css class (refer this SO answer) or use bootstrap css etc
quick and not so elegant fix, you can modify the validation-message class in your app.css or site.css file(s), so that it word wraps the lengthy error messages
create a custom validator blazor component (as in this)
Related
Simple question;
When are Custom HTML Helpers supposed to be used. Are we supposed (as intended by the developers of MVC) to implement an Extention method for all tags/logic that are reused across the views?
I'm curious about this, as we currently have a medium sized project that needs to be refactored. Alot of different interns have been working on this, and its time to do a cleanup.
Use Html Helper for rendering an Html Element. That element may contain inner elements, but your helper should mean the outermost element. Let me give you an example. Say, you want to render an Image button with some specific attributes so that your image button will look like this:
<button title="my button" onclick="onClickFunctionName()">
<img src="...." />
</button>
So, an Html Helper with following signature can be very useful:
#Html.ImageButton(title:"my button", onclickFunctionName:"onClickFunctionName", imageSource:"....")
Same like an image button, you can encapsulate creating a Table using Html Helper.
If you want to encapsulate a piece of html markup for some partial layout, then you should use Partial Views. For example, a Partial View can be used for rendering Login box with User name and Password and a Remember Me Checkbox. In this case, an HTML Helper wont be a good idea to use.
In situations where you want your links to work with your routing configurations. You use HTML property. It's instance of IHtmlHelper which contains methods for generating snippets of html. You could type them by hand, but this html property has a logic behind the scenes to use some metadata or configurations in your application. Also, HTML Helpers know built-in conventions in the MVC framework.
I have a web app that has a form on just about every page. In order to make sure each form renders the same, as to make changes easier, I want to render all of my form controls in c# in a central place so if I need to add a class to the input or change something, I only have to do it once.
At the moment, I am just using a load of static classes like TextInputHelper, CheckboxInputHelper etc that use StringBuilder to build up the HTML and returns a string to my view.
For example, all of my forms controls are of the basic form:
<section>
<label class="label">Label Text</label>
<label class="input">
...Input Element...
</label>
</section>
What I would like to do is improve this situation as I still have a lot of duplication between the different helper classes, particularly for the wrappers to the form elements. My initial thoughts are to have a class called something like BaseFormControl that has a virtual Render method that has the outer wrapper for the control, then create other classes that implement this to do specific things like a TextFormControl that puts
<input type="text".....
inside the wrapper.
Am I on the right path for this, and/or is there a design pattern that is appropriate for what I want to do?
From my POV what I read is that you over complicating your server side just because of a CSS/HTML standardization that be easily solved from the client side.
If you still want to go for the server side approach the pattern that seems to apply to your approach is the Adapter(Wrapper) pattern meaning that you probably would want to create control wrapper clases to meet your needs for each control that renders a different html from what is offered by ASP.NET built-in controls.
If what you want to do instead is to format a group of controls then a UserControl is way much better approach.
Remember that ASP.NET was build with the spirit of trying to keep layers separated the View from the Code therefore any attempt to generate html from the server side has to be an exception and not a rule.
My issue is that I have a designer that will create a custom aspx page bu without any .net controls. I need a way of adding the controls dynamically. So far the only types of controls will be textboxes and a button, but there are 30 variations of what the textboxes can be (name, phone #, email, etc). Also the textboxes may or may not need to be required. Once the textboxes are added the form will be submitted to a db.
My first thought was to have the designer place something like [name] and then replace that with a user control that has a name textbox and a required field validator. In order to determine if the validator should be enabled I was thinking that the place holder could look like this, [name;val] or [name;noval]. I could either do replace the place holders in code dynamically or set up a tool that the user pastes their html into a textbox and clicks a button which then spits out the necessary code to create the aspx page.
I'm sure there must be a better way to do this but its a fairly unique problem so I haven't been able to find any alternatives. Does anyone have any ideas?
Thanks,
Kirk
IF your designer gives you html pages, just create a new website. copy and pages all the HTML pages with the Image folders and everything to your project. then for every HTML page create an aspx page, (with the same name) copy and pages the html's tags which are between to the aspx page's and for the body copy and paste HTML page's tags which are between into the of the aspx page.
Now you have your aspx page, exactly the same as html page.
Sounds like an attempt to over-engineer a solution to what should be a non-issue.
As #Alessandro mentioned in a comment above, why can't the designer provide you with pages that have the control markup? As it stands right now, the designer isn't providing you with "a custom aspx" so much as "a custom html page." If the designer is promising ASPX but delivering only HTML, that's a misinterpretation somewhere in the business requirements.
However, even if the designer is rightfully providing only HTML, there shouldn't be a problem with that. At worst, you can set each element you need on the server to runat="server" to access them on the server-side. Or, probably better, would be to simply replace them with the ASPX control markup for the relevant controls.
Write a simple parser that will recognize the [...] tags and replace them with corresponding controls. Its pretty easy to do and i've often done this... the tag i use is usually $$(..); though, but that doesn't matter as long as your parser knows your tags.
Such a parser will consist of a simple state-machine that can be in two states; text-mode or tag-mode. Loop through the whole page-text, char for char. As long as you're in text-mode you keep appending each char into a temporary buffer. As soon as you get into tag-mode you create a LiteralControl with the content of the temporary buffer and add it to the bottom of your Control-tree, and emtpy the buffer.
Now, you still keep adding each char into the buffer, but when you hit text-mode again, you analyze the content of the buffer and create the correct control - could be a simple switch case statement. Add the control to the bottom of your control tree and keep looping through the rest of the chars unto you read the end and keep switching back and forth between text-mode and tag-mode adding LiteralControls and concrete controls.
Simple example of such a parser... written in notepad in 4 minutes, but you should get the idea.
foreach (var c in text)
{
buffer.Append(c);
if (c== '[' && mode == Text)
{
mode = Tag;
Controls.Add(new LiteralControl(buffer));
buffer.Clear();
}
if (c == ']' && mode == Tag)
{
mode = Text;
switch (buffer)
{
case "[name]": Controls.Add(new NameControl());
... the rest of possible tags
}
buffer.Clear();
}
I have seen two suggestions for my original question about whether it is possible to define a content area inside a user control and there are some helpful suggestions i.e.
Passing in content to ASP.NET user control
and
ASP.NET User Control inner content
Now, I like the theory of the latter better than the former just for aesthetic reasons. It seems to make more sense to me but the example given uses two variables content and templateContent that the answerer has not defined in their example code. Without these details I have found that the example does not work. I guess they are properties of the control? Or some such?
EDIT - DETAILS: What I am trying to do
I have need of an ASP.Net user control that conceals some content in a panel inside a placeholder and asks for the input of a code in a visible panel.
Essentially the user will put their code into the provided textbox in Panel A and submit it, it will be checked and, if it is valid, panel B and the locked content will be displayed.
I have done a test where the content was hard coded into panel B but as soon as I need to make the content a generic input it fails. If it were just text or somesuch then I could make it a property of the control, but as it is, in fact, another User Control I am having some difficulty getting this into the "hidden" panel.
Any other workable solutions are also welcome.
EDIT NOTE: The solution I'm trying to implement this in 2.0 I did find a 3.5 solution which I cannot use.
The former example seems workable but I'd prefer to go with the latter if someone could fill in the blanks for me.
Thanks.
Okay, so this is disturbingly easy but many of the tutorials on the web that talk about this kind of thing push to do extravagant things that require the control to parse ListItems or such.
So this solution is purely so that you can build a control that, for whatever reason, has a placeholder in it that could have anything inside it (kind of like a content area on a Master page). In this instance it happens to be because the Panel containing the placeholder is hidden until appropriate input actions have taken place in another panel.
First, you need to add this:
[ParseChildren(true,"Content")]
[PersistChildren(false)]
just above the part of the control which looks like this:
public partial class MyControl : System.Web.UI.UserControl
then in the control scoped declarations at the head of the control you want to declare thus:
private Control _content;
[PersistenceMode(PersistenceMode.InnerProperty)]
public Control Content { get { return _content; } set { _content = value; } }
Finally you need to place the content into the placeholder like this:
phContent.Controls.Add((Control)_content);
That last line goes into the Page_Init event. For reference "phContent" is the name of the place holder where you want the content to appear, like this:
<asp:Panel ID="pnlLockable" runat="server" Visible="False">
<asp:Placeholder runat="server" ID="phContent" />
</asp:Panel>
On the front end the resulting implementation looks like this:
<uc:MyControl runat="server" ID="lockit1">
<Content>
//...your stuff goes here...
</Content>
<uc:MyControl>
Note that I presume that what is inbetween the Content Tags is a root control. This is because I nested another user control in there. I imagine if you put whatever content you want within a panel or placeholder it should be fine.
Also you can read "How to: Create Templated ASP.NET User Controls". Really helpful.
I'm trying to inject some CSS that accompanies some other HTML into a C# managed WebBrowser control. I am trying to do this via the underlying MSHTML (DomDocument property) control, as this code is serving as a prototype of sorts for a full IE8 BHO.
The problem is, while I can inject HTML (via mydomdocument.body.insertAdjacentHTML) and Javascript (via mydomdocument.parentWindow.execScript), it is flat-out rejecting my CSS code.
If I compare the string containing the HTML I want to insert with the destination page source after injection, the MSHTML's source will literally contain everything except for the <style> element and its underlying source.
The CSS passes W3C validation for CSS 2.1. It doesn't do anything too tricky, with the exception that some background-image properties have the image directly embedded into the CSS (e.g. background-image: url("data:image/png;base64 ...), and commenting out those lines doesn't change the result.
More strangely (and I am not sure if this is relevant), was that I was having no problems with this last week. I came back to it this week and, after switching around some of the code that handles the to-be-injected HTML before actual injection, it no longer worked. Naturally I thought that one of my changes might somehow be the problem, but after commenting all that logic out and feeding it a straight string the HTML is still appearing unformatted.
At the moment I'm injecting into the <body> tag, though I've attempted to inject into <head> and that's met with similar results.
Thanks in advance for your help!
tom
Ended up solving this myself:
mshtml.HTMLDocument test = (mshtml.HTMLDocument)webBrowser1.Document.DomDocument;
//inject CSS
if (test.styleSheets.length < 31) { // createStyleSheet throws "Invalid Argument if >31 stylesheets on page
mshtml.IHTMLStyleSheet css = (mshtml.IHTMLStyleSheet)test.createStyleSheet("", 0);
css.cssText = myDataClass.returnInjectionCSS(); // String containing CSS to inject into the page
// CSS should now affect page
} else {
System.Console.WriteLine("Could not inject CSS due to styleSheets.length > 31");
return;
}
What I didn't realize is that createStyleSheet creates a pointer that is still 'live' in the document's DOM... therefore you don't need to append your created stylesheet back to its parent. I ended up figuring this out by studying dynamic CSS code for Javascript as the implementations are pretty much identical.