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

Snesh Prajapati

4.95/5 (82 votes)

Nov 5, 2013

CPOL

5 min read

247217

13569

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

Download source - 6.1 MB

Introduction

This is the second part of the article “CRUD operations using partial views in ASP.NET MVC4”. If you have not visited Part 1, please do so, it would help to understand this part better. In the first part, we have seen how to display training data on the view by making a call to the appropriate action method. The action method uses training repository and repository reads the data from XML file.

Note: I have tested code using Google Chrome as browser, for other browsers Edit popup may not work pleasantly.

In this part, we will learn how to do Create, Edit and Delete operations on the training using partial views. We will be using jQueryUI to make the dialog box and calendars. Following is the outline of the complete article:

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 2 now. First, we will implement create operation for a training...

Implement Create Operation

Let us create a partial view by right clicking on Shared folder. Give it name as CreatePartialView, make it strongly typed by checking the checkbox for “Create a strongly-typed views” option, select training model and check the checkbox “Create a partial view” option, as shown below:

CreatePartialView.cshtml file will be added to the Shared folder. Now, we can use this partial view anywhere. Please find the code written in CreatePartialView.cshtml in downloaded code and add similar to those in this file.
In Index.cshtml file, just after the table closing tag, add the following code as shown below:
```
<div id="createForm"></div>
```
Add appjs folder in Scripts folder and add index.js file under new appjs folder. For selecting the time, will use timepicker. To create timepicker, we have downloaded a plugin to create jQuery timepicker from here. Add downloaded jquery.timepicker.min.js as shown below:

And add downloaded jquery.timepicker.css to appcss folder under the Content folder as shown below:
Open index.js file and write the following code:
```
var selectedId = 0;
$(document).ready(function () {
    $(".itemIdClass").hide();
    $("#deleteForm").hide();
});
//jQueryUI method to create dialog box
$("#createForm").dialog({
    autoOpen: false,
    modal: true,
    width: 450,
    title: "Create Training"
});
```
Here selectedId is a variable that is initially assigned to zero.
$(".itemIdClass").hide();: This code will hide TrainingId column from table.
$("#createForm").dialog();: dialog() is a jQueryUI method that will create a dialog box to show the Create Training form.
On Create training partial view, we want to show instructor list as dropdown to select a instructor. For this, we have written the following code in CreatePartialView.cshtml file to bind instructor list to the select tag.
```
<select id="selectInstructor">
    <option selected="selected">Select Instructor </option>
</select>
```

Add create.partialview.js under the appjs folder and write the following code in create.partialview.js file. Do not forget to give the reference for create.partialview.js on CreatePartialView.cshtml file.

$(document).ready(function () {
       //Create jQuery timpicker
        $("#timepicker").timepicker();
           //Create jQueryUI datepicker
           $("#startdatepicker").datepicker();
           //Create jQueryUI datepicker
           $("#enddatepicker").datepicker();
           
           $.ajax({
            //Call GetInstructorList action method
            url: "/Home/GetInstructorList",
            type: 'Get',
            success: function (data) {
                $.each(data, function (i, value) {
                    $('#selectInstructor').append
                    ($('<option>').text(value).attr('value', value));
                });
            }
        });
    });

In HomeController, write the following code:

[HttpGet]
public JsonResult GetInstructorList()
{
    var allInstructors = _trainingRepository.GetInstructor().ToList();
    return Json(allInstructors, JsonRequestBehavior.AllowGet);
}

[HttpGet] is an attribute used to get the data. GetInstructorList method returns Instructors list as json form.

In index.js, use jQuery Ajax method to call CreatePartialView() action method.

$("#buttonCreate").button().click(function () {
    $.ajax({
       //Call CreatePartialView action method
       
        url: "/Home/CreatePartialView",
        type: 'Get',
           success: function (data) {        
            $("#createForm").dialog("open");
            $("#createForm").empty().append(data);
            $("#editForm").hide();
        },
        error: function () {
            alert("something seems wrong");
        }
    });
});

Inside the HomeController, add the following code as shown below:
```
[HttpGet]
public ActionResult CreatePartialView()
{
    return PartialView("CreatePartialView");
}            
```
CreatePartialView is an Action method whenever it will be called will return CreatePartialView.cshtml file.
When you click on Create new Training Button, Create Training form will open as a dialog box as shown below:

Submit button is not working now, so let us implement the functionality to create a new training. Open create.partialview.js file and write the following code to send new training to the server.

$("#submit-button").click(function () {
    // On submit button click close dialog box
    $("#createForm").dialog("close");
    
    //Set inserted values
    var name = $("#trainingname").val();
    var selectInstructor = $("#selectInstructor").val();
    var startdatepicker = $("#startdatepicker").val();
    var enddatepicker = $("#enddatepicker").val();
    var timepicker = $("#timepicker").val();
    var duration = $("#duration").val();
    
    // Call Create action method
    $.post('/Home/Create', { "name": name, 
    "instructor": selectInstructor, "startdate": startdatepicker, 
                             "enddate": enddatepicker, 
                             "time": timepicker, "duration": duration },
        function () {
            alert("data is posted successfully");
            window.location.reload(true);
            
         });
});

In HomeController, write the following code to call InsertTraining() method of repository to save data in an XML file.
```
[HttpPost]
public void Create(Training training)
{
    _trainingRepository.InsertTraining(training);
}            
```
[HttpPost] is an attribute used to post the data. Create method accepts the newly created training object. Then call InsertTraining() method is implemented in TrainingRepository.cs file.
Run the application, click on “Create new Training” button, a dialog box will open.
In “Create Training” popup, fill the form and when you click on submit button, data will be saved finally in Trainings.xml file. As of now, there is no validation logic for the given value.

Implement Edit Operation

Add a Partial View named as EditPartialView.cshtml to Shared folder to make it strongly-typed.
Write the same code as written in downloaded EditPartialView.cshtml file.
Add the following tag just after the createForm div tag:
```
<div id="editForm"></div>
```

Add the following code in index.js file to create dialog box to show edit training form:

 //jQueryUI method to create dialog box
        $("#editForm").dialog({
            autoOpen: false,
            modal: true,
            width: 450,
            title: "Edit Selected Training"
        });

Add edit.partialview.js under the appjs folder and write the following code in edit.partialview.js file. Do not forget to give the reference for edit.partialview.js on EditPartialView.cshtml file.

$(document).ready(function () {
    //Create jQuery timpicker
    $("#edittimepicker").timepicker();
      //Create jQueryUI datepicker
        $("#startdatepicker").datepicker();
        $("#enddatepicker").datepicker();
        $.ajax({
            url: "/Home/GetInstructorList",
            type: 'Get',
            success: function (data) {
                $.each(data, function (i, value) {
                    ('#editselectInstructor').append($
                    ('<option>').text(value).attr('value', value));
                });
            }
        });
    });
    
    $("#update-button").click(function () {
        $("#editForm").dialog("close");
        
        var id = $("#traininId").val();
        var name = $("#name").val();
        var instructor = $("#editselectInstructor").val();
        var startdatepicker = $("#startdatepicker").val();
        var enddatepicker = $("#enddatepicker").val();
        var timepicker = $("#edittimepicker").val();
        var duration = $("#duration").val();
     // Call Edit action method
        $.post('/Home/Edit', { "id": id, "name": name, 
        "instructor": instructor, "startdate": startdatepicker, 
                                "enddate": enddatepicker, 
                                "time": timepicker, 
                                "duration": duration }, function () {
            alert("data is posted successfully");
            window.location.reload(true);
        });
    });

In HomeController, write the following code:

[HttpGet]
    public ActionResult EditPartialView(string id)
    {
        int selectedTrainingId = Convert.ToInt32(id);
        Training selectedTraining = _trainingRepository.GetTrainingByID(selectedTrainingId);
        
        return PartialView("EditPartialView", selectedTraining);
    }
    
[HttpPost]
    public void Edit(Training training)
    {
        _trainingRepository.EditTraining(training);
    }

Run the application, click on Edit button Edit Training dialog box will open as shown below:
Edit the training, when you click on Update button, updated data will be saved in Trainings.xml file.

Implement Delete Operation

Let us implement functionality to delete training. When we click on Delete button, we want to show confirmation dialog box. To do that, first write the following code in Index.cshtml file:

<div id="deleteForm">
    <p>Please provide the confirmation to delete this training.</p>
    <input type="button" value="Yes" class="okDelete btnStyle" />
</div>

Add the following code in index.js file to create dialog box to show edit training form:

//jQueryUI method to create dialog box
$("#deleteForm").dialog({
    autoOpen: false,
    modal: true,
    title: "Delete Selected Training"
});

Write jQuery click function, this function will be called when Delete button will be clicked:

$(".buttonDelete").button().click(function () {
    //Open the dialog box
    $("#deleteForm").dialog("open");
    //Get the TrainingId
    selectedId = $(this).parents('tr:first').children
    ('td:first').children('input:first').attr('value');
});

Click on Delete button. Hope you will get the similar screen as shown below:

Conclusion

The above article provided a walkthrough to create “CRUD operations using partial views in ASP.NET MVC4”. Hope it would be helpful to understand how to make AJAX calls, use Partial Views and jQueryUI. If you face any problem while following the steps given in the article, please refer to the downloaded code. In case of any query, feel free to comment here. Thanks.