Scenario

I have a form which submits via ajax and returns data inside a div on the page.

This works perfectly well. However, one of the requirements was to add an export functionality to the form so the client can export the data to a csv and open it in Excel.

Problem

No big deal right? I’ve written data export code before see my post on exporting data to excel. Well actually there was a slight problem because it was an ajax form it meant the contents of the csv was being loaded into the div inside the form.

Solution

I needed a solution. I realised that I needed to change the mode of the form depending on which button was pressed. So I came up with this bit of javascript/jquery.

//Ajax switching by Paul Seal at MEDIAmaker
//Licensed under MIT. Free for all uses including commercial
var ajaxSwitching = {
    clickCount: 0,
    submitWithAjax: function (e, control, ajaxOn) {
        if (ajaxSwitching.clickCount == 0) {
            e.preventDefault();
            ajaxSwitching.clickCount++;
            var form = $(control).closest('form');
            $(form).attr("data-ajax", ajaxOn);
            $(control).unbind('click').click();
        }
        else {
            ajaxSwitching.clickCount = 0;
        }
    }
};
$(document).on('click', '.use-ajax', function (e) {
    ajaxSwitching.submitWithAjax(e, this, true);
});
$(document).on('click', '.no-ajax', function (e) {
    ajaxSwitching.submitWithAjax(e, this, false);
});

To use this, link to the script in your page and then you just add the class to the button or link on the page which submits the form.

Like this:

<button class="use-ajax" name="submit">Submit</button>
<button class="no-ajax" name="export">Export</button>

Want to thank me?

If I've helped you out and you want to thank me, why not buy me a coffee?

About the author

Paul Seal

Umbraco MVP and .NET Web Developer from Derby (UK) who specialises in building Content Management System (CMS) websites using MVC with Umbraco as a framework. Paul is passionate about web development and programming as a whole. Apart from when he's with his wife and son, if he's not writing code, he's thinking about it or listening to a podcast about it.

Related Posts

How to include scripts from partial views in MVC and Umbraco

This post will show you how you can include scripts from inside an MVC partial view rather than havi…

Read Post

How to use Donut Caching in Umbraco and MVC

In this post I show you how easy Donut Caching is to use in Umbraco and MVC. It's very clever and no…

Read Post

How to solve Multiple types were found that match the controller named x

This post shows you how to solve the error 'Multiple types were found that match the controller name…

Read Post

How to get the swagger JSON file from a Web API

If you need to know the url to get the swagger json file, then this is the post for you.

Read Post