Click here to Skip to main content
13,353,706 members (60,386 online)
Click here to Skip to main content
Add your own
alternative version


80 bookmarked
Posted 5 Nov 2013

CRUD Operations using Partial View and jQueryUI in ASP.NET MVC4 - Part 1

, 12 Nov 2013
Rate this:
Please Sign up or sign in to vote.
CRUD Operations using Partial View and jQueryUI in ASP.NET MVC4


In this article, we will learn how to achieve CRUD operations in ASP.NET MVC4 using Partial Views and jQueryUI. We will make Ajax call to the server to access partial view which are used for creating, editing and deleting training. We will call controller action methods with the help of jQuery $.ajax(). For the sake of convenience, XML file is used as a database. In this article series, you will learn:

  • What is Partial View
  • How to use jQueryUI methods to create controls
  • How to access data from XML files
  • How to create Partial View
  • How to use Partial View
  • How to use jQueryUI methods
  • How to use jQuery Ajax method to call the appropriate action method

Note: I have tested code using Google Chrome as browser, for other browsers Edit popup (explained in part 2 of this article) may not work pleasantly.  

To keep the size of article reasonable, this article is divided into two parts.

Part 1 Outline

  • Overview of Partial View and jQueryUI
  • Creating ASP.NET MVC 4 Application
  • Creating XML File as DB and Training Repository
  • Implement Action method and View

Part 2 Outline

  • Implement Create Operation
  • Implement Edit Operation
  • Implement Delete Operation

Let’s start with Part 1 here. First a few basics...

Overview of Partial View and jQueryUI

Partial View

Partial view allows us to use the same code using Razor and HTML tags in multiple pages in the application. Partial view is good to use where you need to use the same code on more than one view. We know if we need to display something in all pages, it is better to put it in layout pages of MVC application. In ASP.NET Web Form, we have master page to define the core layout shared by all other pages. But if you want to add some functionality not to all, but only to few pages, then partial view is the right option. For example, functionalities like create product, edit product, etc.

Here in the code example, we are using partial views for create, edit and delete forms for training. In standard ASP.NET MVC project templates, partial view can be added to any folder inside the Views folder but those partial views cannot be used by the views outside the folder. For example, if you add a partial view to Home folder, it can be used only by the views inside the Home folder. If we add partial view to Shared folder which is not associated to any controller and those can be used in any view in the whole application, it increases the reusability of code to a great extent.


jQueryUI extends the underlying jQuery library to provide a collection of rich and interactive widgets built to enhance the user interfaces of web applications. It's the official UI library for jQuery. By default, jQueryUI comes with Visual Studio 2012. If you are using Visual Studio 2012, you will get all required jQueryUI libraries in Scripts folder and required CSS files in content folder. If you are not using Visual Studio 2012, you have to add jQueryUI libraries and CSS file by yourself. You can download jQueryUI package from here.

Note: We assume you have downloaded the attached sample code having the running project. If not, please do so as we are not providing the screen shots for all code here. Let us start with creating a demo application to achieve CRUD operations for training.

Creating ASP.NET MVC 4 Application

  1. Let us create a sample application by selecting ASP.NET MVC4 Web Application template and give it project name as CRUDWithAjax and click ok.

    Choose Application Template for ASP.NET MVC4

  2. Select a template as Basic Application. Visual Studio 2012 adds a CRUDWithAjax project in the solution as shown below in the screenshot:

    Choose Application Type

  3. Expand Content and Scripts folder. You will get all required jQuery, jQueryUI libraries and all CSS files in Content folder as shown below:

    Initial Project Structure

    As a good practice, we should not include the files which we are not using in the application. So let’s remove unnecessary files from Scripts and Content folder. Look into the below screenshot what we need and remove all other files in Scripts and Content folder.

    Required Files

  4. Open App_Start folder. Remove WebApiConfig.cs from this folder since we are not doing anything related with WebApi in this application.
  5. Open BundleConfig.cs file and remove unnecessary code from this file. Now code looks as given below:
    public static void RegisterBundles(BundleCollection bundles)
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

Creating XML File as DB and Training Repository

  1. Add Training.cs, ITrainingRepository.cs and TrainingRepository.cs file under Models folder. Write code as written in downloaded files.
    Training.cs file has the properties of Training entity.
    ITrainingRepository is an interface that has methods which we will need to perform CRUD operation.
    We need to implement those methods in TrainingRepository.cs file. Inside the constructor of TrainingRepository.cs file, path is given to Trainings.xml physical location. Here, Trainings.xml is working as a database.
  2. Add Trainings.xml file to App_Data folder as shown below:

    TrainingXML File

    Add data to Tranings.xml file as given in the downloaded code. Sample data is shown below:

    Training data in XML File

Implement Action Method and View

  1. Add a controller by right clicking on Controller folder, give it name as Home. Create the instance of TrainingRepository class and use this object to perform CRUD operations.
  2. In HomeController.cs file, add the following code in Index action method to return Index view filled with trainings.
    public ActionResult Index()
        List<Training> allTrainings = _trainingRepository.GetTrainings().ToList();
        return View(alltrainings);
  3. Add a view by right clicking on Index() action method, Index.cshtml file is being added to Views -> Home folder. To display our trainings on Index.cshtml file, write the following code:
    @model <IEnumerable<CRUDWithAjax.Models.Training>
        <script src="~/Scripts/appjs/jquery.timepicker.min.js"></script>
        <link href="~/Content/appcss/custom-style.css" rel="stylesheet" />
        <link href="~/Content/appcss/jquery.timepicker.css" rel="stylesheet" />
        <div  class="pageHeader" >
           <h2>Manage Trainings</h2>
        <table id="tbltraining" class="tblStyle">
            <tr  class="tblHearerRow">
                <th class="tblHearerCell" >Name
                <th class="tblHearerCell">Instructor
                <th class="tblHearerCell">Star tDate
                <th class="tblHearerCell">End Date
                <th class="tblHearerCell">Start Time
                <th class="tblHearerCell">Duration
                <th class="tblHearerCell">Actions
            @foreach (var item in Model)
                <tr class="tblRow">
                    <td id="itemId" class="itemIdClass tblColumn">
                        @Html.TextBoxFor(modelItem => item.ID)
                    <td class="tblColumn">
                        @Html.DisplayFor(modelItem => item.Name)
                    <td class="tblColumn">
                        @Html.DisplayFor(modelItem => item.Instructor)
                    <td class="tblColumn">
                        @Html.DisplayFor(modelItem => item.StartDate)
                    <td class="tblColumn">
                        @Html.DisplayFor(modelItem => item.EndDate)
                    <td class="tblColumn">
                        @Html.DisplayFor(modelItem => item.Time)
                    <td class="tblColumn">
                        @Html.DisplayFor(modelItem => item.Duration)
                    <td class="tblColumn">
                        <input type="button" value="Edit"
                        class="buttonEdit btnStyleOne" />
                        <input type="button" value="Delete"
                        class="buttonDelete btnStyleOne" />
            <div class="btnStyleTwo">
        <input type="button" value="Create new Training"
        class="buttonCreate btnStyleOne" />

    Here, using foreach function, we are iterating over the Model which is a list of trainings to display the data in a tabular form.

  4. Content folder has two files, custom-style.css and jquery.timepicker.css. Those files are having all styles related information. As of now, Index.cshtml is using only custom-style.css file. jquery.timepicker.css will use them later.

    Content Folder

  5. Now run the application. Hope you will get a similar screen as shown below:

    Final Output Page

    Here, you will get all trainings available in your XML database. But Create, Edit and Delete button is not working. In the next part, we will implement functionalities to achieve Create, Edit and Delete operations. 


In this article, we had a walkthrough to display trainings on Webpage. We understood how to use ASP.NET MVC 4 templates. To get training list, we used an XML file as database. We were reading data from XML file through a repository class which is used in the controller to serve the requests. In Part 2 of this article, we see how to do create, edit and delete operations using AJAX calls and Partial Views.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Snesh Prajapati
Software Developer
India India
I am a Software Developer working on Microsoft technologies. My interest is exploring and sharing the awesomeness of emerging technologies.

You may also be interested in...

Comments and Discussions

QuestionWhy do we need the interface Pin
ksyinc24515-May-16 9:07
memberksyinc24515-May-16 9:07 
AnswerRe: Why do we need the interface Pin
Snesh Prajapati5-May-16 15:48
mvpSnesh Prajapati5-May-16 15:48 
GeneralRe: Why do we need the interface Pin
ksyinc24516-May-16 9:19
memberksyinc24516-May-16 9:19 
AnswerRe: Why do we need the interface Pin
Snesh Prajapati7-May-16 4:23
mvpSnesh Prajapati7-May-16 4:23 
Questionjudi bola online Pin
Member 118216487-Jul-15 23:15
memberMember 118216487-Jul-15 23:15 
AnswerRe: judi bola online Pin
Snesh Prajapati2-Nov-15 22:19
mvpSnesh Prajapati2-Nov-15 22:19 
QuestionDatabase Pin
Member 1059208224-Mar-15 7:10
memberMember 1059208224-Mar-15 7:10 
AnswerRe: Database Pin
Snesh Prajapati25-Mar-15 4:33
mvpSnesh Prajapati25-Mar-15 4:33 
GeneralRe: Database Pin
Member 1059208225-Mar-15 6:45
memberMember 1059208225-Mar-15 6:45 
AnswerRe: Database Pin
Snesh Prajapati25-Mar-15 17:06
mvpSnesh Prajapati25-Mar-15 17:06 
GeneralMy vote of 5 Pin
codeproject_abhi19-Nov-14 19:49
membercodeproject_abhi19-Nov-14 19:49 
AnswerRe: My vote of 5 Pin
Snesh Prajapati19-Nov-14 21:17
professionalSnesh Prajapati19-Nov-14 21:17 
QuestionExcellent article Pin
codeproject_abhi19-Nov-14 19:47
membercodeproject_abhi19-Nov-14 19:47 
AnswerRe: Excellent article Pin
Snesh Prajapati19-Nov-14 21:18
professionalSnesh Prajapati19-Nov-14 21:18 
GeneralMy vote of 5 Pin
huyhoangle29-Oct-14 17:51
memberhuyhoangle29-Oct-14 17:51 
AnswerRe: My vote of 5 Pin
Snesh Prajapati29-Oct-14 18:22
professionalSnesh Prajapati29-Oct-14 18:22 
GeneralMy vote of 5 Pin
Gaurav.Kumar.Arora27-Oct-14 10:54
memberGaurav.Kumar.Arora27-Oct-14 10:54 
GeneralRe: My vote of 5 Pin
Snesh Prajapati27-Oct-14 18:11
professionalSnesh Prajapati27-Oct-14 18:11 
Questionabout popup Pin
chinmaya parija127-Jul-14 19:38
memberchinmaya parija127-Jul-14 19:38 
Questiongreat Pin
Member 939225824-May-14 8:20
memberMember 939225824-May-14 8:20 
QuestionNeed Help on Jquery Pin
Maria Norbert12-May-14 2:06
memberMaria Norbert12-May-14 2:06 
AnswerRe: Need Help on Jquery Pin
Snesh Prajapati12-May-14 7:58
professionalSnesh Prajapati12-May-14 7:58 
Generalthanks Pin
anshulgenious17-Apr-14 23:39
memberanshulgenious17-Apr-14 23:39 
AnswerRe: thanks Pin
Snesh Prajapati18-Apr-14 5:44
professionalSnesh Prajapati18-Apr-14 5:44 
QuestionGreat Pin
RAVI VADIVEL3-Mar-14 19:44
groupRAVI VADIVEL3-Mar-14 19:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.180111.1 | Last Updated 12 Nov 2013
Article Copyright 2013 by Snesh Prajapati
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid