AngularJs: Show default image with asp.net mvc - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

AngularJs: Show default image with asp.net mvc

In this article I am going to explain how to show default image if image is missing or not uploaded using angularjs with asp.net mvc.


Description:
I am displaying the employees detail like name, phone number, email, profile pic etc. in Grid using ng-repeat. If users do not upload profile pic or missing, in that case show default image.

Implementation:

To display default image add the below given snippets:

<img ng-src="{{emp.ImagePath || 'images/default.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" />

Example:
Here in this example I want to display default image if image is missing.

Controller:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
    public class AngularController : Controller
    {
        //
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
        {
            return View();
        }
        public JsonResult GetEmployees()
        {
            var emp = db.Employees.ToList();
            return Json(emp, JsonRequestBehavior.AllowGet);          
        }       
    }
}


View (index.cshtml):

@{
    ViewBag.Title = "MVC-AngualarJs Tutorial";
}
<style>
    table tr td th {
        text-align: center;
        border:none;
    }
    .ng-binding {
        padding: 40px;
    }
     a {
        text-decoration: none;
        color: #2196F3;
    }
     tr:nth-child(odd) {
        background: #b8d1f3;
    }
    /*  Define the background color for all the EVEN background rows  */
     tr:nth-child(even) {
        background: #dae5f4;
    }
</style>

<h2>MVC-AngualarJs Search(Filter) Tutorial</h2>
<fieldset style="width:60%">
    <legend>AngualarJs Search(Filter) Tutorial</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">    
              <table>
           <tr>
               <td>Search :</td>
               <td colspan="2"><input type="text" ng-model="empname" placeholder="Search"></td>
           </tr>
           <tr>
               <td></td>
               <td></td>
           </tr>
       </table>
  
       <table>         
           <tr>
               <th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>
            
               <th>
                   <a href="" ng-click="columnToOrder='Name';reverse=!reverse">Name</a>
               </th>            
               <th>
                   <a href="" ng-click="columnToOrder='Phone';reverse=!reverse">Phone</a>
               </th>
               <th>
                   <a href="" ng-click="columnToOrder='Department';reverse=!reverse">Department</a>
               </th>
          
               <th>
                   <a href="" ng-click="columnToOrder='Salary';reverse=!reverse">Salary</a>
               </th>
            
               <th>
                   <a href="">Image</a>
               </th>
             
               <th >
                   <a href="" ng-click="columnToOrder='EmailId';reverse=!reverse">Email</a>

               </th>
           </tr>
           <tr ng-repeat="emp in employees| filter:{Name:empname} |orderBy:columnToOrder:reverse">
               <td>{{$index+1}}</td>
               <td>{{emp.Name }}</td>
               <td>{{emp.Phone }}</td>
               <td>{{emp.Department}}</td>
               <td>{{emp.Salary }}</td>
               <td><img ng-src="{{emp.ImagePath || 'images/image.jpg'}}" alt="" title="{{emp.Name}}" width="150" height="150" /></td>
               <td>{{emp.EmailId ||'email not available' }}</td>
           </tr>
       </table>
        <div ng-show="(employees|filter:empname).length==0" style="color:red;font-weight:bold">No Result Found</div>
    </div>
</fieldset>


    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
    var angular = angular.module('mvcapp', []);
  
    angular.controller('AngularController', function ($scope, $http) {

            $http.get('/Angular/GetEmployees').success(function (data) {            
                $scope.employees = data;
            });
         
    });
</script>

Now build and run the project. Hope this tutorial helps u!!! 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon