OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Asp.net returning whole page

  • Thread starter Thread starter Fitchings
  • Start date Start date
F

Fitchings

Guest
I've been trying to develop a site which has a login system. As part of that I want to make an AJAX call to the server to handle the login system with the username and password. When I make the call, it goes through well but i recieve the entire web page in return and I don't know why

Ajax call(JS):

Code:
function AJAXfunc(username, password) {
    var parameter = JSON.stringify({ "username": username, "password": password })
    $.ajax({
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        url: '/Login?handler=LoginFunc',
        data: parameter,
        dataType: 'json',
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },

        success: function (data) {
            onsuccess(data)
        },
        error: function (data, success, error) {
            alert("Error: " + error + " - " + data + " - " + success + " - " + data.value)
        }
    })
}

Server side code(C#):

Code:
public class LoginModel : PageModel
    {
        public async Task<IActionResult> OnPostLoginFuncAsync(HttpContext http, JsonDocument json)
        {
            return new JsonResult("success");
        }
        
    }

Any help would be much appreciated Thanks

Edit: here is the code that calls the ajax function

Code:
function onLoginLoad() {
    const formLogin = document.getElementById("login");
    

    formLogin.addEventListener("submit", function (event) {
        const userName = formLogin.getElementsByClassName("username")[0].value;
        const password = formLogin.getElementsByClassName("password")[0].value;
        // stop form submission
        event.preventDefault();

        AJAXfunc(userName,password);
    });
}

here is the HTML code

Code:
<form id = "login"  action = "/LoginFunc" method = "post">
                    <h1>Login</h1>
                    <small></small>
                    <div class = "field">
                    <label for = "username" class="loginpg" style="top:45%;left:45%;position:fixed;color:white; width:10%;">Username</label>
                    <input type="text" class="username" name="username" id="username" style="top:48%;left:45%;position:fixed;width:10%;" placeholder = "Username"><br><br>
                    </div>
                    <div class = "field">
                    <label for = "password" class="loginpg"  style="top:51%;left:45%;position:fixed;color:white;width:10%;">Password</label>
                    <input type= "password" class="password" id="password" name="password"style="top:54%;left:45%;position:fixed;width:10%;" placeholder = "Password"><br><br>
                    </div>
                    <input type="submit" value="Submit" class = "loginpg" style="top:57%;left:45%;position:fixed;width:10%;">
</form>

This is the exact error: 'Unexpected token '<', "\r\n\r\n<!DOCTYPE "... is not valid JSON'

<p>I've been trying to develop a site which has a login system.
As part of that I want to make an AJAX call to the server to handle the login system with the username and password.
When I make the call, it goes through well but i recieve the entire web page in return and I don't know why</p>
<p>Ajax call(JS):</p>
<pre><code>function AJAXfunc(username, password) {
var parameter = JSON.stringify({ "username": username, "password": password })
$.ajax({
type: "POST",
contentType: 'application/json; charset=utf-8',
url: '/Login?handler=LoginFunc',
data: parameter,
dataType: 'json',
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },

success: function (data) {
onsuccess(data)
},
error: function (data, success, error) {
alert("Error: " + error + " - " + data + " - " + success + " - " + data.value)
}
})
}
</code></pre>
<p>Server side code(C#):</p>
<pre><code>public class LoginModel : PageModel
{
public async Task<IActionResult> OnPostLoginFuncAsync(HttpContext http, JsonDocument json)
{
return new JsonResult("success");
}

}
</code></pre>
<p>Any help would be much appreciated
Thanks</p>
<p>Edit: here is the code that calls the ajax function</p>
<pre><code>function onLoginLoad() {
const formLogin = document.getElementById("login");


formLogin.addEventListener("submit", function (event) {
const userName = formLogin.getElementsByClassName("username")[0].value;
const password = formLogin.getElementsByClassName("password")[0].value;
// stop form submission
event.preventDefault();

AJAXfunc(userName,password);
});
}
</code></pre>
<p>here is the HTML code</p>
<pre><code><form id = "login" action = "/LoginFunc" method = "post">
<h1>Login</h1>
<small></small>
<div class = "field">
<label for = "username" class="loginpg" style="top:45%;left:45%;position:fixed;color:white; width:10%;">Username</label>
<input type="text" class="username" name="username" id="username" style="top:48%;left:45%;position:fixed;width:10%;" placeholder = "Username"><br><br>
</div>
<div class = "field">
<label for = "password" class="loginpg" style="top:51%;left:45%;position:fixed;color:white;width:10%;">Password</label>
<input type= "password" class="password" id="password" name="password"style="top:54%;left:45%;position:fixed;width:10%;" placeholder = "Password"><br><br>
</div>
<input type="submit" value="Submit" class = "loginpg" style="top:57%;left:45%;position:fixed;width:10%;">
</form>
</code></pre>
<p>This is the exact error: 'Unexpected token '<', "\r\n\r\n<!DOCTYPE "... is not valid JSON'</p>
 
Top