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

Answer 1

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
}

Answer 2

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
}

Answer 3

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

}