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

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()) — user3559349
– user3559349, Commented Jul 4, 2016 at 5:36
@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? — Majid Hojati
– Majid Hojati, Commented Jul 4, 2016 at 5:38
@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 — Majid Hojati
– Majid Hojati, Commented Jul 4, 2016 at 5:52
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 — user3559349
– user3559349, Commented Jul 4, 2016 at 6:00

Shashank Sood · Accepted Answer · 2016-07-04 06:11:31Z

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
}

edited Jul 4, 2016 at 6:11

answered Jul 4, 2016 at 6:01

Shashank Sood

4905 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Majid Hojati Over a year ago

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 Over a year ago

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 Over a year ago

thanks my fiend, I get a 'expected identifier' on this line->'error: function (error)' what is its reason?

Sandip Jaiswal · Accepted Answer · 2016-07-04 06:07:29Z

1

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

}

answered Jul 4, 2016 at 6:07

Sandip Jaiswal

3,7702 gold badges15 silver badges15 bronze badges

Comments

Shree · Accepted Answer · 2016-07-04 07:13:58Z

0

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
}

answered Jul 4, 2016 at 7:13

Shree

1654 silver badges16 bronze badges

Collectives™ on Stack Overflow

Pass an object to MVC View using json and Ajax

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related