Url.Action Passing string array from View to Controller in MVC#

Question

I have a method that returns an array (string[]) and I'm trying to pass this array of strings into an Action.Currently I can't pass my parameters. I am new in MVC3. Pls let me know why I can't pass parameter to ActionResult..I already define ActionResult with Same parameter name.. thanks all in advance....

$('#export-button').click(function () {

            var columnLength = $("#grid")[0].p.colNames.length;
            var columnNames = "";
            for (var i = 0; i < columnLength; i++) {
                if ($("#grid")[0].p.colModel[i].hidden == false) {
                    columnNames = columnNames + $("#grid")[0].p.colModel[i].name + ',';
                }
            }
            var Val1 = jQuery(txt_search1).val();
            alert(Val1); alert(columnNames);
            document.location = '@Url.Action("OrgDataExport","Search", new { Val1 = Val1 , columnNames = columnNames})';


        });

Answer 1

Try this,

$('#export-button').click(function () {

    var columnLength = $("#grid")[0].p.colNames.length;

    // columnNames is an object now
    var columnNames = {};

    for (var i = 0; i < columnLength; i++) {
        if ($("#grid")[0].p.colModel[i].hidden == false) {
            columnNames[i] = $("#grid")[0].p.colModel[i].name;
        }
    }

    var Val1 = jQuery(txt_search1).val();

    document.location = "Home/Index/" + $.param({ Val1 = Val1 , columnNames = columnNames });
});

Your action that takes columnNames as a string array

public ActionResult Index(string val1, string[] columnNames)
{
// Your code
}

UPDATE:

If the URL becomes too big you can submit the values through form using POST method. If your view already have a form use that else create a dynamic one on the fly and submit the values through POST.

$('#export-button').click(function () {

    var Val1 = jQuery(txt_search1).val();    

    $("#hidden-form").remove();

    // create a form dynamically
    var form = $('<form>')
            .attr({ id: "hidden-form",
              action: "/Home/Index",
              method: "post",
              style: "display: none;"
            })
            .appendTo("body");            

    // add the "Val1" as hidden field to the form.
    $('<input>').attr({ name: "Val1 ", value: Val1, type: "hidden" }).appendTo(form);

    var columnLength = $("#grid")[0].p.colNames.length;

    // add the "columnNames" as hidden fields to the form
    for (var i = 0; i < columnLength; i++) {
        if ($("#grid")[0].p.colModel[i].hidden == false) {
            var t = $("#grid")[0].p.colModel[i].name;
            $('<input>').attr({ name: "columnNames", value: t, type: "hidden"
             }).appendTo(form);
        }
    };

    // submit the form
    form.submit();
});

Answer 2

 for (var i = 0; i < columnLength; i++) {
                if ($("#grid")[0].p.colModel[i].hidden == false) {
                    columnNames = columnNames + $("#grid")[0].p.colModel[i].name + ',';
                }
            }
            var Val1 = jQuery(txt_search1).val();
            alert(Val1); alert(columnNames);
            document.location = '@Url.Action("OrgDataExport","Search", new { Val1 = Val1 , columnNames = columnNames})';

Hi Louis,

Your are trying to access javascript varaibles Val1 and columnNames from the server side tag and it is not possible. For more details, please refer this URL.

You can do it by following way.

    var jsonData = { val1 : Val1, columnNames : columnNames };

$.ajax({
          type: "GET", //GET or POST or PUT or DELETE verb
                url: "Home/Index", // Location of the service
                data: jsonData,
                contentType: "application/json; charset=utf-8", // content type sent to server
                processdata: true, //True or False
                success: function () {
                  alert("success")
                }
       });

On your controller side you have to write like

public ActionResult Index(string val1, string columnNames)
{
// Your code
}

Answer 3

You tagged JQuery-Ajax but i don't see any ajax attempt in the code example? So i am guessing you want to know an Ajax orientated solution. You're probably not using Zend Framework, but i hope this answers helps point you in the right direction to a solution.

From JS/Zend framework experience you could look at something like

$('#export-button').click(function () {
   ....
   var actionUrl= "/controller/action/";
   $.ajax({
      url: actionUrl,
      data: {
        variable1: "OrgDataExport",
        variable2: "Search",
        Val1: Val1,
        columnNames: columnNames            
      },
      dataType: "json",
      success: function(json) {
        //do stuff
      }
   });
   ....
});

In the ZendFramework controller you can then grab the variables on the request:

$Val1 = $this->_request->getparam("Val1");