Sergey Barskiy's Blog

In this blog I am going to describe a pretty common problem that web applications have to deal with along with one way to solve this issue.

Here is the issue at hand.  Say, user pulled up an entry form and made some changes.  Then the above mentioned user clicked browser back button, navigating away from the current page, and thus loosing all the pending changes.  A friendly software application should warn the user, shouldn’t it?

So, how do we detect pending changes?  In typical desktop application, say the one that uses CSLA – http://lhotka.net/cslanet/, you can very easily check existing bound objects and see if there are pending changes.  CSLA, for example, takes a snapshot of business objects, then compare the snapshot to current state of the same object.  What if we could do the same?

To our benefit, there is a very useful function in jQuery, called serialize
http://api.jquery.com/serialize/

So, could we use that to solve the problem?  Let’s try something like

initialFormData = $(‘form’).serialize();

Seems pretty easy.  Now we need to create a JavaScript object that can help us to all the steps

• Create snapshot of the data when it is loaded
• Compare the snapshot to current data
• Intercept navigation in progress and warn the user

I am going to create a brand new script file with my application in it, calling it App.js and define my object in it as following

if (!window.App) {
    window.App = {
        init: function () {
            window.onbeforeunload = this.onBeforeUnloadWindow;
            this.initialFormData = $(‘form’).serialize();
            this.submitting = false;
        },
        onBeforeUnloadWindow: function () {
            return window.App.hasPendingChanges();
        },
        submitting: false,
        initialFormData: "",
        hasPendingChanges: function () {
            if (!window.App.submitting && 
                window.App.initialFormData !== $(‘form’).serialize()) {
                return "You have pending changes. \n\rIf you leave current page, those changes will be lost.";
            }
            return undefined;
        }
    };
}

Very quick and easy.  One small object, neatly organized that will do the work for me.  Now in my MVC application I locate _Layout.cshtml and include my script in the list of scripts.  The last step is to call init method on my App object after form loads, for example in Edit.cshtml:

<script type="text/javascript">
        window.App.init();
</script>

Now, if you try this solution, you will notice that your Save button does something strange.  It pops up the warning message for no reason.  So, we have to do one more thing in our Save button click event:

<input type="submit" onclick="window.App.submitting = true;" 
  value=@ViewBag.Action />

We have to let the App object know that we are navigating away because the user hit Save button.  That was our last step.  One of the guys on our team came up with this idea, and he and I refined it a bit to make the code cleaner.

Please let me know what you think.

Thanks.

I am using jqGrid in my current project, and I already blogged prior on how impressed I am with the functionality available in this control.  I am using it in ASP.NET MVC application, but it can be used in any web app.  One of the key features is that it supports ajax based asynchronous server operations.

Upon my research I stumbled onto this article that greatly simplifies the code required to process search requests in ASP.NET MVS that are generated by the grid

http://www.codeproject.com/KB/aspnet/AspNetMVCandJqGrid.aspx

I had to make a small addition to it though.  The code works great in multi-search scenarios, but if you turn off multisearch option in search options, than you will get an error.  I also remove empty try/catch blocks which I personally find to be a bad practice.  Here is the updated code I used for Filter class:

using System.Runtime.Serialization;
using System.Runtime.Serialization.Json;
using System.Text;
 
[DataContract]
public class Filter
{
    [DataMember]
    public string groupOp { get; set; }
    [DataMember]
    public Rule[] rules { get; set; }
 
    public static Filter Create(
        string jsonData, 
        string searchField, 
        string searchString, 
        string searchOper)
    {
        Filter returnValue = null;
        if (!string.IsNullOrEmpty(jsonData))
        {
            var serializer = new DataContractJsonSerializer(typeof(Filter));
            using (var ms = new System.IO.MemoryStream(Encoding.Default.GetBytes(jsonData)))
            {
                returnValue = serializer.ReadObject(ms) as Filter;
            }
 
        }
        else
        {
            returnValue =
                    new Filter()
                    {
                        groupOp = "AND",
                        rules = new[] { new Rule() 
                        { data = searchString, field = searchField, op = searchOper } }
                    };
        }
        return returnValue;
    }
}

I added else statement that checks the json data variable, which will be null in cases of single field search.  The code will fall into same patch though, which is convenient because you process data code can stay the same whether or not you are using single or multi-search. 

Of course, I had to update the model binder to match:

using System.Web.Mvc;
 
public class GridModelBinder : IModelBinder
{
    public object BindModel(
        ControllerContext controllerContext,
        ModelBindingContext bindingContext)
    {
        var request = controllerContext.HttpContext.Request;
        return new GridSettings
        {
            IsSearch = bool.Parse(request["_search"] ?? "false"),
            PageIndex = int.Parse(request["page"] ?? "1"),
            PageSize = int.Parse(request["rows"] ?? "10"),
            SortColumn = request["sidx"] ?? "",
            SortOrder = request["sord"] ?? "asc",
            Where = Filter.Create(
                request["filters"],
                request["searchField"],
                request["searchString"],
                request["searchOper"])
        };
    }
}

I want to thank Ilya Builuk for sharing his code.  I hope you will find my enhancements useful.  Another side thought.  There is a string based IQueryable extensions library that you can use to construct queries against this interface based on syntax such as “Where SomeColumn =- 2”.  Not that I am a giant fan of leaking my data access code into controllers or anything.  You can read more about dynamic linq on Scott Guthrie’s blog here

http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx

Thanks.