Tag Archive: jquery


Download a complete solution for this article here

Using ASP.NET MVC 3 and jquery, we can easily and automatically validate and format data such as phone numbers and social security numbers into user friendly formats like (xxx) xxx-xxxx or xxx-xx-xxxx, not only when data is presented to the user, but also while the user is typing in data! We can also block the user from even entering non-numeric characters if we wish. We can parse that data after a form submit and strip out the parentheses and dashes before it reaches the controller action. We can also easily control the appearance of the input textboxes of all the fields in all the forms in one easily modified location. What’s nice about the approach presented here is that the developer only needs to designate a model field as a social security or phone number in one location (the view model) and the system handles all the html, jquery, and data cleanup automagically. This is done without using the class html attribute on any of the input controls, which frees the developer to use css classes as normal. Furthermore, this approach is compatible with Microsoft’s jquery unobtrusive client-side validation, so you can present the user with friendly highlighting and popups before invalid data is even sent to the server.  Put together, these techniques create a crisp, fluid experience for the users and a fast, easy development environment for the developers.

View full article »

Confirmation dialog with multiple submit buttons

This article shows you how to easily protect against CSRF attacks using MVC.NET’s ValidateAntiForgeryToken and prompt a user with a confirmation popup using jquery UI when submitting a form to multiple controller actions. Code examples are included for jquery.UI version 1.8.9 with the redmond theme and ASP.NET MVC 3 in a form with two secure submit input buttons to get a neat confirmation dialog:

View full article »

Automagically add jquery datepicker using Editor Templates

You can automagically format dates and add a jquery datepicker to the input box for all DateTime (and nullable DateTime) properties for your view. You just need to add a DateTime.ascx partial view to your Views/Shared/EditorTemplates folder and use the standard Html.EditorFor helper for date properties in your views. Here’s the details:

View full article »

JQuery’s ajax function is automatically caching data

FYI: If you are using jquery’s ajax function , be aware that it is automatically caching the data. Normally this is a good thing, but if you want to do a get, then modify the database, and then get the data again, the ajax method won’t try to hit your controller action and will go straight to the success callback function returning the cached value. This will make it appear to the user that the update hasn’t occurred. To turn off caching in your ajax function call, simply add the “cache: false” setting. (normally you want to leave this to “true”, so use it only where necessary)

Example:

How to send a business object from a jquery ajax call to an MVC.NET controller action

If you need to send more than one value to a controller action from an ajax call, you can wrap those values together into a business object and send that to the controller action. Jquery automagically maps your javascript object to your controller action’s business object. If you’ve sent a fill-grid object from a jqgrid call, you may notice that the syntax is very similar. Here’s how:

In your ajax call be sure your type is Get, your url is set to your dynamically generated MVC controller action, and in your “data” property call a BuildGridObject javascript function, like this:

function LoadSender() {
  $.ajax({
    url: '',
    success: function(data) {
      // fill the ddl with the data from the json call
      var ddl = $('#ddlTransferTo');
      optionArray = [];
      $.each(data, function(i, option) {
        optionArray[i] = "<option value="&quot; + option.Value + &quot;">" + option.Disp + "</option>";
      });
      ddl.children().remove();
      ddl.append(optionArray.join(''));
    },
    data: BuildGridObject (),
    type: "GET",
    dataType: 'json'
  });
}

In your BuildGridObject function, create a new object and assign the values to the properties you want to send to the controller action. In this example, selected values are pulled from a drop down list. Note: your javascript object won’t have intellisense for the properties of your business object, so you’ll have to copy/paste them manually into the javascript object. Like this:

function BuildGridObject (){
    var objToSend = new Object();
    objToSend.TransferFrom = $('#ddlTransferFrom').val();
    objToSend.TransferTo = $('#ddlRegion').val();
    return objToSend;
}

Create your business object in the usual place, like this:

namespace Models
{
    public class Transfer
    {
        public long TransferTo{ get; set; }
        public long TransferFrom { get; set; }
    }
}

Finally, make sure your controller action accepts the business object in its parameter, like this:

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetList(Transfer transfer)
{
    try
    {
        returnJson(myBLL.GetScreenerList(transfer.TransferTo, transferTo.TransferFrom));
    }
    catch (Exception ex)
    {
        return HandleError(ex, null);
    }
}
© 2017 Robert Corvus