如何将 Ajax 与 MVC、MySQL 和实体框架一起使用，没有剃须刀页面答案

【问题标题】：How to use Ajax with MVC, MySQL and Entity Framework, no razor pages如何将 Ajax 与 MVC、MySQL 和实体框架一起使用，没有剃须刀页面
【发布时间】：2021-04-25 03:49:25
【问题描述】：

我上次搞砸了，所以让我们看看这次我能不能把它弄好。我试图首先弄清楚将 Ajax 放在哪里以及如何将它放在我的控制器中。首先我的控制器看起来像这样 [更新] 我试图让我的消息弹出而不刷新。它可以在没有 ajax 的情况下工作我只需要有人解释在哪里放置 ajax 以及如何与之交互。我不想要警报，我希望在该部分中更新消息。在答案中，我试图弄清楚他在说什么，但这就是我点击发送时得到的结果

{"htmlMsg":"data addes to database successfull","htmlBody":"","success":true}

我不想看到这个我希望它只是更新消息部分。我的目标还没有实现，所以我完全糊涂了。

在我添加推荐的 ajax 之前，您会看到它在工作的图像。现在它会将我转到另一个页面。

[HttpGet("wall")]
        public IActionResult Wall(int userID)
        {
            ViewBag.User = GetUserInDB();
            // if(ViewBag.User == null)
            // {
            //     return RedirectToAction("Index");
            // }
            ViewBag.Messages = DBContext.Messages
                                .Include(i => i.Messenger)
                                .ToList();
            return View();
        }

        [HttpPost("NewMessage/Add")]
        public IActionResult NewMessage( Message newMessage)
        {

            User userInDB = GetUserInDB();
            Message thisMessage = newMessage;
            System.Console.WriteLine(newMessage.TheMessage);
            thisMessage.UserID = userInDB.UserID;
           
            DBContext.Messages.Add(thisMessage);
            DBContext.SaveChanges();
            return RedirectToAction("Wall");
        }

我要做的是将大纲更改为它，因为我知道我需要做这样的事情

[HttpPost("NewMessage/Add")]
        public JsonResult NewMessage( Message newMessage)
        {

            User userInDB = GetUserInDB();
            Message thisMessage = newMessage;
            thisMessage.UserID = userInDB.UserID;
           
            DBContext.Messages.Add(thisMessage);
            DBContext.SaveChanges();

            return Json(thisMessage);
        }

这是正确的吗？还是我需要做其他事情？

其次，我真的无法弄清楚 HTML 部分的第二部分。原来我有

@model Message

<div class="jumbotron p-2 m-3">
    <a href="/"><img class="logo" src="/images/melysLogo.jpg" alt="Logo Image"> </a>


    @if (ViewBag.User == null)
    {
        <a class="mr-2" href="/LoginOrRegister">Login Or Register</a>
    }
    else
    {
        <a href="/logout">Logout</a> <span>|</span>
        <a href="/AddRecipe"> Add Recipe</a><span>|</span>
        <a class="mr-2" href="/">Dashboard</a>
    }
     <span style="font-size:x-large;">Melly's Underground Cuisine</span>
</div>
<style>
    .messageboard {
        width: 97%;
        height: 600px;
        background-color: black;
        color: white;
    }
</style>

<div class="messageboard m-3 p-3 rounded">
    <div class="m-3 p-3 sizeclass">
        @foreach (Message message in ViewBag.Messages)
        {   
            <div class="d-flex justify-content-around m-3 p-3 ">
                <div class="p-2 rounded  largeLabel border">@message.TheMessage </div>
                    <div class="p-2 rounded smallLabel border d-flex justify-content-center align-items-center">
                    @message.Messenger.FirstName
                </div>
            </div>
        }
    </div>
</div>
<footer class="m-4">
    @if (ViewBag.User != null)
    {
        <form asp-action="NewMessage" asp-controller="Home"  a method="post">
            <input class="form-control-lg inputLabel m-1 " asp-for="TheMessage">
            <button class="btn btn-outline-primary btn-warning m-2" type="submit">Send</button>
        </form>
    }
</footer>

我已经尝试过，但不明白成功部分的内容。我也不知道什么类，或者我应该在我尝试过的数据中为消息本身命名或标识，但我仍然迷路了

<script type="text/javascript">  
        $(function () {  
            $("#btnGet").click(function () {  
                $.ajax({  
                    type: "POST",  
                    url: "/Home/NewMessage",  
                    data: { "name": $(".messageboard").val() },  //I am also guessing the class is probably wrong as well
                    success: function (response) {  
                          //what do I put here is what I am confused about as well
                    },  
                    failure: function (response) {  
                          console.log(response.failure)
                    },  
                    error: function (response) {  
                       console.log(response.error);  
                   }  
                });  
            });  
        });  
    </script>

我也很想知道对于 c# 和 .net 核心是否不值得使用 vs 代码，谢谢你对我的最后一个问题感到非常抱歉。我没有正确遵守指南

【问题讨论】：

更新前的全部代码都在我的 git hub github.com/althepal78/melskitchen
那么问题是什么？
我的 JSon 请求是否正确，我对成功调用究竟做了什么让我感到困惑。我正在尝试让页面在创建新消息时更新一条消息，不知道该怎么做
请edit您的问题为该问题设置标题，而不仅仅是一系列关键字。请参阅How to Ask，标题为“写一个总结具体问题的标题”的部分。
我把ajax脚本放在你可以看到的页脚底部

标签： c# html mysql .net

【解决方案1】：

1-将此代码替换为您的视图代码

@model Message

    <div class="jumbotron p-2 m-3">
        <a href="/"><img class="logo" src="/images/melysLogo.jpg" alt="Logo Image"> </a>


        @if (ViewBag.User == null)
        {
            <a class="mr-2" href="/LoginOrRegister">Login Or Register</a>
        }
        else
        {
            <a href="/logout">Logout</a> <span>|</span>
            <a href="/AddRecipe"> Add Recipe</a><span>|</span>
            <a class="mr-2" href="/">Dashboard</a>
        }
         <span style="font-size:x-large;">Melly's Underground Cuisine</span>
    </div>
    <style>
        .messageboard {
            width: 97%;
            height: 600px;
            background-color: black;
            color: white;
        }
    </style>

    <div class="messageboard m-3 p-3 rounded">
        <div class="m-3 p-3 sizeclass">
            @foreach (Message message in ViewBag.Messages)
            {   
                <div class="d-flex justify-content-around m-3 p-3 ">
                    <div class="p-2 rounded  largeLabel border">@message.TheMessage </div>
                        <div class="p-2 rounded smallLabel border d-flex justify-content-center align-items-center">
                        @message.Messenger.FirstName
                    </div>
                </div>
            }
        </div>
    </div>
     <footer id="myFooter" class="m-4">
            @if (ViewBag.User != null)
            {
                <form name="myForm" asp-action="NewMessage" asp-controller="Home"  a method="post">
                    <input class="form-control-lg inputLabel m-1 " asp-for="TheMessage">
                    <button class="btn btn-outline-primary btn-warning m-2" type="submit">Send</button>
                </form>
            }
        </footer>
  <script>
     $("#myform").submit( function () {
            e.preventDefault(); //prevent default form submit    
            $.ajax({   
                type: "POST",
                data : $("#myForm").serialize(),
                cache: false,  
                url: "/Home/NewMessage",   
               success: function (result) {  
                    //what do I put here is what I am confused about as well
                    if(result.Succeess)
                    {
                        //do youy want work if success....
                    }
                    else
                    {
                        //do youy want work if failed....
                    }
               },
               error: function (result) {  
                    console.log(result.error);    
            });   
            return false;   
    });
  </script>

2-在你的项目中创建一个名为 JsonData 的类

public class JsonData
{
    public string HtmlMsg { get; set; }
    public string HtmlBody { get; set; }
    public bool Success { get; set; }
}

并且您在控制器中的 NewMessage Action 更改为：

[HttpPost("NewMessage/Add")]
public JsonResult NewMessage(Message newMessage)
{
  try
  {
     User userInDB = GetUserInDB();
     Message thisMessage = newMessage;
     thisMessage.UserID = userInDB.UserID;
           
     DBContext.Messages.Add(thisMessage);
     DBContext.SaveChanges();

     return Json(new JsonData()
     {
       HtmlMsg = "data add to database successfull",
       HtmlBody = "",
       Success = true,
     });
  }
  catch
  { 
      return Json(new JsonData()
     {
       HtmlMsg = "data add to database failed",
       HtmlBody = "",
       Success = false,
     });
  }

 
}

【讨论】：

我对将 ajax 调用放在哪里感到困惑，因为你把它拿出来了，它现在是部分进入还是留在同一页面上？其次，ajax 调用中的 url 代码似乎不正确，在您发布答案之前，我在控制台中得到了 404
我也不明白成功的部分。 success: function (response) { $('#myfooter').html(response); }, 就像我为什么希望响应出现在页脚中，我不希望它出现在消息中，可能是我想太多了
嘿兄弟，我试过 @html .partial 但我得到一个错误，说我必须使用我也这样做了，然后它一直给我错误
我解释了所有步骤。删除 btnGet 并改用我提供的脚本。
并为页脚创建一个 partialView 并将我描述的代码传输给它。使用我的代码，因为我更改了元素名称

【解决方案2】：

所以我让它工作了非常感谢你，但这就是我所做的

// wall html
@model Message

<div id="theDamMessages">
    <partial name="MessagePartial" />
</div>

<footer class="m-4">
    @if (ViewBag.User != null)
    {
        <form id="myform" method="POST">
            <input id="inputey" class="form-control-lg inputLabel m-1 " asp-for="TheMessage">
            <button class="btn btn-outline-primary btn-warning m-2" type="submit">Send</button>
        </form>
    }
</footer>
<div>
    <script>
        $("#myform").submit(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                data: $("#myform").serialize(),
                cache: false,
                url: "/AddMessage",
                success: function (result) {
                    console.log(result)

                    $("#theDamMessages").html(result);

                    $("#myform")[0].reset();
                    var theheight = $(".messageboard")[0].scrollHeight;
                    $(".messageboard").scrollTop(theheight);
                },

                error: function (result) {
                    console.log(result);
                }

            })
        });
    </script>
</div>

     [HttpPost("AddMessage")]
        public IActionResult AddMessage(Message newMessage)
        {

            User userInDB = GetUserInDB();
            Message thisMessage = newMessage;
            System.Console.WriteLine(newMessage.TheMessage);
            thisMessage.UserID = userInDB.UserID;

            DBContext.Messages.Add(thisMessage);
            DBContext.SaveChanges();

            ViewBag.Messages = DBContext.Messages
                                .Include(i => i.Messenger)
                                .ToList();          

            return PartialView("MessagePartial");
        }

<div class="messageboard m-3 p-3 rounded">
    <div class="m-3 p-3 sizeclass">
        @foreach (Message message in ViewBag.Messages)
        {   
            <div class="d-flex justify-content-around m-3 p-3 ">
                <div class="p-2 rounded  largeLabel border">@message.TheMessage </div>
            
                <div class="p-2 rounded smallLabel border d-flex justify-content-center align-items-center">
                    @message.Messenger.FirstName
                </div>
            </div>
        }
    </div>
</div>

【讨论】：

我尽可能多地指导。让我们在聊天中交谈。