ASP.NET MVC with jqGrid Form Editing - Controller Action for select options

Question

Well, I'm falling for the jqGrid plugin for jQuery and trying to incorporate it in an ASP.NET MVC application. I have all the basic funcitonality working thanks to various blog posts from around the traps.

What I am trying to workout now is how to return data from the Controller in such a fashion as to populate select options on the edit form.

I know I just need to supply jqGrid with a URL to call to get back the options, but for the life of me I can't think (maybe too little coffee?) of how to render this from the Controller.

eg, the select list values can be hardcoded as "1:one;2:two", do I just need to return a json object in that form? Or a string?

Any help would be greatly appreciated.

Answer 1

I think this post should help you out, if you haven't already seen it

http://shashankshetty.wordpress.com/2009/03/04/using-jsonresult-with-jquery-in-aspnet-mvc/

Answer 2

Oops... the main problem I was having was trying to figure out what return type to put on the controller action. In the end it was so simple I couldn't see the wood for the trees. I ended up with a simple string output from the Controller action:

 public string ObjectList()
 {
    // replace this with the code to construct your list values
    return "1:one;2:two";
 }

So simple it hurts to admit I missed it.

Answer 3

In order to populate dynamicaly a select drop down list just create a variable just above the creation of the jqgrid.

  var countries = $.ajax(
                        {url:'/Specimens/GetAreaStrList/',async: false, 
       success: function(data, result) 
     {
          if (!result) 
          alert('Failure to   retrieve the Countries.');
            }
      }
      ).responseText;

and then you populate the grid

      {name:'AreaID', index:'AreaID', width:150, align:'left', editable:true, 
                      edittype:"select",editoptions:{size: 71} }
              ],
      onSelectRow: function(id)
      {
          if(id && id !== lastsel2)
          {
              jQuery('#list').restoreRow(lastsel2);
              jQuery('#list').editRow(id, true);
              lastsel2 = id;
          }
      },
      loadComplete: function()
      {
         jQuery('#list').setColProp('AreaID', {editoptions: {value: countries}});
      },

And Code in the Controller:

public ActionResult GetAreaStrList() { return Content("171:Russian Federation;86:Another Country"); }

I have been inspired from this blog: http://geekswithblogs.net/renso/archive/2009/07/02/jqgrid-dynamically-loading-select-options.aspx