ASP.NET MVC $.Post Call Returning String...Need Help with Format for Jqgrid

ASP.NET MVC $.post call returning string...need help with format for jqGrid

If you try to solve the problem for jqGrid only you can choose another way.

You can use dataUrl and buildSelect properties of editoptions or searchoptions instead of value property. This features are introduced specially for the usage in AJAX. The dataUrl defines url provided results in the form like

<select><option value="1">One</option> <option value="2">Two</option></select>

If for you is easer to return JSON results from the server your custom function buildSelect will help. As the parameter it receive the data send from the server and it should return the string <select><option>...</option></select>. In the way you will achieve better results.

If you do decide to stay at your old way you should at least fix your code to following

foreach (var q in query)
{
     if (sb.Length != 0)
         sb.Append(';');
     sb.Append(q.Destination); // instead of sb.Append("ID");
     sb.Append(':');
     sb.Append(q.Destination);
}

to has "FedEx:FedEx;InTime:InTime;TNT:TNT" instead of "ID:FedEx; ID:InTime; ID:TNT; ".

UPDATED: You asked for a small example. Let us you can for example get all different values of the destinations strings as a List<string> and the name of this Method is GetAllDestinations. Then your action used by dataUrl can look like

public JsonResult GetDestinationList() {
    List<string> allDestinations = GetAllDestinations();
    Json(allDestinations, JsonRequestBehavior.AllowGet);
}

To use this action inside of editoptions or searchoptions of jqGrid you can define about following

{ name: 'destinations', ditable: true, edittype:'select',
  editoptions: { dataUrl:'<%= Url.Action("GetDestinationList","Home") %>',
                 buildSelect: function(data) {
                     var response = jQuery.parseJSON(data.responseText);
                     var s = '<select>';
                     if (response && response.length) {
                         for (var i = 0, l=response.length; i<l ; i++) {
                             var ri = response[i];
                             s += '<option value="'+ri+'">'+ri+'</option>';
                         }
                     }
                     return s + "</select>";
                 }
                }
}

If you don't want have actions which be used per HTTP GET you can use Json(allDestinations); instead of Json(allDestinations, JsonRequestBehavior.AllowGet); in the GetDestinationList action, but add to the list of jqGrid options an additional option

ajaxSelectOptions: { type: "POST" }

UPDATED 2: The answer is already old. In the interim the code of jqGrid where buildSelect will be called was changed. Now the buildSelect will be used inside of success handler of jQuery.ajax (see here) instead of the complete handler before (see the post and the post for example). So in the current version of jqGrid the line

var response = jQuery.parseJSON(data.responseText);

is not needed. The data is typically the parsed JSON data and so the lines

                 buildSelect: function(data) {
                     var response = jQuery.parseJSON(data.responseText);

in the code above can be replaced to

                 buildSelect: function(response) {

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

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.

JQGrid DataUrl usage with ASP.net (MVC 2.0)

jqGrid wait for HTML code fragment (a valid HTML <select> element with the desired <options>: <select><option value='1'>One</option>…</select>) as the data returned from the dataUrl: "/MyEntity/GetMyEntitys". Because you return the data in JSON format you have to convert the data returned from the server with respect of the editoptions buildSelect. You can see the corresponding code example in my old answer.

One more small remark. Look at the jqGrid documentation and verify which parameters which you use are default. For example multiselect: false is default parameter. If you remove the default parameters from the grid definition the code wil be easier to read and it will work a litle bit quickly. In more complex parameters like jsonReader you could include only the properties which you want to change. For example you can use jsonReader in the form jsonReader : { repeatitems: true} because repeatitems is the only property of jsonReader which you want to change from the default settings. In the same way you can reduce { view: true, del: true, add: true, edit: true } to { view: true }.

Implementing jQuery's jgGrid with ASP.Net and JSON formatting

Found your post while I was trying to do this for my project. I got it working. For anyone who needs it in the future, jqGrid won't work out of the box with JSON and ASP.NET. You need to make a couple of small modifications to grid.base.js. Around line 829, replace the json case section with the following:

case "json":
    gdata = JSON.stringify(gdata); //ASP.NET expects JSON as a string
    $.ajax({ url: ts.p.url, 
             type: ts.p.mtype, 
             dataType: "json", 
             contentType: "application/json; charset=utf-8", //required by ASP.NET
             data: gdata, 
             complete: function(JSON, st) { if (st == "success") { addJSONData(cleanUp(JSON.responseText), ts.grid.bDiv); if (loadComplete) { loadComplete(); } } }, 
             error: function(xhr, st, err) { if (loadError) { loadError(xhr, st, err); } endReq(); }, 
             beforeSend: function(xhr) { if (loadBeforeSend) { loadBeforeSend(xhr); } } });
    if (ts.p.loadonce || ts.p.treeGrid) { ts.p.datatype = "local"; }
    break;

Then add the following function:

function cleanUp(responseText) {
    var myObject = JSON.parse(responseText);  //more secure than eval
    return myObject.d;  //ASP.NET special
}

You will also need to include the JSON parser and stringifier. Along with working with ASP.NET, this revised code is also more secure because the eval statement is gone.

EDIT: I should have also noted that you might have to make similar edits to grid.celledit.js, grid.formedit.js, grid.inlinedit.js, and grid.subgrid.js.

after beforeSubmit method in jqgrid which method i need to call for submit

I suppose that your beforeSubmit callback don't returns correct results. The callback allows to skip submitting by returning [false, "error description"]. If beforeSubmit don't detect any problem and want to process submitting it should return [true]. So you should just add

return [true];

at the end of your beforeSubmit callback.

---

Related Topics