Posts Tagged MVC

Getting started with MongoDB in Asp.Net Core

Introduction

In this article we will discuss on the procedures to build a simple application in Asp.Net Core which communicates with MongoDB database.

Description

This application will do the CRUD operation on a Mongo database and then displays the details in a table.

ThirdPartyTool Used

Robo 3T – is a third party tool which provides a lightweight MongoDB management tool

Implementation

Setting up MongoDB:

If you have not installed the mongodb exe then download and install the same from MongoDB Download Center

After installation of the database, in order to access the mongodb we have to start the MongoDB Process.

To start MongoDB, run mongod.exe in command prompt. Make sure you are running the command prompt from installation folder of Mongodb.  By default installation path is set as C:\Program Files\MongoDB\Server\3.6\bin\

Additionally we need a data directory to store all data in MongoDB. User can set the path for data files using the –dbpath option to mongod.exe

CommandStart

You can begin using the Robo 3T after starting mongodb process.

For this demo I have created a Collections namely Customer with 3 columns

Robo3T.png

Since the database is ready now we will start building the application. Follow along the article to create sample application

Below is a sample demonstration of the application we are going to make

demo.gif

Create a new Project in Visual Studio

CoreProject

And Select the Template for Asp.Net Core MVC Web Application

MVCCore

To interact with MongoDB from c# code, we need to install .NET MongoDB Driver which provides asynchronous interaction with MongoDB.  I utilized the below nugget commands to add driver into my project

Model Class

Lets make an entity class called “Customer” which fits the schema of the Customer table in the database

The class contains Id property of the type ObjectId. This property is used to match an item in MongoDB collections. We as well have another attribute, namely BsonElement which is applied to represent an “element” in the MongoDB collection.

Controller Methods

In Controller we will add code for reading, editing, creating and deleting records from MongoDB.  I have moved the code to retrieve the mongodb database details to a common method.

Views Code

Since this was a more of a MongoDB demo I have used the scaffolding option available with MVC to generate View. You can modify this as per your needs.

Index View

Create View

Delete View

Details View

Edit View

Conclusion

In this article we have looked into procedures to create a simple application in MVC Core using MongoDB as database.

You can download the source code for Asp.NetCoreMVCMongoDBDemo from GitHub.

 

Advertisements

, , , , , ,

Leave a comment

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

, , , , , , ,

Leave a 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

, , , , ,

7 Comments