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.
Image 1.
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 { get; set; }
[MaxLength(500)]
[Column(TypeName = "varchar")]
public string ArticleTitle { get; set; }
[MaxLength(1000)]
[Column(TypeName = "text")]
public string ArticleDescription { get; set; }
[Column(TypeName = "text")]
public string ArticleText { get; set; }
public DateTime ArticlePostDate { get; set; }
public int TechnologyID { get; set; }
}
}
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 { get; set; }
[MaxLength(25)]
public string TechnologyName { get; set; }
}
}
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 { get; set; }
public DbSet<Technology> Technologys { get; set; }
}
}
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>
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:
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.
Image 8.
Image 9.
Now time to add a new controller -> Right click on Controller folder -> Add new controller->
Image 10.
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);
}
}
}
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 {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
width: 100%;
font: normal 13px Arial, sans-serif;
}
.ArtTable thead th {
background-color: #ff6a00;
border: solid 1px #DDEEEE;
color: #ffffff;
padding: 10px;
text-align: left;
}
.ArtTable tbody td {
border: solid 1px #b0ecee;
color: #ff0000;
padding: 10px;
}
.ArtTable-rounded {
border: none;
}
.ArtTable-rounded thead th {
background-color: #ff6a00;
border: none;
color: #ffffff;
}
.ArtTable-rounded thead th:first-child {
border-radius: 10px 0 0 0;
}
.ArtTable-rounded thead th:last-child {
border-radius: 0 10px 0 0;
}
.ArtTable-rounded tbody td {
border: none;
border-top: solid 1px #957030;
background-color: #ffffff;
}
.ArtTable-rounded tbody tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
.ArtTable-rounded tbody tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
</style>
<table style="width:100%;padding:40px; font-weight:bold; font-size:12pt;">
<tr>
<td style="padding-top:40px; background-color:#0094ff; color: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:
Image 13.
Image 14.
Image 15.
Image 16.
Next part I will post complete functionality of this MVC project.