Insert Update Delete Using Jquery Ajax and Modal Popup in Mvc

In the previous article, we talked about inserting, updating and deleting data in MVC without Entity Framework. In this post, we are going to do insert, update and delete functionality (crud operation) in MVC using Entity Framework with jquery calling ajax.

If you are also looking to perform list, insert, update and delete in an asp.net MVC view, then you are in the right place. Because in this article we are going to perform a CRUD operation in a single view in MVC5 using a bootstrap modal popup, that is, in this article we are going to use a bootstrap modal popup to perform a CRUD operation.

In this post, we’ll look at the following point.

• CRUD operations in MVC with bootstrap modal popup
• Insert, update, delete, i.e. cool operations with Jquery Ajax and modal operations.
• Setup in MVC with a query data table

So let’s start learning, step by step, how to easily accomplish this task in any project. We will try to create a simple view where users can see all the record lists in the table, with an add button to add new records to the database, an edit button to update existing records in the database, and delete links to remove existing records with a confirmation warning dialog.

we have divided the entire article into several parts.

1. Create a new ASP.NET MVC project for our task
2. Creating a database table to perform database operations
3. Adding the EntityFramework connection to our project
4. Creating a controller
5. Adding an action method to a controller
6. Create a view of the Method action
7. RouteConfig.cs file configuration
8. Start your project

Step 1 – Create a new ASP.NET MVC project

Step 2- Create a database table to perform database operations

Let’s create a database table, for our raw operation. I created a table called TblPatient with the columns Id, PatientName, PatientNumber, PatientEmail, Address and BloodGroup.

CREATE TABLE [dbo].TblPatient](
[Id] [int] IDENTITY(1,1) NOT NULL,
[PatientName] [nvarchar](250) NULL,
[PatientNumber] [nvarchar](100) NULL,
[PatientEmail] [nvarchar](150) NULL,
[Address] [nvarchar](500) NULL,
[Blood Type] [nvarchar](100) NULL,
CONSTRAINT [PK_TblPatient] PRIMARY KEY CLUSTERED
(
[Id] ASC
)
) ON [PRIMARY].

Step 3 – Add a link – our project framework

Try the next step and follow the screen diagram if you are new to entity framing.
Right click on the Model folder and select Add a new item =>Select Ado .net entity data model in the option and follow the steps in the image below.

A template class for the table is created (representing the structure of the database table), which we will use as the template class for the view.

Open TblPatient.cs and view the model class.

CrudJqueryAjax.Models namespace
{
using System ;
using System.Collections.Generic ;

public partial class TblPatient{ public int Id { get; set; }public string Patient Name { get; set; } public string PatientNumber { get; set; } public string PatientEmail { get; set; } public string Address { get; set; } Public stringBloodGroup { get; set; }}

Fourth step. Creating a controller

Now let’s add a controller to perform the database operations, right click on the Controller folder in the project and click Add to empty controller.

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

CrudJqueryAjax.Controllers
namespace {
public class PatientController : Controller
{
// GET : Patient
public ActionResult Index()
{
returns View();
}
}
}

Step 5. Add an action method to the controller

Now let’s write the logic in our Open PatientController and add the following action methods. Here, I’ll add five action methods to our controller.

1. To return an index view that displays a list of patients – Index()
2. Returns a list of all patients in the database – GetPatientList()
3. Return a single record from the database with Id- GetPatientbyID()
4. Action to create a record in the database – AddPatient()
5. To update records in the database – UpdatePatient()
6. To delete a record from the database – DeletePatient ()

PatientController.CS

using CrudJqueryAjax.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc ;

CrudJqueryAjax.Controllers
namespace {
public class PatientController : Controller
{
// GET : Patientprivate SampleRestApiEntities db = new SampleRestApiEntities() ;

// GET : Patient
public ActionResult Index()
{
return View() ;

}
public JsonResult GetPatientList()
{
return Json(db.TblPatients.ToList(), JsonRequestBehavior.AllowGet);
}
public JsonResult AddPatient(TblPatient tblPatient)
{
string status = succes;
try
{
db.TblPatients.Add(tblPatient);
db.SaveChanges();
}
catch(Exception ex)
{ status
= ex.Message;
}
retourneert Json(status, JsonRequestBehavior.AllowGet);

}
public JsonResult GetPatientbyID(int PatientId)
{
try
{
var Patient = db.TblPatients.Where(a => a.Id == PatientId).FirstOrDefault();
return Json(Patient, JsonRequestBehavior.AllowGet);
}
catch(Exception ex)
{
return Json(null, JsonRequestBehavior.AllowGet);
}

}
public update JsonResult Patient(TblPatient tblPatient)
{

string status = succes;
try
{
db.Entry(tblPatient).State = EntityState.Modified;
db.SaveChanges() ;

}
catch (Uitzondering ex)
{Status
= ex.Message ;

}
return Json(tblPatient, JsonRequestBehavior.AllowGet);
}
public JsonResult DeletePatient(int PatientId)
{ Line status
= succes;
try
{

var pateint = db.TblPatients.Find(PatientId);
db.TblPatients.Remove(pateint);
db.SaveChanges() ;

}
catch (Uitzondering ex)
{Status
= ex.Message ;

}
return Json(status, JsonRequestBehavior.AllowGet);
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base. Dispose (recycle);
}
}
}

SampleRestApiEntities is een DbContext-object van het entiteitenkader waarvan de naam kan worden gevonden in het web.config of context.cs bestand.

6. Maak een view van de Methode actie

Klik nu met de rechtermuisknop op Index ActionMethod, voeg een blanco view toe, zorg ervoor dat Use Layout Page is aangevinkt, dit zal de layout en bootsrap bestanden voor ons project aanmaken.

Open nu index.cshtml en kopieer de onderstaande code.

Index.cshtml

@{
ViewBag.Title = Index ;
}

Patiënten opnemen

@* Tabel om lijst van databankrecords weer te geven *@
Een nieuwe patiënt toevoegen

Pop-up sjabloon voor het toevoegen en bijwerken van een patiëntendossier.

×

Een patiënt toevoegen

@* verborgen bestand om de Id op te slaan @

Patiëntennaam

Patiëntnummer

Patiënt e-mail

Adres

Bloedgroep

Patiënt
aanmaken Patiënt
bijwerken Sluiten

Stap 7 – Configureer het bestand RouteConfig.cs

Open het RouteConfig.cs bestand in de App_Start folder en verander de controller naam van Home=>Patient
, want als we de index view willen openen in de patient controller als de applicatie start.

Maak nu een project en voer het uit in een browser.

Broncode downloaden

Waarom bootstrap gebruiken in mvc?

Bootstrap is een framework dat over het algemeen gebruikt kan worden om snel een website te ontwerpen. Bootstrap bestaat uit vooraf geschreven CSS- en JavaScript-bestanden, waarin veel klassen zijn voorgedefinieerd. Deze klassen worden gebruikt om typografie, HTML formulieren, responsive pagina’s te maken. Websites gebouwd met Bootstrap zijn aantrekkelijker en sneller.

Vandaag de dag worden bijna alle soorten websites gebouwd in Bootstrap. Als je in de web design business zit, is dit een zeer belangrijk javascript framework voor elke web designer. Het kan worden gebruikt om lichtgewicht, mobielvriendelijke websites te ontwerpen.

Bootstrap is het meest populaire HTML, CSS en JavaScript framework voor het maken van een responsive en gebruiksvriendelijke website. Het downloaden en gebruiken ervan is volledig gratis. Het is een raamwerk dat wordt gebruikt voor eenvoudige en snelle webontwikkeling.

Bootstrap is ontwikkeld door Twitter-medewerkers Mark Otto en Jacob Thornton met een van hun teams. Op dit punt willen we u voor de goede orde vertellen dat ze het oorspronkelijk Twitter Blueprint noemden omdat ze het wilden gebruiken als een interne tool voor Twitter, en dat was de belangrijkste reden voor de ontwikkeling ervan.

Het was echter later, op de 19e. Augustus 2011, vrijgegeven als een open source project genaamd Bootstrap op GitHub. Zodat meer mensen het konden gebruiken, werd het meteen erg populair, en vandaag de dag gebruiken ontwikkelaars over de hele wereld het om responsive websites te maken.

Als je het via een CDN gebruikt, is het heel makkelijk. Om Bootstrap te gebruiken, moet u echter enige basiskennis hebben van HTML en CSS.
Om Bootstrap te gebruiken, moet je CDN Bootstrap CSS, Javascript en AJAX toevoegen aan je HTML code.

Vervolgens kunnen alle vooraf ingestelde componenten (rasters, containers, typografie, formulieren, menu’s) worden gekopieerd en geplakt. Als u wilt, kunt u ook hun stijl wijzigen met een aangepaste CSS-code.

Hoe werkt Bootstrap?

Wanneer een webdesigner een website ontwikkelt met Bootstrap, hoeft hij niet veel te coderen. Bootstrap bevat al een heleboel code. Ze worden alleen gebruikt op de html-pagina.

Bootstrap bevat veel voorgedefinieerde CSS klassen die gemakkelijk kunnen worden gebruikt in uw pagina. Bootstrap werkt met het rastersysteem.

Dit verdeelt de hele pagina in gelijke kolommen en rijen. Voor elke rij en kolom zijn aparte CSS klassen aangemaakt, die naar behoefte in een webpagina kunnen worden gebruikt.

Het gebruik van Bootstrap heeft veel voordelen

Dit frame is zeer gemakkelijk te gebruiken. Als je CSS en html kent, kun je Bootstrap gebruiken. En je kunt het ook veranderen. Dit bespaart ook tijd, omdat de code al in Bootstrap aanwezig is. Dus als je wat veranderingen moet aanbrengen, hoef je niet veel te programmeren.

Hiermee kunt u gemakkelijk een responsive website maken. Als uw website responsive is, past hij zich aan de schermgrootte op elk platform of apparaat aan. Je kunt Bootstrap gratis gebruiken.

Als u een inline stijl wilt wijzigen die al aan Bootstrap is toegevoegd, kunt u dat gemakkelijk doen. U moet uw bootstrap code schrijven door uw CSS code te schrijven met CSS code.

Related Tags:

crud operation in modal popup mvc,how to create a modal popup in asp.net mvc 4 using jquery,how to create a modal popup in asp.net mvc 5 using jquery,basic crud operations using jquery ajax and modal popup in asp.net mvc4,crud operation mvc using partial view , jquery modal popup,insert, update, delete in mvc 4 using jquery ajax,Privacy settings,How Search works,jquery ajax in asp.net mvc – crud operations using json,mvc crud operations using jquery ajax with entity framework