Posting Data to asp.net core controller using angularjs

Question

I am new to Asp.net core. I am trying to make simple login page which connects to database. But for some reason I can't post username and password to controller.

Controllers/HomeController.cs

namespace WebApplication12.controllers
 {
public class HomeController : Controller
{
    public ActionResult Index()
    {
        MysqlConnector test = new MysqlConnector();
        return View(test);
    }




    public string test_name { get; set; }
    public string test_role { get; set; }

    private MySqlConnection connectio;

    [HttpPost]
    public JsonResult PostData(string User, string Pass)
    {
        connect(User,Pass);
        MySqlCommand query = new MySqlCommand();
        query.Connection = connectio;
        query.CommandText = string.Format("Select * from users");

        MySqlDataReader reader = query.ExecuteReader();

        reader.Read();
        try
        {
            test_name = reader["user"].ToString(); //reader.getString(1);
            test_role = reader["role"].ToString();
            reader.Close();
            return Json(new {success=true , user=test_name});

        }
        catch (Exception err)
        {
            test_name = err.ToString();
            test_role = err.ToString();
            reader.Close();
            return Json(new { success = false });
        }



    }


    private void connect(string user,string pass)
    {


        string ConnectionString =  string.Format("server=localhost ;database=xdata; uid={0} ; pwd={1}",user,pass);

        connectio = new MySqlConnection(ConnectionString);
        connectio.Open();



    }
}

login.html

 <p><input ng-model="username" value="Username"/></p>
 <p><input ng-model="password" value="Password"/></p>
<p><button type="button" ng-click="submit(username,password)">Click to Submit</button></p>

angular code

 $http.post('/HomeController/PostData/', {
        'User': user,
        'Pass': pass

    })

    .success(function (data) {
        $scope.something = data;
        console.log(data);

    }).error(function (response) {

        alert("Fail");

    });

When I click the button, on the console, it shows the entire html. Apparently there is an error while posting. Thanks in advance. ( error at "HomeController/PostData/ (?) )

Unless you have changed it from the default, isn't the route usually api/<controller>/<action>? If so, the URL should be api/Home/PostData/. — Lex
– Lex, Commented Jul 20, 2016 at 16:19
my route is like this routes.MapRoute("default", "{*catchall}", new { controller = "Home", action = "Index" }); — risefire
– risefire, Commented Jul 21, 2016 at 6:52

Rani Radcliff · Accepted Answer · 2016-07-20 15:53:25Z

3

Take the word "Controller" out. Try changing your code to:

 $http.post('/Home/PostData/', {
    'User': user,
    'Pass': pass

})

.success(function (data) {
    $scope.something = data;
    console.log(data);

}).error(function (response) {

    alert("Fail");

});

answered Jul 20, 2016 at 15:53

Rani Radcliff

5,0965 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ralf Bönning · Accepted Answer · 2016-07-22 07:29:06Z

1

Your code has to be changed to address two issues.

Issue 1: Routing

As Rani Radcliff pointed out the URL in $http.post has to be changed to '/Home/PostData'; otherwise a 404 status code will be received. The default route for a Method "fooMethod" in a controller "fooController" is "/foo/fooMethod".

Issue 2: Read model from body

Introduce a model class and annotate the action with [FromBody]

public class LoginModel {
    public string User {get; set;}
    public string Pass {get; set;}
}

public class HomeController : Controller
{
    ...

    [HttpPost]
    public JsonResult PostData([FromBody] LoginModel model)
    {
       ...
    }
}

Issue 3: Prefer HTTP status codes to signal success or failure

In your sample the JSON response includes a boolean success property. According to the principles of a RESTful API it is better to us HTTP status codes. In ASP.NET Core you can use specific helper functions of the Controller-Base-Class, e.g. instead of return JsonResult you can use

return Ok(); 
return Ok(someObject); // someObject will be converted to JSON

or

return Unauthorized();

edited Jul 22, 2016 at 7:29

answered Jul 21, 2016 at 9:36

Ralf Bönning

15.6k6 gold badges56 silver badges71 bronze badges

6 Comments

risefire Over a year ago

I did the first and it worked but for the second how i should define the User and Pass in $http.post ? I mean when I am posting the user and pass from angularjs, will it automatically see these parameter in the LoginModel. sorry for my english if I couldn't explain it well.

Ralf Bönning Over a year ago

@risefire You should not need to modify the post. The asp.net core framework matches the names of the JSON properties to the properties of the C# class.

risefire Over a year ago

It seems the post is working but now the controller returns the entire cshtml page to "data" (.success(function(data)). Additionally, I am showing the html page on the cshtml using ng-view. Sorry I forgot to mention that.

Ralf Bönning Over a year ago

@risefile - I added some hints about returning HTTP Status codes. Regarding the returned HTML-data I wonder which HTML this should be. Is this the ASP.NET Core Error Page (Exception happened) or a redirect to a login page (caused by a Authorize-Annotation)? Because in your sample code there is no view addressed in the controller code.

Ralf Bönning Over a year ago

@risefire - I would say this is a "success indicator". I cannot tell it exactly because now code is executed that is not part of your original post. The PostData controller method is executed with return code 200 (sucess). Therefore the promise in the angular controller is fullfilled (success-method executed). Now I assume the ng-view is triggered and fetches the HTML data from RouteOne - that is another method. If you have questions on this behaviour then you should better create another question. I hope my input was helpful and answered your original post.

|

Collectives™ on Stack Overflow

Posting Data to asp.net core controller using angularjs

2 Answers 2

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Related