Click Here For MCQ

Friday, June 19, 2020

Angular js Data Fetching from Database ASP.net Mvc c#

Json Result ASP .Net Controller

    public class HomeController : Controller
    {
  public JsonResult Angusql()
        {
            tbl_employee c = null;
            using (studentEntities db =new studentEntities())
            {
                c = db.tbl_employee.OrderByDescending(a => a.sno).Take(1).FirstOrDefault();

            }
            return new JsonResult { Data = c, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
        }
}




cshtml Controller 


 public ActionResult part2()
        {
            return View();
        }




_Layout.cshtml


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app="yourapp">
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
   
    <script src="~/Scripts/yourapp.js"></script>
    <script src="~/Scripts/Angular controller/controllerpart1.js"></script>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>





part2.cshtml



@{
    ViewBag.Title = "part2";
}

<h2>part2</h2>

    <div ng-controller="controllerpart1">
        <table>
            <tr>
                <td>sno</td>
                <td>{{tbl_employee.sno}}</td>
            </tr>
            <tr>
                <td>name</td>
                <td>{{tbl_employee.name}}</td>
            </tr>
            <tr>
                <td>ftnsme</td>
                <td>{{tbl_employee.ftnsme}}</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </div>
    

yourapp.js


(
    function () {
        var mapp = angular.module('yourapp',['ngRoute']);

})();



controllerpart1.js




angular.module('yourapp')
    .controller('controllerpart1', function ($scope, contactservice) {
    $scope.tbl_employee = null;
    contactservice.GetLastContact().then
    (function (d) {
        $scope.tbl_employee = d.data;
    },function(){
        alert('failed');
    
    });
})
.factory('contactservice', function ($http) {
    var fac = {};
    fac.GetLastContact = function () {
        return $http.get('/Home/Angusql');
    }
    return fac;
});




Context file in Entity model


//------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated from a template.
//
//     Manual changes to this file may cause unexpected behavior in your application.
//     Manual changes to this file will be overwritten if the code is regenerated.
// </auto-generated>
//------------------------------------------------------------------------------

namespace AngularPro.Models
{
    using System;
    using System.Data.Entity;
    using System.Data.Entity.Infrastructure;
    
    public partial class studentEntities : DbContext
    {
        public studentEntities()
            : base("name=studentEntities")
        {
            Configuration.LazyLoadingEnabled = false;
        }
    
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            throw new UnintentionalCodeFirstException();
        }
    
        public virtual DbSet<tbl_employee> tbl_employee { get; set; }
        public virtual DbSet<tbl_trainee> tbl_trainee { get; set; }
    }
}



No comments:

Post a Comment