Question

我上次搞砸了，所以让我们看看这次我能不能搞定。我试图首先弄清楚将 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 代码是否值得，谢谢你对我的最后一个问题感到非常抱歉。我没有正确地遵循指南

Answer 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,
     });
  }

 
}

Answer 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>

如何在 MVC、MySQL 和实体框架中使用 Ajax，没有剃刀页面

2 个答案: