ASP.NET MVC与C#工单状态编辑页物料新增后局部刷新方案咨询

1. 控制器新增接口 #

在Admin控制器中新增2个Action方法，分别处理物料新增和返回局部物料清单：

// 处理新增物料请求
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddMaterial(DisplayEC model)
{
    DbAccess da = new DbAccess();
    // 此处替换为你自己的保存物料逻辑，将数据写入数据库
    da.AddJobMaterial(model.DeptCode, model.Appid, model.JobC, model.JobMaterialId, model.MatrlQty);
    return Json(new { success = true });
}

// 返回物料清单局部视图
public ActionResult GetMaterialList(int deptCode, short appid, int jobC)
{
    DbAccess da = new DbAccess();
    var materialList = da.GetMaterialsConsumed(deptCode, appid, jobC);
    return PartialView("_MaterialList", materialList);
}

原StatusEdit方法无需修改，保留原有整页提交逻辑即可。 #

2. 新增物料清单局部视图 #

在视图文件夹下新建_MaterialList.cshtml局部视图，专门用来渲染物料列表：

@model List<EC.ViewModels.DispJobMaterial>

@for (int i = 0; i < Model.Count; i++)
{
    <tr class="h-divider_sts">
        <td style="width:50%">
            @Html.DisplayFor(x => x[i].MaterialText)
        </td>
        <td style="width:50%">
            @Html.DisplayFor(x => x[i].MaterialQty)
        </td>
    </tr>
}

3. 修改原视图代码 #

3.1 替换物料列表渲染逻辑 #

找到原视图中物料表格的tbody部分，替换为调用局部视图：

<table id="JbMatrl" class="table table-responsive-md table-hover" style="width:100%">
    <tbody id="MaterialListBody">
        @Html.Partial("_MaterialList", Model.ListJobMaterials)
    </tbody>
</table>

3.2 修改新增物料按钮属性 #

将新增物料按钮的type改为button，避免触发整页表单提交：

<button id="btnAdd" type="button" class="btn btn-info pull-left"><i class="fa fa-plus-square"></i>&nbsp;Add Material</button>

3.3 新增JS交互逻辑 #

在原有script代码中追加新增物料提交和局部刷新逻辑：

$(document).ready(function () {
    // 原有下拉框显示隐藏逻辑保留
    $("#ddlCategory").change(function () {
        var e = document.getElementById("ddlCategory");
        var value = e.options[e.selectedIndex].text;
        if (value == "Assignment Cancelled") {
            $('#Other').hide();
            $('#Other2').show();
        } else {
            $('#Other').show();
            $('#Other2').hide();
        }
    });

    // 新增物料提交逻辑
    $("#btnAdd").click(function () {
        // 收集当前表单参数
        var submitData = $("form").serialize();
        $.post("@Url.Action("AddMaterial", "Admin")", submitData, function (res) {
            if (res.success) {
                // 新增成功后刷新物料列表
                $.get("@Url.Action("GetMaterialList", "Admin")", {
                    deptCode: @Model.DeptCode,
                    appid: @Model.Appid,
                    jobC: @Model.JobC
                }, function (html) {
                    $("#MaterialListBody").html(html);
                    // 清空输入框方便下次录入
                    $("#JobMaterialId").val("");
                    $("#MatrlQty").val("");
                });
            }
        });
    });
});

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