MVC架构下如何实现SQL Server条目的查询、展示、更新与删除

当前基于ASP.NET MVC开发的条目管理模块，已完成SQL Server数据存储、新条目新增保存功能，需要补全已存条目的选择查看、编辑更新、删除功能，前端页面已预留更新按钮，其余功能暂未实现。

前端JS逻辑（仅新增功能可用） #

$(document).ready(function() {
    $("#btnSave").click(function() {
        SaveItem();
    });
});
function ResetItem() {
    $("#CategoryId").val("1");
    $("#ItemName").val("");
    $("#Description").val("");
    $("#ItemPrice").val("");
    $("#ImagePath").val("");
}
function SaveItem() {
    var formData = new FormData();
    formData.append("CategoryId", $("#CategoryId").val());
    formData.append("ItemName", $("#ItemName").val());
    formData.append("Description", $("#Description").val());
    formData.append("ItemPrice", $("#ItemPrice").val());
    formData.append("ImagePath", $("#ImagePath").get(0).files[0]);
    $.ajax({
        async: true,
        dataType: 'JSON',
        type: 'POST',
        contentType: false,
        processData: false,
        url: '/Item/Index',
        data: formData,
        success: function (data) {
            if (data.Success)
            {
                alert(data.Message);
                ResetItem();
            }
        },
        error: function() {
            alert("条目新增出现异常");
        }
    });
}

前端表单代码 #

<div class="container">
    <div class="col-md-4">
        <div class="form-group" id="txtbox2">
            分类:
            @Html.DropDownListFor(model => model.CategoryId, new SelectList(Model.CategorySelectListItem, "Value", "Text"),
                new { @class = "form-control" })
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group" id="txtbox3">
            条目名称:
            @Html.TextBoxFor(model => model.ItemName, new { @class = "form-control", autocomplete = "Off" })
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group" id="txtbox4">
            描述:
            @Html.TextBoxFor(model => model.Description, new { @class = "form-control", autocomplete = "Off" })
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group" id="txtbox5">
            条目价格:
            @Html.TextBoxFor(model => model.ItemPrice, new { @class = "form-control", autocomplete = "Off" })
        </div>
    </div>

    <div class="col-md-4">
        <div class="form-group" id="txtbox6">
            图片:
            @Html.TextBoxFor(model => model.ImagePath, new { type = "file", @class = "form-control" })
        </div>
    </div>

    <div>
        <input type="button" value="保存" name="save" class="btn btn-primary" id="btnSave" />
        &nbsp;
        <input type="button" value="重置" name="reset" class="btn btn-danger" />
        <input type="button" value="更新" name="update" id="btnUpdate"/>
    </div>
</div>

1. 后端接口补全 #

在ItemController中新增三个对应Action，对接SQL Server操作：

• 单条详情查询：接收条目ID入参，查询对应条目的全量字段返回JSON格式结果
• 条目更新：接收FormData格式的条目数据（必须包含条目主键ID），执行数据库更新逻辑，返回操作成功/失败状态
• 条目删除：接收条目ID入参，执行对应数据的删除逻辑，返回操作结果

注意：更新、删除操作必须校验主键ID有效性，涉及图片更新的场景要同步处理服务器上旧图片资源的清理，避免产生冗余文件。

2. 前端列表模块新增 #

在现有表单下方新增条目列表容器，页面首次加载时调用全量条目查询接口，将所有条目渲染为表格，每一行配置独立的「编辑」「删除」按钮：

• 点击编辑按钮：调用单条详情接口获取对应条目数据，填充到上方表单，同时隐藏保存按钮、显示更新按钮，将当前操作的条目ID存入表单隐藏域
• 点击删除按钮：弹出二次确认提示，用户确认后调用删除接口，操作完成后自动刷新条目列表

3. 前端交互逻辑补全 #

• 首先在表单内新增隐藏域存储当前编辑的条目ID：

  <input type="hidden" id="ItemId" value="0" />
  

• 给更新按钮绑定点击事件：逻辑与现有SaveItem方法基本一致，额外将隐藏域中的ItemId追加到FormData中，请求地址指向更新接口；请求成功后重置表单、切回新增状态（ItemId重置为0，显示保存按钮、隐藏更新按钮）、刷新条目列表
• 优化现有ResetItem方法：重置表单时同步将ItemId设为0，切换按钮的显示/隐藏状态
• 给列表中的删除按钮绑定事件：传入对应条目ID调用删除接口，根据返回结果提示用户并刷新列表

4. 边界逻辑处理 #

• 编辑条目时如果存在历史上传图片，需要在表单中展示已上传图片的预览，避免用户未重新选择图片就提交导致图片字段为空
• 所有提交类操作要加按钮禁用逻辑，防止用户重复点击产生重复数据
• 所有接口返回异常时要给出明确的错误提示，方便排查问题

内容的提问来源于stack exchange，提问作者Rasca Rafael