How to redirect to a controller from JS code written on another view and pass JSON object along with it

Question

I am using ASP.NET MVC 3 and I am a newbie at it. I have an EXTJS Grid on one view and after making selections the user is redirected to another grid where the selected values are populated. This grid is placed on another page. On the parent grid, I have used this:

$(function () {
    $("#btnRedirect").click(function () {
        GetSelectedRecord(); //Gets the selected record on the jsonlst variable


        var link = '@Url.Action("GetData","ChildGrid",new {jsonData="-1"})';

        link = link.replace("-1", jsonlst);
        window.location.href = link;
    });
});

where jsonlst is the json object which containes the selected records from the grid.

The GetData action simply has:-

public ActionResult Get(string jsonData)
    {

        lst = new JavaScriptSerializer().Deserialize<IList<ParentGrid>>(jsonData);

        return RedirectToAction("Index", new { strJson = jsonData });
    }

But the problem with this is that my URL contains the entire json string as query string which does not look good. Are there any other ways to achieve this?

Answer 1

You should use POST instead of GET when sending data to your "getdata" action if you don't want to show json in URL. Simplest way I can think of is to create a form with a hidden field and then submit it. so somewhere you create a form

<form id="something" href='@Url.Action("GetData","ChildGrid")' method="POST">
     <input type="hidden" name="jsonData" id="jsonData" />
</form>

then in btnredirect you do this:

$("#jsonData").value(jsonLst);
$("#something").submit();

You have to make sure that in the controller, the action is accessible using POST method.

Also why are you mixing jquery and EXTjs ? If you are developing most of the UI with EXTJs then it would be better to use ExtJS instead of jquery for events and DOM manipulation.