Implement TreeView in ASP.NET CORE

models


 public class City
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int StateId { get; set; }
        public virtual State State { get; set; }
    }

 public class State
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public virtual List<City> City { get; set; }
    }

 public class TreeViewNode
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string text { get; set; }
    }

 Controller Code

 [HttpGet]
 public IActionResult Index()
        {
            List<TreeViewNode> nodes = new List<TreeViewNode>();         

            //Loop and add the Parent Nodes.
            foreach (State type in _context.State)
            {
                nodes.Add(new TreeViewNode { id = type.Id.ToString(), parent = "#", text = type.Title });
            }

            //Loop and add the Child Nodes.
            foreach (City subType in _context.City)
            {
                nodes.Add(new TreeViewNode { id = subType.StateId.ToString() + "-" + subType.Id.ToString(), parent = subType.StateId.ToString(), text = subType.Name });
            }

            //Serialize to JSON string.
            ViewBag.Json = JsonConvert.SerializeObject(nodes);
            return View();
        }

[HttpPost]
        public ActionResult Index(string selectedItems)
        {
            List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
            return RedirectToAction("Index");
        }

cshtml file 


<div id="jstree">
</div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <input type="hidden" name="selectedItems" id="selectedItems" />
    <input type="submit" value="Submit" />
}
@section scripts{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#jstree').on('changed.jstree', function (e, data) {
                var i, j;
                var postedItems = [];
                for(i = 0, j = data.selected.length; i < j; i++) {

                    //Fetch the Id.
                    var id = data.selected[i];

                    //Remove the ParentId.
                    if(id.indexOf('-') != -1){
                        id = id.split("-")[1];
                    }

                    //Add the Node to the JSON Array.
                    postedItems.push({
                        text: data.instance.get_node(data.selected[i]).text,
                        id: id,
                        parent: data.node.parents[0]
                    });
                }

                //Serialize the JSON Array and save in HiddenField.
                $('#selectedItems').val(JSON.stringify(postedItems));
            }).jstree({
                "core": {
                    "themes": {
                        "variant": "large"
                    },
                    "data": @Html.Raw(ViewBag.Json)
                    },
                "checkbox": {
                    "keep_selected_style": false
                },
                "plugins": ["wholerow", "checkbox"],
            });
        });
    </script>
}

Save and Display Binary Images from Database in DataGridView in Windows Forms

In this article, I am going to show you, How to show images in DataGridView in Windows forms c#. Its easy to bind the DataGridView with the database table which is contain binary image. You can check this code to bind the DataGridView with the image using Entity Framework.


using System;
using System.IO;
using System.Linq;
using System.Windows.Forms;

namespace BankingApplication_Tutorial
{
    public partial class Form4 : Form
    {
        public Form4()
        {
            InitializeComponent();
        }

        private void Form4_Load(object sender, EventArgs e)
        {
            dataGridView1.AutoGenerateColumns = false;
            dataGridView1.ColumnCount = 2;
            dataGridView1.Columns[0].Name = "Id";
            dataGridView1.Columns[0].HeaderText = "Image Id";
            dataGridView1.Columns[0].DataPropertyName = "Id";

            dataGridView1.Columns[1].Name = "Name";
            dataGridView1.Columns[1].HeaderText = "Name";
            dataGridView1.Columns[1].DataPropertyName = "Name";

            DataGridViewImageColumn Imagecolumn = new DataGridViewImageColumn();
            Imagecolumn.Name = "Data Image";
            Imagecolumn.DataPropertyName = "Data";
            Imagecolumn.HeaderText = "Image Show";
            Imagecolumn.ImageLayout = DataGridViewImageCellLayout.Normal;
            dataGridView1.Columns.Insert(2, Imagecolumn);
            dataGridView1.RowTemplate.Height = 100;
            dataGridView1.Columns[2].Width = 100;
            this.bindDataGridView();





        }

        private void bindDataGridView()
        {
            // throw new NotImplementedException();
            banking_dbEntities1 dbe = new banking_dbEntities1();
            var items = dbe.DataGridImages.ToList();
            dataGridView1.DataSource = items;
        }

        private void button1_Click(object sender, EventArgs e)
        {
            banking_dbEntities1 dbe = new banking_dbEntities1();
            using (OpenFileDialog dialog =  new OpenFileDialog())
            {
                if (dialog.ShowDialog() == DialogResult.OK)
                {
                    string filename = dialog.FileName;
                    byte[] bytes = File.ReadAllBytes(filename);
                 
           
            DataGridImage img = new DataGridImage();
                    img.Name = Path.GetFileName(filename);
                    img.Data = bytes;
                    dbe.DataGridImages.Add(img);
                    dbe.SaveChanges();
                     
                     
                     
                        }

            }
            bindDataGridView();
        }
    }
}

Step By Step Guide to use WebAPI in ASP.NET CORE WebApplication

If you have to completed your WebAPI then must to know , how to use it in web application.  Now , you can see , how to use WebAPI in WebApplication.

WEBAPI Project
Step-1 :   Create Model first
public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

Step-2 :  Create Data Context Class

public class Context : DbContext
    {
        public Context(DbContextOptions<Context> options) : base(options)
        {

        }
        public DbSet<Student> Students { get; set; }

    }

Step-3 :  Add Connection String into your Application Setting File

{
  "ConnectionStrings": {
    "DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-WebApplication1-6550C064-027F-4939-822B-5B4620D08657;Trusted_Connection=True;MultipleActiveResultSets=true"
  },
  "Logging": {
    "IncludeScopes": false,
    "LogLevel": {
      "Default": "Warning"
    }
  }
}

Step-4 :  Add Connection String in Startup file

  services.AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));


Step-5 Do Migration 
Step-6 :  Create Controller 

namespace WebApiTestApplication.Controllers
{
    [Route("api/[controller]")]
    public class StudentController : Controller
    {
        private Context _context;
        public StudentController(Context context)
        {
            _context = context;
        }
        [HttpGet]
        public List<Student> Get()
        {
            return _context.Students.ToList();
        }

        public IActionResult Index()
        {
            return View();
        }
    }}

Step- 7: Add new project Web Application in the same solution
Step-8 : Add Helper Class  also add View Model class

namespace WebApplication1.Helper
{
    public class StudentAPI
    {
        public HttpClient Initial()
        {
            var Client = new HttpClient();
            Client.BaseAddress = new Uri("http://localhost:56562/");
            return Client;
        }
    }

}

If you Know what is "56562" then must to watch the video

And the model class

namespace WebApiTestApplication.Models
{
    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
}

Step-9 :  Add A controller

namespace WebApplication1.Controllers
{
    public class HomeController : Controller
    {
        StudentAPI _api = new StudentAPI();

        public async Task<IActionResult> Index()
        {
            List<Student> student = new List<Student>();
            HttpClient client = _api.Initial();
            HttpResponseMessage res = await client.GetAsync("api/Student");
            if (res.IsSuccessStatusCode)
            {
                var result = res.Content.ReadAsStringAsync().Result;
                student = JsonConvert.DeserializeObject<List<Student>>(result);
            }
         
            return View(student);
        }


    }
}

Step-10  : Generate View as list type 

@model IEnumerable<WebApiTestApplication.Models.Student>

@{
    ViewData["Title"] = "Index";
}

<h2>Index</h2>

<p>
    <a asp-action="Create">Create New</a>
</p>
<table class="table">
    <thead>
        <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Id)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
@foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Id)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
}
    </tbody>
</table>



Dynamically Add or remove control in asp.net core using JavaScript

If you want to add some controls on your web browser, i mean to say if you want to add controls on run time then you can easily dome with any script control, without using c# code. So, here i used Java Script code to add controls on a page. And your code is

Index.cshtml

<form method="post">
    <div id="firstdiv">
        <input type="text" name="testinput" />
                <input type="button" value="add dynamic" onclick="DynamicText()"/>

            </div>
            <input type="submit" value="submit"/>
</form>

JS----file

function DynamicText() {
    var division = document.createElement('DIV');
    division.innerHTML = DynamictextBox("");
    document.getElementById("firstdiv").appendChild(division);
}
function DynamictextBox(value) {
    return '<div><input type="text" name="dyntxt" /><input type="button" onclick="ReTextBox(this)" value="Remove"/></div>';
}
function ReTextBox(div) {
    document.getElementById("firstdiv").removeChild(div.parentNode.parentNode);
}


If you want to use this code , learn :

How to Customize ViewImport.cshtml in ASP.NET CORE



Required to add or remove information of Tag Helper. I mean to say that If you want to use Tag helper into your application then must to use ViewImports.cshtml file.

ASP.NET CORE : How to Override the attribute in TagHelper

When you design custom tag Helper then you need to change the name of attribute. I mean to say that need to override the name of attribute. In C#, You can use annotation or you can say property. In square bracket simply type HtmlAttributeName property just before the class property. You can check  the video , if you want to do this


Online Movie Ticket Booking Project in ASP.NET MVC 6 || ASP.NET CORE

Finally, i decide to make a project in ASP.NET CORE. In last 30 days to try to build Online Movie Ticket booking system Project in ASP.NET Core. Finally, I build it. In this Project, I am taking two user , one is admin and another one is Visitor (who book the ticket). You can check the functionality of the project by video:


You can Buy this project Easily with minimum price. I resolve all bugs via team viewer. Just mail me to Buy it:

mail :     narenkumar851@gmail.com

Security of the project:

1. Authentication is based identity management which is provided by Microsoft.
2. Without Authenticate you can not book the ticket.
3. Anti-Forgery Token generated.
4. Policy based Claimed also mentioned.

Testing of the project

In this project, I apply Mock Testing to test the project. So, Single Solution we have three project , first one is Class Library Project for Data Access layer with Unit of work class, Second one is UI for Movie Ticket Booking system and the last one is Testing of the project.