Home > database >  Return JSON with ajax is giving me blank page with return parameters
Return JSON with ajax is giving me blank page with return parameters

Time:11-22

I started learning AJAX like this week and I was trying to make a simple voting thingy on page in asp mvc - when you click one button you get message like a popup (in browser) and count increments, when you click second, you get another count decrements, you get the idea. I wanted to test it's possible to do like voting system (upvotes/downvotes) that will update itself's oount on click without needing to refresh the page. However, when I click on this buttons, it gets me blank page with the things that return json contains. (picture included at the very bottom of post). I am most likely missing something obvious, so please bear with me and if you could navigate me where am I wrong, please do.

My Controller:

 public IActionResult Privacy()
        {
            Vote vote = new Vote();
            vote.Votes = 0;
            return View(vote);
        }

        


        [HttpPost]
        public ActionResult VoteUp(string plus, string minus)
        {
            Vote vote = new Vote();

            if (plus == null)
            {
               
                vote.Votes = vote.Votes -1;
                var message = "You voted down";
                return Json(new { success = true, message = message }, new Newtonsoft.Json.JsonSerializerSettings());
            }
            else if ((minus == null))
            {
                
                vote.Votes = vote.Votes  1 ;
                var messagez = "You voted up";
                return Json(new { success = true, message = messagez }, new Newtonsoft.Json.JsonSerializerSettings());
            }
            else { }
            var messagebad = "STH WENT WRONG";
            return Json(new { success = true, message = messagebad }, new Newtonsoft.Json.JsonSerializerSettings());
        }


My View:

@model JSON_RETURN.Models.Vote
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    ViewData["Title"] = "sssss";
}




<form  asp-action="VoteUp" asp-controller="Home" method="POST" data-ajax="true">


    <div class="form-group"> </div>



    <div class="input-group-button">
        <button name="plus" class="btn btn-dark" onclick="" value="1" > </button>
        @Model.Votes

        <button name="minus" class="btn btn-dark" onclick="" value="-1" >-</button>

    </div>

</form>


    @section scripts{
        <script src="~/lib/ajax/jquery.unobtrusive-ajax.js"></script>
        <script src="~/lib/jquery/dist/jquery.js"></script>


        <script type="text/javascript">

                function SubmitForm(form) {
                    form.preventDefault();
                $.ajax({
                    type: "POST",
                    url: "HomeController/VoteUp",  //form.action,
                    data: ('#form'),
                    success: function (data) {
                        if (data.success) {
                            alert(data.message);
                        } else {

                        }
                    },

                });
                
               
              

            };


        </script>
    }

My Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;


namespace JSON_RETURN.Models
{
    public class Vote
    {
        public int Votes { get; set; }
    }
}

And there's the blank page I'm getting every click (message varies ofc): (enter image description here

  • Related