65.9K
CodeProject 正在变化。 阅读更多。
Home

使用部分视图和 jQueryUI 在 ASP.NET MVC4 中执行 CRUD 操作 - 第 2 部分

Snesh Prajapati
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.95/5 (82投票s)

2013 年 11 月 5 日

CPOL

5分钟阅读

viewsIcon

247882

downloadIcon

13581

使用部分视图和 jQueryUI 在 ASP.NET MVC4 中执行 CRUD 操作

介绍 

这是文章“在 ASP.NET MVC4 中使用部分视图执行 CRUD 操作”的第二部分。如果您尚未访问 第 1 部分，请务必前往，这将有助于更好地理解本文。在第一部分中，我们已经看到了如何通过调用相应的操作方法来在视图中显示培训数据。操作方法使用培训存储库，存储库从 XML 文件中读取数据。

注意： 我已在使用 Google Chrome 浏览器中测试了代码，对于其他浏览器，编辑弹出窗口可能无法令人满意地工作。  

在本文中，我们将学习如何使用部分视图对培训数据进行创建、编辑和删除操作。我们将使用 jQueryUI 来创建对话框和日历。以下是完整文章的概述：

第 1 部分 概述 

  • 部分视图和 jQueryUI 概述
  • 创建 ASP.NET MVC 4 应用程序
  • 创建 XML 文件作为数据库和培训存储库
  • 实现操作方法和视图

第 2 部分 概述

  • 实现创建操作
  • 实现编辑操作
  • 实现删除操作

现在开始第 2 部分。首先，我们将为培训实现创建操作...

实现创建操作

  1. 让我们通过右键单击Shared文件夹来创建一个部分视图。将其命名为CreatePartialView，通过勾选“创建强类型视图”选项来使其成为强类型视图，选择培训模型，并勾选“创建部分视图”选项，如下图所示：

    Add a Partial View to Project

    CreatePartialView.cshtml 文件将添加到Shared文件夹中。现在，我们可以随处使用此部分视图。请在下载的代码中查找CreatePartialView.cshtml中的代码，并将其添加到此文件中。

  2. 在Index.cshtml文件中，在表格结束标签之后，添加以下代码，如下图所示：
    <div id="createForm"></div>
  3. 在Scripts文件夹中添加appjs文件夹，并在新的appjs文件夹下添加index.js文件。为了选择时间，我们将使用timepicker。要创建timepicker，我们从这里下载了一个插件来创建 jQuery timepicker。如下图所示，将下载的jquery.timepicker.min.js添加进去：

    Adding TimePicker js file

    并将下载的jquery.timepicker.css添加到Content文件夹下的appcss文件夹中，如下图所示：

    Adding TimePicker css file

  4. 打开index.js文件并编写以下代码：
    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"
});

    这里selectedId是一个最初赋值为零的变量。
    $(".itemIdClass").hide();：此代码将从表中隐藏TrainingId列。
    $("#createForm").dialog();：dialog()是一个 jQueryUI 方法，它将创建一个对话框来显示“创建培训”表单。

  5. 在“创建培训”部分视图中，我们希望显示讲师列表作为下拉列表以供选择。为此，我们在CreatePartialView.cshtml文件中编写了以下代码，将讲师列表绑定到select标签。
    <select id="selectInstructor">
    <option selected="selected">Select Instructor </option>
</select>
  6. 在appjs文件夹下添加create.partialview.js，并在create.partialview.js文件中编写以下代码。不要忘记在CreatePartialView.cshtml文件中引用create.partialview.js。
    $(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));
                });
            }
        });
    });
  7. 在HomeController中，编写以下代码：
    [HttpGet]
public JsonResult GetInstructorList()
{
    var allInstructors = _trainingRepository.GetInstructor().ToList();
    return Json(allInstructors, JsonRequestBehavior.AllowGet);
}

    [HttpGet] 是一个用于获取数据的属性。GetInstructorList方法以 json 格式返回Instructors列表。

  8. 在index.js中，使用 jQuery Ajax 方法调用CreatePartialView()操作方法。
    $("#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");
        }
    });
});
  9. 在HomeController内部，添加以下代码，如下图所示：
    [HttpGet]
public ActionResult CreatePartialView()
{
    return PartialView("CreatePartialView");
}

    CreatePartialView是一个Action方法，每次调用时都会返回CreatePartialView.cshtml文件。

  10. 当您单击“创建新培训”按钮时，“创建培训”表单将以对话框的形式打开，如下图所示：

    Create Training Popup

  11. 提交按钮现在不起作用，因此让我们实现创建新培训的功能。打开create.partialview.js文件并编写以下代码，将新的培训数据发送到服务器。
    $("#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);
            
         });
});
  12. 在HomeController中，编写以下代码以调用存储库的InsertTraining()方法将数据保存到 XML 文件中。
    [HttpPost]
public void Create(Training training)
{
    _trainingRepository.InsertTraining(training);
}

    [HttpPost] 是一个用于发布数据的属性。Create方法接受新创建的培训对象。然后调用TrainingRepository.cs文件中实现的InsertTraining()方法。

  13. 运行应用程序，单击“创建新培训”按钮，将打开一个对话框。
  14. 在“创建培训”弹出窗口中，填写表单，然后单击提交按钮，数据将最终保存到Trainings.xml文件中。目前，没有对给定值的验证逻辑。

实现编辑操作

  1. 向Shared文件夹添加一个名为EditPartialView.cshtml的部分视图，以使其成为强类型视图。
  2. 编写与下载的EditPartialView.cshtml文件相同的代码。
  3. 在createForm div标签之后添加以下标签：
    <div id="editForm"></div>
  4. 在index.js文件中添加以下代码，以创建对话框来显示编辑培训表单：
     //jQueryUI method to create dialog box
        $("#editForm").dialog({
            autoOpen: false,
            modal: true,
            width: 450,
            title: "Edit Selected Training"
        });
  5. 在appjs文件夹下添加edit.partialview.js，并在edit.partialview.js文件中编写以下代码。不要忘记在EditPartialView.cshtml文件中引用edit.partialview.js。
    $(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);
        });
    });
  6. 在HomeController中，编写以下代码：
    [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);
    }
  7. 运行应用程序，单击“编辑”按钮，“编辑培训”对话框将打开，如下图所示：

    Edit Training Popup

  8. 编辑培训信息，当您单击“更新”按钮时，更新后的数据将保存到Trainings.xml文件中。

实现删除操作

  1. 让我们实现删除培训的功能。当我们单击“删除”按钮时，我们希望显示确认对话框。为此，请先在Index.cshtml文件中编写以下代码：
    <div id="deleteForm">
    <p>Please provide the confirmation to delete this training.</p>
    <input type="button" value="Yes" class="okDelete btnStyle" />
</div>
  2. 在index.js文件中添加以下代码，以创建对话框来显示编辑培训表单：
    //jQueryUI method to create dialog box
$("#deleteForm").dialog({
    autoOpen: false,
    modal: true,
    title: "Delete Selected Training"
});
  3. 编写 jQuery click函数，当单击删除按钮时将调用此函数：
    $(".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');
});
  4. 单击删除按钮。希望您会看到与下面类似的屏幕：

    Delete Training Popup

结论

上述文章提供了有关在 ASP.NET MVC4 中使用部分视图创建 CRUD 操作的演练。希望它有助于理解如何进行 AJAX 调用、使用部分视图和 jQueryUI。如果您在按照文章中的步骤操作时遇到任何问题，请参考下载的代码。如有任何疑问，请随时在此处评论。谢谢。

© . All rights reserved.