Question

At the moment it is just an intellectual excercise for I do not have time to invest in this, but I am interested if anyone has any experience entirely replacing jQuery with another javascript framework like Dojo Toolkit or Google Closure.

How much of the jQuery is actually baked in to the MVC framework or is it all implemented in an unobtrusive manner so that at least in theory, it all can be replaced…

What would be involved in replacing entire javascript framework?

Answer 1

There is nothing baked up into jQuery, it’s all about the developer, if you want to use it, it will use jQuery, if you want to use ASP.NET Ajax Library it will use that, if you want to use anything else … same answer.

When you have a Model with some validation, the only thing that the .NET Framework does is add data- attributes to the input form, from this you can elaborate your own version to do client validations.

For example:

[Required]
[ValidatePasswordLength]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password { get; set; }

[DataType(DataType.Password)]
[Display(Name = "Confirm password")]
[Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
public string ConfirmPassword { get; set; }

and then

<div class="editor-label">
    @Html.LabelFor(m => m.Password)
</div>
<div class="editor-field">
    @Html.PasswordFor(m => m.Password)
    @Html.ValidationMessageFor(m => m.Password)
</div>

<div class="editor-label">
    @Html.LabelFor(m => m.ConfirmPassword)
</div>
<div class="editor-field">
    @Html.PasswordFor(m => m.ConfirmPassword)
    @Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>

will translate into

<div class="editor-label">
    <label for="Password">Password</label>
</div>
<div class="editor-field">
    <input data-val="true" data-val-length="&amp;#39;Password&amp;#39; must be at least 6 characters long." data-val-length-min="6" data-val-required="The Password field is required." id="Password" name="Password" type="password">
    <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
</div>

<div class="editor-label">
    <label for="ConfirmPassword">Confirm password</label>
</div>
<div class="editor-field">
    <input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password">
    <span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
</div>

From here you can create your own Client Side validation. The code above was taken from the default project and it has no jQuery integration…

If you want jQuery integration, then all you need to do is append those 2 files:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

as well jQuery Library off course, so as you can see, you, has in all .NET Framework, are the one that tells the Framework what to do, not the other way around 😉