Archive for category MVC

Insert functionality in UIGrid

Introduction

This is a continuation of my previous articles in which I demonstrated the procedure to

In this article I will demonstrate how to implement Add new record functionality in Angular UIGrid.

Prerequisites:

I have used icons from FontAwesome Library, which is a great source for multiple icons. You can download Fontawesome icons from here.

To display message after every operation we used UIBootstrap.

Implementation:

You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of Adding new record in UIGrid.

You can see a sample Demo of entire functionality below.

demo

UIGrid Updates

We will add a new button on page which responds to click event and open a modal pop up window. Users can enter the details and on save button click we will save the data to database.

AddCustomer function:

AddCustomer function will take the scope object as input which contains all values as provided by user and then save the data to database. User will also see an alert stating the status of insert operation.

Updated Angular code with Insert new Record functionality

Modal Pop up HTML

WEBAPI AddCustomer Method

You can find complete source code of this demo from github

Advertisements

, , , , , , ,

Leave a comment

Implementing delete functionality in UIGrid

Introduction

This is continuation to my previous two articles in which I demonstrated the steps to

In this article I am going to demonstrate how to implement row delete functionality in UIGrid.  The series will contain continuation articles to cover the topic in detail.

Prerequisites:

I have used icons from FontAwesome Library, which is a great source for  icons. You can download Fontawesome icons from here.

Also to display message after every operation we used UIBootstrap

Implementation:

You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of deleting records in UIGrid.

Sample Demo of Delete functionality is given below

Demo

UIGrid Updates:

We will update cellTemplate in “Actions” column to add Delete button. We will reuse the editRow flag to hide and display delete buttons.  To delete the record,, we call deleteRow function from Delete button

Delete function:

Delete function will take the selected row object as input parameter; we will find the rowindex using input parameter. Using row index we will find CustomerID of selected row and delete the record. Additionally before deleting the record we will ask for user confirmation. Finally we will call the DeleteCustomer method in Factory service to delete the record in database.

Updated Angular code with Delete functionality

HTML

Delete Customer Method(WEBAPI)

 

, , , ,

1 Comment

How to populate Angular UIGrid in MVC using AngularJS

Description

In this article I will explain the steps for populating UI-Grid in angularjs from database using WebAPI. UI-grid is a powerfull tool which provides a table like representation. Apart from table like structure Ui-Grid also provides functionality like filtering, sorting, exporting etc.  You can find more details about UI-Grid from here

PreRequisites:

Ui-Grid is dependant on AngularJS.Hence ensure that you have added reference of Angular js on page.

Implementation:

Model:

To load the data from database, we are using EntityFramework and its related method. In this example I have used the DatabaseFirstApporach.  DatabaseFirstApporach lets the EnityData Model to generate classes, dbcontext etc from the database automatically. All other functionalities like database and model sync exists as is.

Follow the below procedures to generate Model for Customer database in Northwind database

  • Right click on the Model folder
  • Select Add option
  • And then select the New Item option
  • Choose Data from Installed Templates group
  • Select the ADO.NET Entity Data Model option and Provide a name for it
  • In the Entity Data Model Wizard, Select EF Designer from database and click on Next
  • Choose the Connection string options
    • If you already have connection string configured then you can select that from the available list.
    • If you don’t have the connection string configured then use the New Connection option and create the connection
  • Expand the Table option and then select the tables which you want
  • Click on Finish

You will have necessary class files generated in your solution now

Northwind

You can get more details about how to use DatabaseFirst approach from this link.

Controller (WebAPI)

In this example we are using WebAPI to load the data. The next procedure is to write code to fetch records from database using WebAPI.  For this demo I have used a basic select operation. You can modify this as per your need.

Another point to note here is UI-grid read data which is in Json format, Hence we need to ensure that the data which we return from controller is of Json format. We will use the JsonResult method for this.

View:

On View we will have the codes for UI-Grid and its related files. If you look at the design of UI-Grid it’s a div which will be styled to look like a table at runtime.

We need to add div with an attribute as ui-grid=”gridOptions”.  We add all the details from angular js code to gridOptions and UI-Grid at runtime uses this div to populate the grid.

RouteConfig Changes:

I have changed the Action Name from “Get” to “GetCustomer” to be more specific with what the method do. In order for api to identify the proper method add the below route setting to web api route config

Angular JS Script

Below are the code to fetch the data from database and populate it to UI-Grid. I have used a factory to call the Get Customer method and used that in the main method.

 

, , , , ,

1 Comment

How to implement a GridView in MVC

Introduction:

In this article I am going to explain how to implement a GridView in MVC.

Prerequisites:

We are going to use Grid.Mvc Jquery plugin to implement GridView in MVC. You can get more details of this control from here.

To use Grid.Mvc we have to first add the necessary Jquery files to solution. One easy option to do this is to use the Nugget package to add Grid.Mvc to your solution. You can use the below command

install-package Grid.Mvc

After successful installation you will be able to see the below messages.

You can also download the file and add it to your solution manually.

Implementation:

Here I am going to explain how to implement GridView in MVC without using the table approach.

Model:

First you need to create a class in the Model. In this example I have used the DatabaseFirst approach.

You can use the below steps to generate the class files

  • Right click on the Model folder
  • Select Add option
  • And then select the New Item option
  • Select the Net Entity Data Model option and Provide a name for it
  • In the Entity Data Model Wizard, Select EF Designer from database and click on Next

If you already have connection string configured then you can select that from the available list.

If you don’t have the connection string configured then use the New Connection option and create the connection

  • Expand the Tableoption and then select the tables which you want
  • Click on Finish
  • You will have necessary class files generated in your solution now

You can get more details about how to use DatabaseFirst approach from this link.

Controller:

Now we have the Model files created from database. Next step is to fetch the data from database and then pass it to the View from Controller. We will have a basic select in EF for this demo. You can modify it as per your need.

  public ViewResult Index()
        {
            //Create db context object here this is test record
            AdventureWorksDbContext dbContext = new AdventureWorksDbContext();
            //Get the value from database and then Pass it View
            var items = dbContext.Addresses.Take(10);
            return View(items.ToList());
        }

View:

In View you can use the below code to create GridView in MVC. This will generate a very basic GridView in MVC View

@model IEnumerable<MvcApplication1.Models.Address>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!-- CSS Includes -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link href="@Url.Content("~/Content/Gridmvc.css")" rel="stylesheet" type="text/css" />
    <!-- Script Includes-->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="@Url.Content("~/Scripts/gridmvc.min.js")" type="text/javascript"> </script>
</head>
<body>
    <div style="width:550px">
        @*Refer the GridView reference here*@
        @using GridMvc.Html
        @Html.Grid(Model).Columns(columns =>
           {
               //Put the column details here
               columns.Add(s => s.AddressID).SetWidth(110).Sortable(true);
               columns.Add(s => s.AddressLine1).Sortable(true).SetWidth(110);
               columns.Add(s => s.City).Sortable(true).SetWidth(110);
               columns.Add(s => s.ModifiedDate).Sortable(true).SetWidth(110);
           }).WithPaging(20)
    </div>
</body>
</html>

Demo

Here I have used very little options, Grid.Mvc plugin supports variety of options like CustomColumns, Button controls in column, Editing in Gridview. You can get more details of this control from here.

, , ,

Leave a comment

How to load Dropdownlist from database in MVC or Populate Dropdownlist in MVC from database

Introduction:

In this article I am going to explain an easy way to populate dropdownlist in MVC.  There are lots of other options to populate dropdownlist in MVC, However here I am going to explain two options which I have come across.

Solution:

Model:

First you need to create a class in the Model. In this example I have used the DatabaseFirst approach.

You can use the below steps to generate the class files

  • Right click on the Model folder
  • Select Add option
  • And then select the New Item option
  • Select the Net Entity Data Model option and Provide a name for it
  • In the Entity Data Model Wizard, selectEF Designer from database and click on Next

If you already have connection string configured then you can select that from the available list.

If you don’t have the connection string configured then use the New Connection option and create the connection

  • Expand the Table option and then select the tables which you want
  • Click on Finish
  • You will have necessary class files generated in your solution now

Untitled

You can get more details about how to use DatabaseFirst approach from this link.

Controller:

Once the needed model files are generated now we need to create the code to get the data from database and then pass it to view for dropdownlist.

You can use the below code to get the value from database and pass it to ViewBag

 public ViewResult Index()
         {
             //Create db context object here 
             AdventureWorksDbContext dbContext = new AdventureWorksDbContext();
             //Get the value from database and then set it to ViewBag to pass it View
             IEnumerable<SelectListItem> items = dbContext.Employees.Select(c => new SelectListItem
                   {
                       Value = c.JobTitle,
                       Text = c.JobTitle
 
                   });
             ViewBag.JobTitle = items;
             return View();
         }
 

View:

Now you need to assign the values in ViewBag to dropdownlist like given below

@Html.DropDownList("JobTitle", "Select a Value")

You will have the dropdownlist populated with data now

, , , , ,

6 Comments