C# 更新数据库调用而不必刷新页面

将向用户显示图像（珍品）列表，在此用户将选择一个图像，该图像将存储在

Learner\u treauser

表中：

List<The_Factory_Chante.Models.Treasure> tresh;

using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{

    string imageSource = "";

    tresh = db2.Treasures.ToList();

    foreach (var item in tresh)
    {
        if (item.itemImage != null)
        {
            string imageBase = Convert.ToBase64String(item.itemImage);
            imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
        }

        <img id="@item.treasureID" src="@imageSource" onclick="return MakeSure(@item.treasureID)" />
    }
}

然而，从用户的角度来看，这并不是很令人愉快。更好的方法是在不刷新页面的情况下进行更新

下面是

Webservice

方法，该方法接收所选图像id并将其存储在

Learner\u-Treasure

表中

public void MakeSure(int id)
{
   using (The_FactoryDBContext db = new The_FactoryDBContext())
   {
       Learner_Treasure learnTreasure = new Learner_Treasure();

       learnTreasure.dateCompleted = DateTime.Today;
       learnTreasure.learnerID = UserInfo.ID;
       learnTreasure.treasureID = id;

       db.Learner_Treasure.Add(learnTreasure);
       db.SaveChanges();

   }

要调用的代码Learner\u Treasure表

List<The_Factory_Chante.Models.Learner_Treasure> lern;
using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
{

    string imageSource = "";
    lern = db2.Learner_Treasure.ToList();
    if (lern != null)
    {
        foreach (var item in lern)
        {
            if (item.learnerID == UserInfo.ID)
            {
                byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
                string imageBase = Convert.ToBase64String(bytes);
                imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
                <img id="@item.treasureID" src="@imageSource"/>
            }
        }

List-lern；
使用（The_Factory_Chante.Models.The_FactoryDBContext db2=new The_Factory_Chante.Models.The_FactoryDBContext（））
{
字符串imageSource=“”；
lern=db2.Learner\u Treasure.ToList（）；
如果（lern！=null）
{
foreach（lern中的var项目）
{
if（item.learnerID==UserInfo.ID）
{
byte[]bytes=db2.Treasures.FirstOrDefault（au=>au.treaseId==item.treaseId）.itemImage；
字符串imageBase=Convert.tobase64字符串（字节）；
imageSource=string.Format（“数据：image/gif；base64，{0}”，imageBase）；
}
}

此代码将向用户显示他们选择的所有图像，但是在if I take away

window.location.reload（）；

中，此代码仅在页面重新加载时更新。这意味着用户在选择图像后不会立即看到他们选择的图像

---

我要做的是在不刷新页面的情况下更新调用

Learner\u表的代码。
您的问题是
onclick
事件处理程序：

<img id="@item.treasureID" src="@imageSource" onclick="return MakeSure(@item.treasureID)" />

这将调用数据库并获取用于在视图中输出的
Learner\u Treasure
对象的列表。服务器端代码在每个页面请求中执行一次，这正是发生的情况。如果不向服务器发出请求，它将不会异步更新。

您需要实现一个ajax请求，以将最新的Learner_宝藏列表拉入视图。这再次归结为我给出的第一个旁注，原因是您正在将dbcontext与视图混合，并希望它能够动态更新。如果您实现一个为视图提供数据的层（控制器），您可以异步调用它，并在不重新加载的情况下更新页面

例如，您可以在控制器中编写一个调用，以获取json中的单个LearnerTreasure项

[HttpGet]
public ActionResult GetLearnerTreasureItem(int Id)
{
    using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext()) {
        learnerTreasureItem = db2.Learner_Treasure.FirstOrDefault(x => x.Id == Id);
        return Json(new { image = Convert.ToBase64String(learnerTreasureItem.itemImage), treasureId = learnerTreasureItem.TreasureID }, JsonRequestBehavior.AllowGet);
    }
}

然后在视图中使用ajax调用它，就像在更新中一样

$.ajax({
    cache: false,
    type: "GET",
    url: '/YOURCONTROLLERNAME/GetLearnerTreasureItem?id=1',
    contentType: 'application/json',
    dataType: "json",
    success: function (data) {
        //build image element
        var image = '<img id="' + data.treasureId + '" src="data:image/jpg;base64,' + data.image + '"';

        //add the image to where you need it.
        $(image).appendTo("body");
    },
    error: function (xhr) {
       alert("Error occurred while loading the image.");
    }
});

$.ajax({
cache:false，
键入：“获取”，
url:“/YOURCONTROLLERNAME/GetLearnerItem？id=1”，
contentType:'应用程序/json'，
数据类型：“json”，
成功：功能（数据）{
//构建图像元素
var图像处理
我希望这能有所帮助。
我的方法是对需要刷新的代码进行局部查看

public PartialViewResult UserImages(your paramaters here)
{
   your code here
}

然后在成功$.ajax之后，我刷新它

var id = treshID
                $.ajax({
                    url: "../../WebService.asmx/MakeSure",
                    data: "{ 'id': '" + id + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                         $.ajax({
                              url: "/UserImages",
                              data: your data model here,
                              success(function(html)){
                               $("#yourPartialViewWrapperHere").html(html));
                               }
                         });
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    }

                });

更新珍宝图片列表

<img id="@item.treasureID" src="@imageSource" onclick="return MakeSure(this, @item.treasureID)" />



在MakeSure方法中阅读该参数。我还假设学习者_珍藏ul中列出的名为“ulLearnerTreasure”的图像

function MakeSure(sender,treshID) {
          var id = treshID;
          var imgSrc = $(sender).attr("src");
                $.ajax({
                    url: "../../WebService.asmx/MakeSure",
                    data: "{ 'id': '" + id + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        var li = '<li><img id ="'+ treshID +'"src="'+ imgSrc  +'" /></li>';
                        $("#ulLearnerTreasure").append(li);
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {

                    }

                });

            };

函数确认（发送方，treshID）{
var id=treshID；
var imgSrc=$（发送方）.attr（“src”）；
$.ajax({
url:“../WebService.asmx/MakeSure”，
数据：“{'id'：'”+id+“}”，
数据类型：“json”，
类型：“POST”，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（数据）{
变量li='
'；
$（“#ullenertreasure”）。附加（li）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
}
});
};
还有另一种解决此问题的方法，您可以使用该库

这是您需要做的：

查看

// Include the SignalR Script
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>

// Provide a dynamic proxy for SignalR
<script src="~/signalr/hubs"></script>

// Define hub connection(see below)
var hub = $.connection.yourHub;

// This is what the Hub will call (Clients.All.getImage(imageSource);)
hub.client.getImage = function (img) {
    var image = '<img id="' + img.treasureId + '" src="data:image/jpg;base64,' + img.image + '"';
    $(image).appendTo("body");
};

// Start the connection to the hub
// Once we have a connection then call the getLearnerTreasureItem on the Hub
$.connection.hub.start().done(function () {
    var id = // whatever
    hub.server.getLearnerTreasureItem(id);
};

//包括信号器脚本
//为信号器提供动态代理
//定义集线器连接（见下文）
var hub=$.connection.yourHub；
//这就是中心将调用的（Clients.All.getImage（imageSource）；）
hub.client.getImage=函数（img）{
var图像处理
集线器

public class YourHub : Hub
{

    public void GetLearnerTreasureItem()
    {
        // All your code
        List<The_Factory_Chante.Models.Learner_Treasure> lern;
        using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
        {

         string imageSource = "";
         lern = db2.Learner_Treasure.ToList();
         if (lern != null)
         {
           foreach (var item in lern)
           {
             if (item.learnerID == UserInfo.ID)
             {
               byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
              string imageBase = Convert.ToBase64String(bytes);
              imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
            }
        }

        // This will now call the getImage function on your view.
        Clients.All.getImage(imageSource);
    }
}

公共类YourHub:Hub
{
public void GetLearnerItem（）
{
//你所有的代码
列表lern；
使用（The_Factory_Chante.Models.The_FactoryDBContext db2=new The_Factory_Chante.Models.The_FactoryDBContext（））
{
字符串imageSource=“”；
lern=db2.Learner\u Treasure.ToList（）；
如果（lern！=null）
{
foreach（lern中的var项目）
{
if（item.learnerID==UserInfo.ID）
{
byte[]bytes=db2.Treasures.FirstOrDefault（au=>au.treaseId==item.treaseId）.itemImage；
字符串imageBase=Convert.tobase64字符串（字节）；
imageSource=string.Format（“数据：image/gif；base64，{0}”，imageBase）；
}
}
//现在将在视图上调用getImage函数。
Clients.All.getImage（imageSource）；
}
}

关于
的信息，我将使用HtmlHelpers实现它，如下所示：（正如有人建议的那样，直接使用db代码不是一种好的做法，您需要改变这一点。）

公共静态类HTMLHelpers
{
公共静态IHtmlString图像（此HtmlHelper帮助程序，列表lern）
{
StringBuilder sb=新的StringBuilder（）；
使用（The_Factory_Chante.Models.The_FactoryDBContext db2=new The_Factory_Chante.Models.The_FactoryDBContext（））
{
字符串imageSource=“”；
lern=db2.Learner\u Treasure.ToList（）；
如果（lern！=null）
{
foreach（lern中的var项目）
{
if（item.learnerID==UserInfo.ID）
{
// Include the SignalR Script
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>

// Provide a dynamic proxy for SignalR
<script src="~/signalr/hubs"></script>

// Define hub connection(see below)
var hub = $.connection.yourHub;

// This is what the Hub will call (Clients.All.getImage(imageSource);)
hub.client.getImage = function (img) {
    var image = '<img id="' + img.treasureId + '" src="data:image/jpg;base64,' + img.image + '"';
    $(image).appendTo("body");
};

// Start the connection to the hub
// Once we have a connection then call the getLearnerTreasureItem on the Hub
$.connection.hub.start().done(function () {
    var id = // whatever
    hub.server.getLearnerTreasureItem(id);
};

public class YourHub : Hub
{

    public void GetLearnerTreasureItem()
    {
        // All your code
        List<The_Factory_Chante.Models.Learner_Treasure> lern;
        using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
        {

         string imageSource = "";
         lern = db2.Learner_Treasure.ToList();
         if (lern != null)
         {
           foreach (var item in lern)
           {
             if (item.learnerID == UserInfo.ID)
             {
               byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
              string imageBase = Convert.ToBase64String(bytes);
              imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
            }
        }

        // This will now call the getImage function on your view.
        Clients.All.getImage(imageSource);
    }
}

public static class HTMLHelpers
{
    public static IHtmlString TreasureImages(this HtmlHelper helper, List<The_Factory_Chante.Models.Learner_Treasure> lern)
    {
        StringBuilder sb = new StringBuilder();
        using (The_Factory_Chante.Models.The_FactoryDBContext db2 = new The_Factory_Chante.Models.The_FactoryDBContext())
        {

            string imageSource = "";
            lern = db2.Learner_Treasure.ToList();
            if (lern != null)
            {
                foreach (var item in lern)
                {
                    if (item.learnerID == UserInfo.ID)
                    {
                        byte[] bytes = db2.Treasures.FirstOrDefault(au => au.treasureID == item.treasureID).itemImage;
                        string imageBase = Convert.ToBase64String(bytes);
                        imageSource = string.Format("data:image/gif;base64,{0}", imageBase);
                        sb.Append("<li><img id='@item.treasureID' src='@imageSource'/></li>");
                    }
                }
            }
        }
        return new HtmlString(sb.ToString());
    }
}

<ul id="TreaureImagesSection">
</ul>

<script>
    $.ajax({
    cache: false,
    type: "GET",
    url: '/YOURCONTROLLER/TreasuresList',
    contentType: 'application/json; charset=utf-8',
    success: function (data) {  // the data returned is List<The_Factory_Chante.Models.Learner_Treasure>
        $("#TreaureImagesSection").html('@Html.TreasureImages(data)');
    },
    error: function (xhr) {
        alert("Error occurred while loading the image.");
    }
});
</script>