angularJS Form data to ActionResult - ASP .NET MVC

Question

I want to receive a formdata as a parameter in actionresult, i don't want to covert into FormData(), and Use Request.Form in action Result, cant i receive data directly, without FormData(), here is what I've tried till now ...

<form ng-show="divPatient" name="PatientForm" ng-submit="AddUpdatePatient()">
            <table>
                <tr>
                    <td>
                        <input class="form-control" type="text" readonly placeholder="Key (Automatic)" ng-model="model.PatientID" />
                    </td>
                    <td>
                        <input name="FirstName" class="form-control" type="text" placeholder="FirstName" ng-model="model.FirstName" ng-minlength="3" required />
                    </td>
                    <td>
                        <input name="LastName" class="form-control" type="text" placeholder="LastName" ng-model="model.LastName" ng-minlength="3" required />
                    </td>
                    <td>
                        <input class="form-control" type="text" placeholder="Disease" ng-model="Disease" name="model.Disease" ng-minlength="3" required />
                    </td>
                    <td>
                        <input class="form-control" type="number" placeholder="Phone No." ng-model="model.PhoneNo" name="PhoneNo" ng-pattern="/^[789]\d{9}$/" required />
                    </td>
                    <td>
                        <input type="file" onchange="angular.element(this).scope().selectFileforUpload(this.files)" ng-model="model.PhotoURL" value="" class="form-control profilePic" required/>
                    </td>
                    <td colspan="2" class="saveCancel">
                        <input type="submit" value="save" class="btn btn-success" ng-disabled="PatientForm.PhoneNo.$dirty && PatientForm.PhoneNo.$invalid || PatientForm.LastName.$dirty && PatientForm.LastName.$invalid || PatientForm.FirstName.$dirty && PatientForm.FirstName.$invalid || PatientForm.Disease.$dirty && PatientForm.Disease.$invalid" />
                        <input type="button" value="cancel" class="btn btn-primary" ng-click="CancelForm()" />
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><span class="eror-text" ng-show="PatientForm.FirstName.$error.minlength">min 3 letters</span></td>
                    <td><span class="eror-text" ng-show="PatientForm.LastName.$error.minlength">min 3 letters</span></td>
                    <td><span class="eror-text" ng-show="PatientForm.Disease.$error.minlength">min 3 letters</span></td>
                    <td><span class="eror-text" ng-show="PatientForm.PhoneNo.$error.pattern">Invalid phone no</span></td>
                </tr>
            </table>
        </form>

My controller in angularJS

app.controller("StudentCtrl", function ($scope, angularService) {
$scope.model = {};
$scope.AddUpdatePatient = function () {
    var getData = angularService.AddPatient($scope.model);
    getData.then(function (msg) {
            alert(msg.data);
        }, function () {
            alert('Error in adding record');
        });
    }
}

My Service in angularJS

app.service("angularService", function ($http) {

    // Add Employee
    this.AddPatient = function (patientData) {
        var response = $http({
            withCredentials: true,
            headers: { 'Content-Type': undefined },
            transformRequest: angular.identity,
            method: "post",
            url: "AddPatient",
            data: patientData,
            dataType: "json"
        });
        return response;
    }
}

And my action result

public string AddPatient(Patient patientData) {
    //but patientdata fields are all null
}

my MVC Model

using ...

namespace WebApplication3.Models
{
    public class Patient
    {
        public int PatientID { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public long PhoneNo { get; set; }
        public string Disease { get; set; }
        public string PhotoURL { get; set; }
    }
}

I wonder why that patientData in action Result is null ??

The default http header content type is application/json for angularjs as mentioned here, change it to application/x-www-form-urlencoded. Also see this answer — Adeel
– Adeel, Commented Jul 10, 2015 at 9:52

Trilok Chandra · Accepted Answer · 2015-07-10 08:08:07Z

2

Try this

  $http({ method: 'POST', url: '/ControllerName/AddPatient', data: patientData }).
                          success(function (data, status, headers, config) {

                          }).
                          error(function (data, status, headers, config) {
                              alert(status);
                          });

answered Jul 10, 2015 at 8:08

Trilok Chandra

1139 bronze badges

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

2 Comments

Trilok Chandra Over a year ago

Use full url i think.

Arjun Over a year ago

No this did not help me :(

Collectives™ on Stack Overflow

angularJS Form data to ActionResult - ASP .NET MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related