如何将 Ajax 与 MVC、MySQL 和实体框架一起使用，没有 razor 页面

Question

I messed up last time so let us see if I can get it right this time. I am trying to figure out first where to put the Ajax at and how to put it in my controller. First my controller looks like this [update] I am trying to make my messages popup without refreshing. It works without ajax I just need someone to explain where to put in the ajax and how to interact with it. I don't want a alert I want the messages to update in that one section. In the answer I tried to figure out what he was saying yet this is what i got when I clicked send

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

I don't want to see this I want it to just update the message section. My goal has not been met yet so I am completely confused.

Underneath you see the image of it working before I added the ajax recommended. Now it sends me to that a different page.

[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");
        }

What I am trying to do is change the outline to it because I know I need to do something like this

[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);
        }

Is this correct? Or do I need to do something else?

Secondly I truly can't figure out the second part on the HTML section. Originally I had

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

I have tried but don't understand what goes in the success section. I also don't know what class or should i make name or id up for the message itself in the data I tried this but am still lost

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

I would love to also know if using vs code is not worth it for c# and .net core thank you so much sorry about my last question. I didn't follow the guidelines properly

Answer 1

1-Replace this code with your view code

@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-Create a class in your project called JsonData

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

and your NewMessage Action in controller change to:

[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

So I got it to work thank you a lot but this is what I did

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