Creating a POST request in a C# web application

Question

Creating a POST request in a C# web application

I am currently attempting to submit a form using C#

After conducting some research, I have been having trouble coding it correctly (as I am new to this field).

Below are the snippets of code I have:

View;

<form>
          <div class="field-wrap">
              <label>
                  Email Address<span class="req">*</span>
              </label>
              <input type="email" id="input-username" name="Username" required autocomplete="on" />
          </div>

          <div class="field-wrap">
            <label>
              Password<span class="req">*</span>
            </label>
            <input type="password" id="input-password" name="Password" required autocomplete="on"/>
          </div>

          <p class="forgot"><a href="#">Forgot Password?</a></p>

          <button class="button button-block" id="button-login">Log In</button>

      </form>

Controller;

// GET: User
        [HttpPost]
        public ActionResult Login()
        {
            string username = Session["Username"].ToString();
            string password = Session["Password"].ToString();

            Service iLocationService = new Service();
            var result = Service.MemberGetLogin( username, password, "127.0.0.1" );

            ViewBag.Message = result;

            return View();
        }

Javascript;

jQuery(document).ready(function () {
$("#button-login").click(function () {
    $.ajax({
        type: "POST",
        url: "/Controllers/UserController/login/",
        data: $(this).serialize(),
        dataType: "json"
    })
    .done(function (result) {
        console.log(result);
    })
    .fail(function (a) {
        console.log( a);
    });
});

});

The goal is to send a POST request with the input values to validate the user.

Thank you in advance

javascript c#asp.net-mvc asp.net-ajax

Answer 1

Answer №1

Take a look at this particular line

string username = Session["Username"].ToString();

In the provided code snippet, an attempt is being made to retrieve the username and password values from Session variables. The query arises as to who actually assigned the user name and password to the Session? It is recommended to extract these values from the posted form instead.

[HttpPost]
public ActionResult Login(string userName, string password)
{
  // Perform operations with userName and password, then return something
}

Furthermore, it's crucial to ensure that the form itself is serialized, not just the clicked button. A suggested approach involves employing Html helper method for generating the form tag within the Razor view, dynamically setting the action attribute value in the accompanying JavaScript code rather than hardcoding URLs.

This can be implemented in the following manner:

@using(Html.BeginForm("login", "User"))
{
    // Include your existing form inputs here
   <button class="button button-block" id="button-login">Log In</button>
}

Regarding script handling:

$("#button-login").click(function () {
     $.ajax({
        type: "POST",
        url: $(this).closest("form").attr("action"),
        data: $(this).closest("form").serialize()           
     })
});

Considering the ajax form submission, incorporating a JSON response from the server is advised for better client-side processing:

[HttpPost]
public ActionResult Login(string userName, string password)
{
   if (userName and password are valid)
       return Json(new { Status="success"});
   else
         return Json(new { Status="failed", Message="Invalid credentials"});
}

Upon completion of the request, the done callback should evaluate the response and trigger appropriate actions:

.done(function (result) {
   if(result.Status === "success")
   {
     window.location.href = "/Home/Index"; // Redirect as necessary
   }
   else
   {
     alert(result.Message);
   }    
})

Answer 2

Take a look at this particular line

string username = Session["Username"].ToString();

In the provided code snippet, an attempt is being made to retrieve the username and password values from Session variables. The query arises as to who actually assigned the user name and password to the Session? It is recommended to extract these values from the posted form instead.

[HttpPost]
public ActionResult Login(string userName, string password)
{
  // Perform operations with userName and password, then return something
}

Furthermore, it's crucial to ensure that the form itself is serialized, not just the clicked button. A suggested approach involves employing Html helper method for generating the form tag within the Razor view, dynamically setting the action attribute value in the accompanying JavaScript code rather than hardcoding URLs.

This can be implemented in the following manner:

@using(Html.BeginForm("login", "User"))
{
    // Include your existing form inputs here
   <button class="button button-block" id="button-login">Log In</button>
}

Regarding script handling:

$("#button-login").click(function () {
     $.ajax({
        type: "POST",
        url: $(this).closest("form").attr("action"),
        data: $(this).closest("form").serialize()           
     })
});

Considering the ajax form submission, incorporating a JSON response from the server is advised for better client-side processing:

[HttpPost]
public ActionResult Login(string userName, string password)
{
   if (userName and password are valid)
       return Json(new { Status="success"});
   else
         return Json(new { Status="failed", Message="Invalid credentials"});
}

Upon completion of the request, the done callback should evaluate the response and trigger appropriate actions:

.done(function (result) {
   if(result.Status === "success")
   {
     window.location.href = "/Home/Index"; // Redirect as necessary
   }
   else
   {
     alert(result.Message);
   }    
})

Creating a POST request in a C# web application

Answer №1

Similar questions

The process of defining JSON data from a web API within React using Axios

Ways to transfer data through the javascript success function in traditional CodeIgniter

Is there a way to manually or forcibly expire the access-token generated by my web API?

Guide to accessing the content within an h1 tag with JavaScript

Modify the database entry only if the user manually changes it, or temporarily pause specific subscriptions if the value is altered programmatically

HTML5 video player with secondary playlist

Using AJAX to create an interactive dropdown menu with changing options

PHP function with JSON response encountered an error during the AJAX call

The definition of require is missing in the MEAN stack node

Is there a more efficient way to consolidate multiple functions like this into one cohesive function instead of having to define each one separately?

The error message "Unable to map props.theTodos" is displayed

Local Bootstrap notifications functioning correctly, but failing to display on the server

Interaction of PHP and JavaScript when a new row is inserted using JavaScript

modifying a model across multiple interfaces

AngularJS ng-click function not functioning as expected when used within ng-repeat

Accessing a document using protractor

Large data sets may cause the Highchart Bar to not display properly

Transferring information from Vue Component to Vuex storage

Utilizing Object Arrays in Chart.js for Optimal Performance

When utilizing VueJs, it's not possible to retrieve a data property from within a function