将新创建的对象传递给部分视图 [英] Pass newly created object to partial view

问题描述

这是我创建一个新对象并将其保存到DB的方法的一部分：

This is the part of my method where i create a new object and save it to the DB:

 var db = new ArtContext();

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

            };

            db.ArtWorks.Add(nyArt);
            db.SaveChanges();

            PartialView("_CreatedArt", nyArt);

如您所见，我尝试将我的新对象传递给部分视图。我希望能够呈现部分的视图：

As you can see, I try to pass my new object to a partial view. My view where I hope to render the partial:

@Html.Partial("_CreatedArt", Model)

但是，没有任何事情发生（没有视图渲染）。这可能是因为DB需要一些时间才能保存新的对象，或者我可能在做别的事情？

However, nothing happens (no view renders). Is it maybe because it takes some time for the DB to save the new object or am I maybe doing something else wrong?

编辑：

索引视图，我想渲染的部分：

Index view, where i want to render the partial:

@model Heroz.Models.ArtWork
@using Heroz.Models
@{
    ViewBag.Title = "Home Page";
}

    <div class="jumbotron">
        <h1>ASP.NET</h1>
        <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
        <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
    </div>

    <button onclick="drawShapes()"></button>

        <!--Canvas1-->
         <canvas id="canvas" width="400" height="300" style="background-color: slategray;"></canvas>
         <input type="button" id="btnSaves" name="btnSaves" value="Save the canvas to server" />
         <input type="hidden" name="imageData" id="imageData" />

        <!--Canvas2-->
         @Html.Partial("_CreatedArt", Model)

部分视图：

@model Heroz.Models.ArtWork

<div id="canvas" width="400" height="300" style="background-color: grey;">
    <img src="@Model.ArtLink"/>
</div>

我使用的类：

namespace Heroz.Models
{
    public class ArtWork
    {


        public int ID { get; set; }
        public string ArtLink { get; set; }

    }

    public class ArtContext : DbContext
    {
        public DbSet<ArtWork> ArtWorks { get; set; }
    }
}

我短暂的尝试是，dreaw一张图片与画布，上传到数据库（这工作正常），然后asap显示图片在部分。

What om trying to do i short is, dreaw a picture with the canvas, upload it to the DB (this works fine), then asap show the picture in the partial.

编辑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",
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });
    });

完成操作：

static string path = Path.GetTempFileName();

        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();
            System.IO.File.Delete(fileNameWitPath);

            /*RedirectToAction("Index","Home");*/

            PartialView("_CreatedArt", nyArt);

        }

推荐答案

返回部分视图，您可以将html响应替换为元素html，如：

when your return a partial view you can replace html response to an element html like :

$.ajax({
            type: 'POST',
            url: "../../Home/UploadImageS",
            data: '{ "imageData" : "' + image + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                $("#ContainerId").html(msg);
            }
        });

这篇关于将新创建的对象传递给部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！