Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

R- Article Management System (A MVC ASP.NET Project)

Article:
Viewed:  3453 
Posted On:  10/15/2016 5:55:26 AM 
A MVC project R-Article Management System  

Here I am going to present a project in MVC asp.net. This is first part of my project.

About Project: Here I am going to make a project on Article Management system. Here user can post an article, view all article, Add new technology etc. In this first part I am going to show how we can show all article listing. Here I am going to use code first approach.

Now I am going to explain this step by step:

Open Visual Studio 2015 -> Add new project.

1.png

Image 1.

2.png

Image 2.

Initially in this project I am going to use 2 Table.


1.    
TBL_ARTICLE (To Save Article related information)
2.    TBL_TECHNOLOGY (To Save Technology information)

As I told you that I am going to use code first approach. So no need to create Data Base.  It will create automatically when you will run your application first.

So for each table you need in your project you have to create class in your application like below:  Right clicks on Models folder and add new class: 

Article.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations.Schema;
using System.ComponentModel.DataAnnotations;
 
 
namespace R_ArticleManagementSystem.Models
{
    [Table("TBL_Article")]
    public class Article
    {
        [Key]
        public int ArticleID { getset; }
 
        [MaxLength(500)]
        [Column(TypeName = "varchar")]
        public string ArticleTitle { getset; }

 
        [MaxLength(1000)]
        [Column(TypeName = "text")]
        public string ArticleDescription { getset; }
 
        [Column(TypeName = "text")]
        public string ArticleText { getset; }
       
        public DateTime ArticlePostDate { getset; }
 
        public int TechnologyID { getset; }
    }
}

3.png

Image 3.

Now again right click on Models folder and add a new class:
Technology.cs 
and do below code here.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
 
namespace R_ArticleManagementSystem.Models
{
    [Table("TBL_Technology")]
    public class Technology
    {
        [Key]
        [Required(ErrorMessage = "Technology is required")]
        public int TechnologyID { getset; }
 
        [MaxLength(25)]
        public string TechnologyName { getset; }
    }
}

4.png

Image 4.

Now add a context class which will responsible for data base activity.

 Ie: ArticleContext.cs and do below code here.

using System.Data.Entity;
 
namespace R_ArticleManagementSystem.Models
{
    public class ArticleContext : DbContext
    {
        public ArticleContext() : base("MyConnection")
        {
        }
        public DbSet<Article> Articles { getset; }
        public DbSet<Technology> Technologys { getset; }
    }
}

5.png


Image 5.

Here you will notice I am using :base("MyConnection") this MyConnection is my connection string which should exist in your web.config file like below:

<connectionStrings>
    <add name="MyConnection" connectionString="Data Source=.;database = R-ArticleManagement; integrated security=true"
                                                providerName="System.Data.SqlClient" />
    <add name="DefaultConnection" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\aspnet-R-
AticleManagementSystem-20160919025329.mdf;Initial Catalog=aspnet-R-ArticleManagementSystem-20160919025329;Integrated Security=True
"
      providerName="System.Data.SqlClient" />
  </connectionStrings>


6.png

Image 6.

Now run your application or you can run it after adding your desired controller and views if you don't have controller or views to run your application.

It will create database and tables in you data base server:

After running your application checks your SQL Server data base:

7.png

Image 7.

Right now insert some manual entry in your Data Base as I am going to show listing of article only in this part of project. In next part I will show how we can insert data in this project.

8.png

Image 8.

9.png

Image 9.

Now time to add a new controller -> Right click on Controller folder -> Add new controller->

10.png

Image 10.

11.png

Image 11.

Add ArticleController.cs: and do below code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using R_ArticleManagementSystem.Models;
 
namespace R_ArticleManagementSystem.Controllers
{
    public class ArticleController : Controller
    {
        ArticleContext db = null;
      
        public ArticleController()

        {
            db = new ArticleContext();
        }
 
        // GET: Article
        public ActionResult Index()
        {
            List<SelectListItem> technologyCategories = new List<SelectListItem>();
            technologyCategories.Add(new SelectListItem { Text = "Select Category", Value = "0", Selected = true });
            var techCategories = db.Technologys.ToList();
            foreach (var c in techCategories)
            {
                technologyCategories.Add(new SelectListItem { Text = c.TechnologyName, Value = Convert.ToString(c.TechnologyID) });
            }
            ViewBag.TechnologyList = technologyCategories;
            return View();
        }
 
        public JsonResult GetArticleByTechID(int techhId)
        {
            List<Article> articles = new List<Article>();
            articles = db.Articles.Where(x => x.TechnologyID == techhId).Take(10).ToList();

             return Json(articles, JsonRequestBehavior.AllowGet);
        }
    }
}


12.png

Image 12.

Now Right click on Index Action Method: -> Add new view

Index.cshtml

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#TechnologyList").change(function () {
            $.ajax({
                type: 'GET',
                url: '@Url.Action("GetArticleByTechID")',
                datatype: JSON,
                data: { 'techhId': $("#TechnologyList").val() },
                success: function (data) {
                    $('#ArticleLisitngTable tbody').empty();
 
                    $.each(data, function (i, item) {
                        var rows = "<tr>"
                + "<td>" + item.ArticleID + "</td>"
                + "<td>" + item.ArticleTitle + "</td>"
                + 
"<td>" + item.ArticleDescription + "</td>"  
              + 
"<td>" + item.ArticleText + "</td>" + "</tr>";

                        $('#ArticleLisitngTable tbody').append(rows);
                    });
                },
                error: function (data) { }
            });
        });
    });
</script>
<style type="text/css">
    .ArtTable {
        bordersolid 1px #DDEEEE;
        border-collapsecollapse;
        border-spacing0;
        width100%;
        fontnormal 13px Arialsans-serif;
    }
        .ArtTable thead th {
            background-color#ff6a00;
            bordersolid 1px #DDEEEE;
            color#ffffff;
            padding10px;
            text-alignleft;
        }
        .ArtTable tbody td {
            bordersolid 1px #b0ecee;
            color#ff0000;
            padding10px;
        }
    .ArtTable-rounded {
        bordernone;
    }
        .ArtTable-rounded thead th {
            background-color#ff6a00;
            bordernone;
            color#ffffff;
        }
            .ArtTable-rounded thead th:first-child {
                border-radius10px 0 0 0;
            }
            .ArtTable-rounded thead th:last-child {
                border-radius0 10px 0 0;
            }
 
        .ArtTable-rounded tbody td {
            bordernone;
            border-topsolid 1px #957030;
            background-color#ffffff;
        }
        .ArtTable-rounded tbody tr:last-child td:first-child {
            border-radius0 0 0 10px;
        }
 
        .ArtTable-rounded tbody tr:last-child td:last-child {
            border-radius0 0 10px 0;
        }
</style>
<table style="width:100%;padding:40pxfont-weight:boldfont-size:12pt;">
    <tr>
        <td style="padding-top:40pxbackground-color:#0094ffcolor:white">
            Select Article Category : @Html.DropDownList("TechnologyList")
        </td>
    </tr>
</table>
<br />
<table id="ArticleLisitngTable" class="ArtTable ArtTable-rounded">
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Article Description</th>
            <th>Article Text</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

 

Now Run your application:

13.png

Image 13.

14.png

Image 14.

15.png

Image 15.

16.png

Image 16.

Next part I will post complete functionality of this MVC project.

  Comment:
 
By Joseph  On  4/26/2017 6:55:27 AM
Hi Can you update this article for CRUD operation? thats helpful for me.
 
By Joseph  On  4/25/2017 11:55:42 PM
Hi I Expect your complete functionality of this MVC project.
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us