Home/ Questions/Q 6811843
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T20:22:39+00:00

I have this action method: [HttpPost] public ActionResult GetNextImage(int m_id) { … return Json(new{…});

  • 0

I have this action method:

[HttpPost]
public ActionResult GetNextImage(int m_id)
{
     ...
     return Json(new{...});
}

I invoke it like this:

$(function () {
        $('#nextImage').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: "m_id=" + $('#img').attr('alt'),
                success: function (result) {
                    $('#img').attr("src", result.imagePath);
                    $('#img').attr("alt", result.ImageId);
                }
            });
            return false;
        });
    });

I have Image object

public class Image
{
    public int ImageId {get;set;}
    public string imagePath {get;set;}
    public List<Comment> Comments {get;set;}
}

Now. Is it possible to return from action method my “Image” object and bind it?
I don’t know how to load list of comments with JSon. Thats why I want to return object and with simple loop to display all comments. But I don’t know how to return object from action method and bind it to (razor) page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To answer you question simply, yes you can bind your image object and return the object. Please see code below. I simplified my example slightly but I think it provides a sufficient example that you can review and modify for your own purposes. For instance instead of using a form like your original question, I am just using a button and binding the click event to call the ImageController’s GetImage method.

    View

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<Sandbox.Models.Image>" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Image Test</title>

<script type = "text/javascript" src="../../Scripts/jquery-1.5.1.min.js"></script>
<script type = "text/javascript">
    $(document).ready(function () {
        $('#nextImage').click(function () {
            $.ajax({
                url: "Image/GetImage",
                type: "post",
                data: "m_id=" + $('#img').attr('alt'),
                success: function (image) {
                    $('#img').attr("src", image.ImagePath);
                    $('#img').attr("alt", image.ImageId);

                    //here is where we loop over the list of comments
                    //associated with the Image JSON object that is returned
                    //from the controller.  here 'val' is the Comment model
                    //and .Data simply calls the string member containing the
                    //actual comment
                    $.each(image.Comments, function (index, val) {
                        $('#comments').append("<div>" + val.Data + "</div>");
                    });
                }
            });
        });
    }); 
</script>
</head>
<body>
    <img alt="1" id="img" src=""/>
    <button id="nextImage">Next</button>
    <div id="comments"></div>
</body>
</html>

    Controller

     public class ImageController : Controller
 {
    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult GetImage(int m_id)
    {
        Image image = new Image {
            ImageId = m_id, 
            ImagePath = "Content/mandrill.png", 
            Comments = new List<Comment>
                             {
                                 new Comment {Data = "I love it"},
                                 new Comment {Data = "I love it also!"}
                             }};

        return Json(image);
    }

}

    Models

    public class Image
{
    public int ImageId { get; set; }
    public string ImagePath { get; set; }
    public List<Comment> Comments { get; set; }
}

public class Comment
{
    public string Data { get; set; }
}

    Hope this helps

    • 0