Saturday 4 April 2020

Placeholder using html helper method in mvc



I have using without model class.

Type One:

First Method like as below type, it is using placeholder and null attribute type method
@Html.TextBox("firstname",null, new {placeholder = "enter your name"})


Type Two:


Second Method like as below type, it is using placeholder and without using null attribute type method

@Html.TextBox("firstname"," ", new {placeholder = "enter your name"})


Demo:




at No comments:
Labels:

Tuesday 18 February 2020

Asp.Net MVC GridView Crud Operation Using Entity FrameWork with Ajax jQuery


In this post, we'll learn how to perform Asp.Net Mvc gridview crud operation using Entity Framework such as insert, update and Delete.

Step 1:

Add Model Class:















Model Class.cs :

namespace MVC_GridCrud.Models
{
    using System;
    using System.Collections.Generic;
    
    public partial class Test
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Department { get; set; }
        public Nullable<System.DateTime> CreatedDate { get; set; }
    }
}

Solution File


Step 2:

Add Controller Class:

now, we are going to add new .cs class file as TestController.cs . is controller class file in controller folder.


TestController Code.cs


using System;

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_GridCrud.Models;

namespace MVC_GridCrud.Controllers
{
    public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            IMSEntities dbentity = new IMSEntities();
            List<Test> test = dbentity.Tests.ToList();

            // Add a Dummy Row.
            test.Insert(0, new Test());
            return View(test);
          
        }
        [HttpPost]
        public JsonResult InsertTest(Test test)
        {
            using (IMSEntities imsentity = new IMSEntities())
            {
                imsentity.Tests.Add(test);
                imsentity.SaveChanges();
            }
            return Json(test);
        }
        [HttpPost]
        public ActionResult UpdateTest(Test test)
        {
            using (IMSEntities entity = new IMSEntities())
            {
                Test objtest = (from c in entity.Tests where c.Id == test.Id select c).FirstOrDefault();
                objtest.Name = test.Name;
                objtest.Department = test.Department;
                objtest.CreatedDate = test.CreatedDate;
                entity.SaveChanges();
                              
            }
            return new EmptyResult();
        }
        [HttpPost]
        public ActionResult DeleteTest(int Id)
        {
            using (IMSEntities entities = new IMSEntities())
            {
                Test delobj = (from c in entities.Tests
                                     where c.Id == Id
                                     select c).FirstOrDefault();
                entities.Tests.Remove(delobj);
                entities.SaveChanges();
            }
            return new EmptyResult();
        }
    }
}

Step 3:

now, we are going to add view file as Test in view folder as file is Index.cshtml  




 cshtml code:

@model IEnumerable<MVC_GridCrud.Models.Test>
@{
    
    ViewBag.Title = "Index";
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <style type="text/css">
        body{
            font-family:Arial;
            font-size:10pt;
        }
        .table{
            border:1px solid #ccc;
            border-collapse:collapse;
        }
        .table th{
            background-color:#f7f7f7;
            color:#333;
            font-weight:bold;
        }
        .table th, .table td{
            padding:5px;
            border:1px solid #ccc;
        }
    </style>
</head>
<body>
    <table id="tbltest" class="table" cellpadding="0" cellspacing="0">
        <tr>
           <th style="width:100px">Id</th>
            <th style="width:150px">Name</th>
            <th style="width:150px">Department</th>
            <th style="width:150px">CreatedDate</th>
            <th style="width:150px"></th>
        </tr>
        @foreach(MVC_GridCrud.Models.Test test in Model)
        {
            <tr>
                <td class="Id">
                    <span>@test.Id</span>
                </td>
                <td class="Name">
                    <span>@test.Name</span>
                    <input type="text" value="@test.Name" style="display:none" />
                </td>
                <td class="Department">
                    <span>@test.Department</span>
                    <input type="text" value="@test.Department" style="display:none" />
                </td>
                <td class="CreatedDate">
                    <span>@test.CreatedDate</span>
                    <input type="text" value="@test.CreatedDate" style="display:none" />
                </td>
                <td>
                    <a class="Edit" href="javascript:;">Edit</a>
                    <a class="Update" href="javascript:;" style="display:none">Update</a>
                    <a class="Cancel" href="javascript:;" style="display:none">Cancel</a>
                    <a class="Delete" href="javascript:;">Delete</a> 
                 </td>
            </tr>
        }
    </table>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td style="width:150px">
                Name<br />
                <input type="text" id="txtname" style="width:140px"/>
            </td>
            <td style="width:150px">
                Department<br />
                <input type="text" id="txtdepartment" style="width:140px" />
            </td>
            <td style="width:150px">
                CreatedDate<br />
                <input type="text" id="txtCreatedDate" style="width:140px" />
            </td>
            <td style="width:200px">
                <br />
                <input type="button" id="btnAdd" value="Add" />
            </td>
        </tr>
    </table>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
 <script type="text/javascript">
     $(function () {
         //Remove  the dummy row if data present.
         if ($("#tbltest tr").length > 2) {
             $("#tbltest tr:eq(1)").remove();
         } else {
             var row = $("#tbltest tr:last-child");
             row.find(".Edit").hide();
             row.find(".Delete").hide();
             row.find("span").html('&nbsp;');
         }
     });


   // Bind data row

     function AppendRow(row, Id, Name, Department, CreatedDate) {
    
     //Bind Id.
     $(".Id", row).find("span").html(Id);
     //Bind Name.
     $(".Name", row).find("span").html(Name);
     $(".Name", row).find("input").val(Name);

     // Bind Department
     $(".Department", row).find("span").html(Department);
     $(".Department", row).find("input").val(Department);

     row.find(".Edit").show();
     row.find(".Delete").show();
     $("#tbltest").append(row);
     };

     //Add event handler.

     $("body").on("click", "#btnAdd", function () {
         var txtname = $("#txtname");
         var txtdept = $("#txtdepartment");
         var txtdate = $("#txtCreatedDate");
         $.ajax({
             type: "POST",
             url: "/Test/InsertTest",
             data: '{Name:"' + txtname.val() + '",Department:"' + txtdept.val() + '",CreatedDate:"' + txtdate.val() + '"}',
             contentType: "application/json; charset=utf-8",
             dataType: "json",
             success: function (r) {
                 var row = $("#tbltest tr:last-child");
                 if ($("#tbltest tr:last-child span").eq(0).html() != "&nbsp;") {
                     row = row.clone();
                 }
                 AppendRow(row, r.Id, r.Name, r.Department, r.CreatedDate);
                 txtname.val("");
                 txtdept.val("");
                 txtdate.val("");
             }
         });
     });

     //Edit event handler.

     $("body").on("click", "#tbltest .Edit", function () {
         var row = $(this).closest("tr");
         $("td", row).each(function () {
             if ($(this).find("input").length > 0) {
                 $(this).find("input").show();
                 $(this).find("span").hide();
             }

         });
         row.find(".Update").show();
         row.find(".Cancel").show();
         row.find(".Delete").hide();
         $(this).hide();
     });

     //Update event handler.

     $("body").on("click", "#tbltest .Update", function () {
         var row = $(this).closest("tr");
         $("td", row).each(function () {
             if ($(this).find("input").length > 0) {
                 var span = $(this).find("span");
                 var input = $(this).find("input");
                 span.html(input.val());
                 span.show();
                 input.hide();
             }
         });
         row.find(".Edit").show();
         row.find(".Delete").show();
         row.find(".Cancel").hide();
         $(this).hide();

         var test = {};
         test.Id = row.find(".Id").find("span").html();
         test.Name = row.find(".Name").find("span").html();
         test.Department = row.find(".Department").find("span").html();
         test.CreatedDate = row.find(".CreatedDate").find("span").html();
         $.ajax({
             type: "POST",
             url: "/Test/UpdateTest",
             data: '{test:' + JSON.stringify(test) + '}',
             contentType: "application/json;charset=utf-8",
             dataType: "json"
         });
     });

     //Cancel event handler.

     $("body").on("click", "#tbltest .Cancel", function () {
         var row = $(this).closest("tr");
         $("td", row).each(function () {
             if ($(this).find("input").length > 0) {
                 var span = $(this).find("span");
                 var input = $(this).find("input");
                 input.val(span.html());
                 span.show();
                 input.hide();
             }
         });
         row.find(".Edit").show();
         row.find(".Delete").show();
         row.find(".Update").hide();
         $(this).hide();

     });

     //Delete event handler.

     $("body").on("click", "#tbltest .Delete", function () {
         if (confirm("Do you want to delete this row?")) {
             var row = $(this).closest("tr");
             var Id = row.find("span").html();
             $.ajax({
                 type: "POST",
                 url: "/Test/DeleteTest",
                 data: '{Id: ' + Id + '}',
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (response) {
                     if ($("#tbltest tr").length > 2) {
                         row.remove();
                       
                     } else {
                         row.find(".Edit").hide();
                         row.find(".Delete").hide();
                         row.find("span").html('&nbsp;');
                         AppendRow(row, r.Id, r.Name, r.Department, r.CreatedDate);
                     }
                 }
             });
         }
     });
 </script>
</body>
</html>

Output:

Add View
























Edit View:
Update View:
Delete View:

Summary

1. In this article explain to MVC crud operation in gridview list using entity framework with ajax jquery.
2. this relationship between Model,Controller and View.
at 2 comments:
Labels:
Subscribe to: Posts (Atom)

Placeholder using html helper method in mvc

I have using without model class. Type One: First Method like as below type, it is using placeholder and null attribute type method ...