ASP.NET MVC - How to display data in Razor view returned from Webapi controller

Question

I am invoking a Web API controller on page load of my form and getting data, this is from my JS file and data is fetched correctly as expected.

  var empDetails = // code to invoke my api controller //
  empDetails.$promise.then(function (empInfo) {
      $scope.employeeForm.EmpDetails = empInfo.EmployeeDetails;
  });

$scope.employeeForm.EmpDetails has the details correctly.

I need to display the data in my razor view engine which is where I am having an issue, I am new to this kind of development.

ViewBag, strongly typed model doesn't work here as I am returning data from a Web API controller and mine is not a strongly typed razor view.

EmpDetails has info like EmpID, EmpFirstName, EmpLastName, EmpLocationj

AB Hunzai · Accepted Answer · 2019-02-04 12:20:31Z

1

Dear there are two ways

If you are bound to use Razor, then you should consume your api in mvc controller, get data from your api and return it in a model to your Razor view, then you will have strongly typed model to use in your Razor view
If you are not bound then its pretty simple, if you are getting data in javascript code. just use it to populate your view using JavaScript code.
If you are using angular 1.x, then here is a angularjs 1.x form example

<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName:"John", lastName:"Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>
</body>
</html>

edited Feb 4, 2019 at 12:20

answered Feb 3, 2019 at 6:53

AB Hunzai

611 silver badge4 bronze badges

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

5 Comments

yardpenalty.com Over a year ago

@{ and your javascript goes in here } or @section Scripts{<script>or here</script> }

Developer Over a year ago

Thanks AB, yardpenalty - I am referring the scripts file in my cshtml... i need to bind the data to my html control... First Name : <input type="text" name="employeeForm.EmpDetails.FirstName"><br> but this doesn't seem to work.

AB Hunzai Over a year ago

From your js code, its seems that you are using angularjs 1.x, and you want to bind your html form controls with $scope.employeeForm.EmpDetails object?

Developer Over a year ago

@AB Hunzai - Yes im using Angular 1 nd want to bind data to html controls.

AB Hunzai Over a year ago

I have updated my answer and added an example of angularjs 1.x style forms, I hope that will help you.

karan · Accepted Answer · 2019-02-03 08:44:47Z

0

Developer as per you are telling in comment that to bind data via html for that this solution you can try this.

First initialize model in .cshtml in the header part of the .cshtml after that use @model and give their field name by adding .(dot) sign and bind data to your html control

edited Feb 3, 2019 at 8:44

answered Feb 3, 2019 at 8:23

karan

4921 gold badge10 silver badges30 bronze badges

1 Comment

Developer Over a year ago

karan - mine is not a strongly typed model, i cannot bind it to view

Collectives™ on Stack Overflow

ASP.NET MVC - How to display data in Razor view returned from Webapi controller

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related