Home Return Partial View on Same Page No jQuery
Reply: 0

Return Partial View on Same Page No jQuery

George Daniel
1#
George Daniel Published in 2018-02-08 15:20:32Z

I am trying to render a partial view in .NET MVC 5 using razor after the controller has already loaded the view (Via a button click). Currently, I am using the @Ajax.ActionLink() method but that results in a new page being opened.

I then implemented a GET function in vanilla javascript as follows:

var ajax = {};
        ajax.x = function () {
            if (typeof XMLHttpRequest !== 'undefined') {
                return new XMLHttpRequest();
            }
            var versions = [
                "MSXML2.XmlHttp.6.0",
                "MSXML2.XmlHttp.5.0",
                "MSXML2.XmlHttp.4.0",
                "MSXML2.XmlHttp.3.0",
                "MSXML2.XmlHttp.2.0",
                "Microsoft.XmlHttp"
            ];

            var xhr;
            for (var i = 0; i < versions.length; i++) {
                try {
                    xhr = new ActiveXObject(versions[i]);
                    break;
                } catch (e) {
                }
            }
            return xhr;
        };

        ajax.send = function (url, callback, method, data, async) {
            if (async === undefined) {
                async = true;
            }
            var x = ajax.x();
            x.open(method, url, async);
            x.onreadystatechange = function () {
                if (x.readyState == 4) {
                    callback(x.responseText)
                }
            };
            if (method == 'POST') {
                x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            }
            x.send(data)
        };

        ajax.get = function (url, data, callback, async) {
            var query = [];
            for (var key in data) {
                query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
            }
            ajax.send(url + (query.length ? '?' + query.join('&') : ''), callback, 'GET', null, async)
        };

        ajax.post = function (url, data, callback, async) {
            var query = [];
            for (var key in data) {
                query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
            }
            ajax.send(url, callback, 'POST', query.join('&'), async)
        };

However, I am not sure how to properly utilize this function. Here is my code to call it:

ajax.get('/Create/GetAuthorBookList', null, function () { });

But, how do I get the data and bind it into an html element?

EDIT: Sorry for the confusion. "No jQuery" means I would not like to use jQuery. Thanks all.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.302735 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO