Pass an object to MVC View using json and Ajax

Question

Hi I want to pass an object to my view and work with it in JavaScript. I've created this model

 namespace WebApplication1.Models
{
 public class OpenlayerLayer
 {
 public OpenlayerLayer(string Layers,string name,string url,string style,Boolean isqueryable,string projection,string maxEx)
 {
 LAYERS = Layers;
 Name = name;
 URL = url;
 STYLES = style;
 queryable = isqueryable;
 this.projection = projection;
 maxExtent = maxEx;
 }
 public string LAYERS { get; set; }
 public string Name { get; set; }
 public string URL { get; set; }
 public string STYLES { get; set; }
 public Boolean queryable { get; set; }
 public string projection { get; set; }
 public string maxExtent { get; set; }
 }
}

and I used this method in controller

 public string getLayerlist()
 {
 OpenlayerLayer ol = new OpenlayerLayer("Test: GParcel", "Parcels", "http://127.0.0.1:8080/geoserver/test/wms", "", true, "EPSG:900913", "5725524.327803587, 3835467.5859751734, 5729564.058979791, 3841404.792330884");
 var json = JsonConvert.SerializeObject(ol);
 return json;
 }

well, I used this in my view

 $(selector).getJSON('getLayerlist', data, loadopenlayers(data, status))

this is 'loadopenlayers' method

function loadopenlayers(result,status) {
 alert("Seems works fine");
 var layer = JSON && JSON.parse(result) || $.parseJSON(result);
 var wms2 = new OpenLayers.Layer.WMS(
 layer.name, layer.URL,
 {
 LAYERS: layer.LAYERS,
 STYLES: layer.STYLES,
 format: format,
 },
 {
 buffer: 0,
 displayOutsideMaxExtent: true,
 isBaseLayer: true,
 projection: new OpenLayers.Projection(layer.projection),
 minResolution: null,
 maxResolution: 48,
 numZoomLevels: 32,
 maxScale: null,
 minScale: 1271428,
 maxExtent: new OpenLayers.Bounds(layer.maxExtent),
 minExtent: null,
 displayProjection: new OpenLayers.Projection("EPSG:4326"),
 }
 );
}

so It must work and then call loadopenlayers in JavaScript code,right? Now I have a problem how do I work with result of getLayerlist in loadopenlayers

Is my method right way to communicate between models and JavaScript in view? In fact I have a large number of JavaScript codes which must be customized using model parameters and I want a consistence and standard method to do it Thanks very much

• user3559349: You method should be public JsonResult getLayerlist() and it should be return Json(return ol, JsonRequestBehavior.AllowGet); if your wanting to return json. But its unclear why you would be using Ajax.ActionLink() in this case. Just use the jQuery ajax methods - e.g. $.getJSON())
• Majid Hojati: @StephenMuecke thanks my friend,In fact I am looking for a good method to do that..Is jQueryAjax is better?Can you give me an example?
• user3559349: Show your loadopenlayers() function
• Majid Hojati: @StephenMuecke thanks,I added that method to question,In fact I get laye.name and other parameters from json and crate a new layer in javascript..later I should add new layer to map
• user3559349: You have now deleted the Ajax.ActionLink() in your question so not sure what your actually doing. If you just create the link using <a href="#" id="getlayers">Get layers</a> and use $('#getlayers').getJSON('getLayerlist', data, loadopenlayers(data, status)) and change the method as per my first comments, it will work fine (but not sure what your data parameter is - the method does not accept any parameters). Then in the loadopenlayers() function, you do not need to parse the result - its already json

Answer 1

Better use jquery ajax call e.g:

 $.ajax({
 type: "POST",
 url: '/ControllerName/getLayerlist',
 // data: data,send data to controller from here
 dataType: 'json',
 //processData: false,
 success: function (msg) {
 //your json data will be available in msg
 //here you can also call loadopenplayers() method
 },error: function (error) {
 console.log(error.responseText);
 }
 });

Whereas your controller method will look like

[HttpPost]
public JsonResult getLayerlist(string data)
{
 OpenlayerLayer ol = new OpenlayerLayer("Test: GParcel", "Parcels", "http://127.0.0.1:8080/geoserver/test/wms", "", true, "EPSG:900913", "5725524.327803587, 3835467.5859751734, 5729564.058979791, 3841404.792330884");
 return Json(ol , JsonRequestBehavior.AllowGet);//automatically converts to Json
}

• Majid Hojati: Thanks very much..But can you give me an example how do I work with result in 'loadopenplayers()' ,Is my code in question is correct?
• Shashank Sood: your msg will have your OpenlayerLayer Objects. so you can pass msg to you loadopenplayers() method. You can use it like msg.LAYERS, msg.url and so on..
• Majid Hojati: thanks my fiend, I get a 'expected identifier' on this line->'error: function (error)' what is its reason?

Answer 2

function loadopenlayers(result){
 var newResult = JSON.stringify(result);
 //Now newResult is a json
}

Answer 3

You can call through ajax

 $.ajax({
 url: '/ControllerName/getLayerlist',
 type: "POST",
 cache:false, 
 success: function (data) {
 //You can get your result data here
 console.log("Data :"+JSON.stringify(data));
 loadopenlayers(data);
 },error: function (error) {
 console.log(error.responseText);
 }
});
function loadopenlayers(data){
 var newResult = JSON.stringify(data);//This is your JSON result
}