Using Ajax to render partial view, taking an object as parameter

Question

First of, I got some help from nice people yesterday helping me decide on what approach to take: http://stackoverflow.com/questions/24832038/pass-newly-created-object-to-partial-view/24834225#24834225

Summary: I got some Ajax calling a method that creates an object. I would like to use the Ajax success-message to replace the content in a div with my new object. This is the Ajax:

$("#btnSaves").click(function () {

        var image = document.getElementById("canvas").toDataURL("image/png");
        image = image.replace('data:image/png;base64,', '');

        $.ajax({
            type: 'POST',
            url: "../../Home/UploadImageS", //THIS METHOD CREATES AN OBJECT
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (?) {
                HERE I NEED CODE THAT RENDERS A PARTIAL VIEW PASSING THE OBJECT AS A PARAMETER.
            }
        });
    });

This is the controller, I'm not sure what its return value should be:

public ActionResult UploadImageS(string imageData)
        {
            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);
                    bw.Write(data);
                    bw.Close();
                }
            }

            string link = UploadImage(fileNameWitPath);

            JObject o = JObject.Parse(link);

            string name = (string)o.SelectToken("data.link");

            var db = new ArtContext();

            var nyArt = new ArtWork()
            {
                ArtLink = name,

            };

            db.ArtWorks.Add(nyArt);
            db.SaveChanges();
            Return ??
        }
    }

I'm not that comfortable working with Ajax so I would also appreciate some explanation if possible.

This is what my method returns:

return  View("TestView",nyArt);

The testview, created without layout:

@model Heroz.Models.ArtWork

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TestView</title>
</head>
<body>
    <div>
        <img src="@Model.ArtLink"/> 
    </div>
</body>
</html>

Now, when I put a brekpoint at:

return  View("TestView",nyArt);

I does not step into the ""TestView", It goes directly to the _Layout.

Could you maybe elaborate on that? Is it the method in my controller that should return Json or should the Ajax return Json? — user2915962
– user2915962, Commented Jul 19, 2014 at 7:43

Katstevens · Accepted Answer · 2014-07-19 08:20:26Z

1

I think what you are seeking is some HTML back from your AJAX call that you can then render inside an existing element. Is that correct?

If so, the easiest way is to construct a view that contains the correct model, and return it from your method. So you would write up a view that contains only the HTML you wish to return (no layout page or anything), then return that as normal with return View();.

Let's say (for example) that you wanted to return some HTML that used the nyImage object you created in your action. You would create a view with the HTML and specify the model you want to use (in this case, the type of nyImage).

EDIT: I have used razor to output the name property of the model, which I believe is the full link to the art on the imagehosting site.

@model ArtWork

@{
    Layout = null;
}

<div>
    <img src="@Model.name" />
</div>

Then you would save this view as whatever you want to call it, let's say TestView. Then in your action method you would return this view, passing in the model:

return View("TestView", nyArt);

This will return a ViewResult that contains the HTML generated by the view/model.

On the client you will return this data as HTML, which you can then append to a page element if you wish to display it:

success: function (ret) {
    //do something with ret here
    $('#myDiv').html(ret);
    HERE I NEED CODE THAT RENDERS A PARTIAL VIEW PASSING THE OBJECT AS A PARAMETER.
}

The above snippet will replace the contents of #myDiv with the HTML returned from teh AJAX call.

edited Jul 19, 2014 at 8:20

answered Jul 19, 2014 at 7:48

Katstevens

1,56913 silver badges29 bronze badges

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

8 Comments

user2915962 Over a year ago

Thank you! This is what im trying to achieve: In my index.cshtml I have a canvas on whch I can draw a picture (like paint). Then, when I press a button, the "Art" gets saved to the database in form of an href to an imagehost-site- This Parts works fine. But what try to do is to pass the newly created "art" to a partial view.

Katstevens Over a year ago

OK the code example will work for you then. In your new view (which I called TestView you would set the src attribute of the image to the link returned from the hosting site - this will then display the image when the returned HTML is rendered. I'll update the example.

user2915962 Over a year ago

Thank you very much! Im sure this is the right way to go about It but when I step through the code, it does not reach the sucess-mehod, everthings works fine until this line in the _layout(where I have the ajax): @RenderSection("scripts", required: false) The it "jumps out". Should I maybe place the Ajax elsewhere?

Katstevens Over a year ago

Are you saying that the error occurs in the _Layout page when your AJAX method runs?

user2915962 Over a year ago

It goes like this: The object gets created and returns this: return View("TestView", nyArt); This works fine and i can step through the "TestView" and see that the href is where it should be. Next the code goes to the _layout but it never reaches the AJAX this time. After this line: @RenderSection("scripts", required: false) The code gets out of the _Layout and im back on my page wth nothing new rendered.

|

Collectives™ on Stack Overflow

Using Ajax to render partial view, taking an object as parameter

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related