How to pass a ObservableArray to MVC controller ? Without Ajax

Question

0.00/5 (No votes)

See more:

Hi friends

I am having an observable array with a list of view model data which i need to pass to Normal controller which is having a return type of ActionResult

C#

public ActionResult Index(list<qualities> data)
           {
             return excelCon.DownloadTMExcel(data); //here i get actionResult as ReturnType
           }

Java script code as fallows:

JavaScript

var URL = "/DownloadExcel/Index?data="+self.qualities(); //self.qualities holds my entire list which hits break point in controller but i get Zero list .
        window.open(URL, "_blank");

Actually the excat scenario is when everything works fine i get excelsheet downloded with new window open .

I need advice in how to pass observableArray like the way i am dealing .

I tired something like :

JavaScript

var URL = "/DownloadExcel/Index?data="+ko.toJson(self.qualities()); //this dont to controller itself

I tried using Ajax call still it works one way i.e i can pass ObservableArray but ActionResult return Type it can't handle . always it goes to error function of ajax call and i wont get my excel downloaded .

The only case worked for me : There is other scenario i just need to pass parameters to controller then i am able to open a new window and download relevant excel .

JavaScript

var URL = "/DownloadExcel/Index?typeId="+2;
           window.open(URL, "_blank"); //on open of new window i get excel downloaded

EDIT :
My view :

JavaScript

<a data-bind="click:data.submit">download</a>

My view model Js:

JavaScript

self.submit = function()
{
var URL = "/DownloadExcel/Index?data="+self.qualities(); 
            window.open(URL, _blank); 
}

As mentioned above after click i get into submit function inside submit i have to do whatever i do to pass my observableArray to controller .

Any help is dearly appreciated .

Posted 5-Aug-14 3:07am

sunil gutta

Updated 5-Aug-14 8:29am

v2

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

User 10132546 · Accepted Answer · 2014-08-05T06:32:00

There's probably a nicer way of doing it than this, but this is what I've put together in about 5 minutes. In this example, I'm posting in a list of Person objects.

C#

public class Person
{
    public string Title { get; set; }

    public string Forename { get; set; }

    public string Surname { get; set; }
}

The controller class is as follows:

C#

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(string people)
    {
        var serializer = new Newtonsoft.Json.JsonSerializer();
        var data = serializer.Deserialize<list><person>>(
            new JsonTextReader(
                new TextBufferReader(
                    new SeekableTextReader(people))));

        return View();
    }
}</person></list>

And finally the HTML and JavaScript:

XML

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
</head>
<body>
    <div>
        <form action="/Home/Index" method="POST">
            <input id="people" name="people" type="text"/>
            <button type="button" data-bind="click: submit">Submit</button>
        </form>
    </div>
    <script src="/Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
    <script src="/Scripts/knockout-3.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        var Person = function(title, forename, surname) {
            this.title = ko.observable(title);
            this.forename = ko.observable(forename);
            this.surname = ko.observable(surname);
        }

        this.people = ko.observableArray();
        this.people.push(new Person("Mr", "Bob", "Marley"));
        this.people.push(new Person("Mrs", "Grace", "Jones"));
        this.people.push(new Person("Mr", "Mick", "Jagger"));

        function submit() {
            $("#people").val(JSON.stringify(ko.toJS(this.people())));
            $("form").submit();
        }

        ko.applyBindings(this);
    </script>
</body>
</html>