How to avoid writing messy JavaScript in ASP.NET code?

This is a classic question for any technology stack. To answer this question, I remember a couple of things:

• Don't repeat yourself (which can be harder with WebForms)
• Do one thing and do it well.

I found that the client side functionality falls into a couple of categories:

• Form validations, which are often extensions to business rules that must be managed at the end of the code
• Usability improvements such as dropdown menus, automatic use of text when moving focus away from the text field, etc.
• User experience management, which is probably driven by business rules, which isn't easy to do on the back.

( Note: There may be several errors in the code below, but it should give you the basic idea)

Form validation with ASP.NET WebForms

This was the area of ​​greatest pain for me. I am currently experimenting with FluentValidation with WebForms and it is really good. My best advice regarding validation is: Don't use validators <asp:Foo />

! ... This is the reason people complain that WebForms is a copy and paste environment. It doesn't have to be this way. Before rapid sample code does not use the Data [Set | Table | Row] s! ... You get all the data, but none of it works. Use an ORM like Entity Framework or NHibernate and all your ASP pages deal with entity classes because then you can use something like FluentValidation:

App_Code / Models / Objects / Post.cs

namespace Project.Models.Entities
{
    public class Post
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Body { get; set; }
        public DateTime CreatedAt { get; set; }
        public DateTime? ModifiedAt { get; set; }
    }
}

      

        
        
        
      

    

App_Code / Models / Validators / PostValidator.cs

using FluentValidation;
using Project.Models.Entities;

namespace Project.Models.Validators
{

    public class PostValidator : AbstractValidator<Post>
    {
        public PostValidator()
        {
            RuleFor(p => p.Title)
                .NotEmpty()
                .Length(1, 200);

            RuleFor(p => p.Body)
                .NotEmpty();
        }
    }
}

      

        
        
        
      

    

Once you have the core entities and validators, use them in your code behind:

controls UserControl / PostControl.ascx.cs

namespace Project.UserControls
{
    public class PostControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Page.IsPostBack)
            {
                PostValidator validator = new PostValidator();
                Post entity = new Post()
                {
                    // Map form fields to entity properties
                    Id = Convert.ToInt32(PostId.Value),
                    Title = PostTitle.Text.Trim(),
                    Body = PostBody.Text.Trim()
                };
                ValidationResult results = validator.Validate(entity);

                if (results.IsValid)
                {
                    // Save to the database and continue to the next page
                }
                else
                {
                    BulletedList summary = (BulletedList)FindControl("ErrorSummary");

                    // Display errors to the user
                    foreach (var failure in results.Errors)
                    {
                        Label errorMessage = FindControl(failure.PropertyName + "Error") as Label;

                        if (errorMessage == null)
                        {
                            summary.Items.Add(new ListItem(failure.ErrorMessage));
                        }
                        else
                        {
                            errorMessage.Text = failure.ErrorMessage;
                        }
                    }
                }
            }
            else
            {
                // Display form
            }
        }

        ...
    }
}

      

        
        
        
      

    

UserControl / PostControl.ascx controls

<asp:BulletedList ID="ErrorSummary" runat="server" CssClass="Error-Summary" />

<p>
    <asp:Label ID="PostTitleLabel" AssociatedControlID="PostTitle" runat="server">* Title:</asp:Label>
    <asp:TextBox ID="PostTitle" runat="server" />
    <asp:Label ID="PostTitleError" runat="server" CssClass="Error" />
</p>

<p>
    <asp:Label ID="PostBodyLabel" AssociatedControlID="PostBody" runat="server">* Body:</asp:Label>
    <asp:TextBox ID="PostBody" runat="server" TextMode="MultiLine" />
    <asp:Label ID="PostBodyError" runat="server" CssClass="Error" />
</p>

<asp:HiddenField ID="PostId" runat="server" />

      

        
        
        
      

    

Add client side validation programmatically

Now that we have a solid foundation in C #, you can add HTML attributes to each of the form fields and use jQuery Validate to trigger some front end validation. You can loop through the FluentValidation rules programmatically:

PostValidator validator = new PostValidator();

foreach (var rule in validator.AsEnumerable())
{
    propertyRule = rule as FluentValidation.Internal.PropertyRule;

    if (propertyRule == null)
        continue;

    WebControl control = (WebControl)FindControl("Post" + propertyRule.PropertyName);

    foreach (var x in rule.Validators)
    {
        if (x is FluentValidation.Validators.NotEmptyValidator)
        {
            control.Attributes["required"] = "required";
        }
        else if (x is FluentValidation.Validators.MaximumLengthValidator)
        {
            var a = (FluentValidation.Validators.MaximumLengthValidator)x;

            control.Attributes["size"] = a.Max.ToString();
            control.Attributes["minlength"] = a.Min.ToString();
            control.Attributes["maxlength"] = a.Max.ToString();
        }

        ...
    }
}

      

        
        
        
      

    

Complex, multi-verification checks

Any validation that requires data from more than one field should not be processed on the client. Do it in C #. Trying to flatten this together in HTML and JavaScript in an ASP page becomes cumbersome and not enough to justify the additional overhead and maintenance issues.

Usability improvements

These JavaScript snippets help users and do little to enforce business rules. In an application I'm working on, whenever the user moves focus to a text field, every word must be capitalized, so "foo bar" becomes "Foo Bar". Sending JavaScript and events to help:

Scripts / foo.js (imported on every page)

$(document).on("focusout", "input[type=text][data-capitalize-disabled^=true]", function(event) {
    event.target.value = event.target.value.replace(/(^|\s+)[a-z]/g, function(match, $1) {
        return $1.toUpperCase();
    });
});

      

        
        
        
      

    

To disable this behavior:

Code for:

PostTitle.Attributes["data-capitalize-disabled"] = "true";

      

        
        
        
      

    

ASP:

<asp:TextBox ... data-capitalize-disabled="true" />

      

        
        
        
      

    

If you can manage this in an ASP file, you have now completely separated the front and back end code!

User interaction management

This is an 800 pound gorilla for forefoot development. I like to use a "widget template" here where you write a JavaScript class to capture the behavior and use HTML attributes and class names as hooks for JavaScript to do this.

<strong> Scripts /FooWidget.js

function FooWidget(element) {
    this.$element = $(element);
    this.fillOptions = this.fillOptions.bind(this);
    this.$element.on("click", "[data-action=fillOptions]", this.fillOptions);
}

FooWidget.prototype = {
    constructor: FooWidget,

    fillOptions: function(event) {
        // make ajax request:

        var select = this.$element.find("select:first")[0],
            option = null;

        option = document.createElement("option");
        option.value = "...";
        option.text = "...";
        select.appendChild(option);

        ...
    },

    focus: function() {
        this.$element.find(":input:first").focus();
    }
};

      

        
        
        
      

    

And in your ASP file:

<asp:Panel ID="FooPanel" runat="server">
    <button type="button" data-action="fillOptions">Fill Options</button>
    <asp:DropDownList ID="OptionsDropdown" runat="server" />
</asp:Panel>

<script type="text/javascript">
    var foo = new FooWidget("<%# FooPanel.ClientId %>");
</script>

      

        
        
        
      

    

Again, this is where you want to keep JavaScript and HTML together, not put JavaScript in C #.