CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4
user2915962
user2915962

Reputation: 2711

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

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.

Upvotes: 0

Views: 2291

Answers (1)

Katstevens
Katstevens

Reputation: 1571

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.

Upvotes: 1

Related Questions