You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

ASP.NET Razor视图实现多主键删除及保留搜索条件功能

嘿,我来帮你解决这个ASP.NET Razor里的删除功能问题!你提到的两个方案各有痛点,其实都能优化解决,我给你详细说说两种可行的实现方式:

方案一:优化单表单方案(推荐)

这个方案基于你最初的“整页单表单”思路,通过JS+隐藏字段解决删除标识传递的问题,同时天然保留原搜索条件,不需要额外处理。

实现步骤:

  1. 在主表单里添加三个隐藏字段,用于存储要删除行的联合主键
  2. 给每行的删除按钮绑定点击事件,点击时把当前行的三个主键值塞进隐藏字段,再提交表单
  3. 控制器里根据提交的动作(搜索/删除)执行对应逻辑,删除后用原搜索条件重新查询

Razor 视图代码:

@model SearchViewModel

@using (Html.BeginForm("Search", "YourController", FormMethod.Post, new { id = "mainSearchForm" }))
{
    <!-- 10个搜索文本框,这里用循环生成 -->
    @for (int i = 0; i < 10; i++)
    {
        <div>
            <label>搜索条件 @(i+1):</label>
            <input type="text" name="SearchConditions[@i]" value="@Model.SearchConditions[i]" />
        </div>
    }

    <!-- 存储删除用的联合主键隐藏字段 -->
    <input type="hidden" id="deleteKey1" name="DeleteKey1" />
    <input type="hidden" id="deleteKey2" name="DeleteKey2" />
    <input type="hidden" id="deleteKey3" name="DeleteKey3" />

    <!-- 搜索按钮,通过name区分动作 -->
    <button type="submit" name="ActionType" value="Search">搜索</button>

    <!-- 结果列表 -->
    <table border="1" cellpadding="8" style="margin-top:20px;">
        <thead>
            <tr>
                <th>字段1</th>
                <th>字段2</th>
                <th>字段3</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model.SearchResults)
            {
                <tr>
                    <td>@item.Field1</td>
                    <td>@item.Field2</td>
                    <td>@item.Field3</td>
                    <td>
                        <!-- 删除按钮,用data属性存储联合主键 -->
                        <button type="button" class="delete-btn" 
                                data-key1="@item.Field1" 
                                data-key2="@item.Field2" 
                                data-key3="@item.Field3">删除</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

<script>
    // 给所有删除按钮绑定点击事件
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            // 把当前行的主键值写入隐藏字段
            document.getElementById('deleteKey1').value = this.dataset.key1;
            document.getElementById('deleteKey2').value = this.dataset.key2;
            document.getElementById('deleteKey3').value = this.dataset.key3;
            
            // 修改表单提交的动作类型为Delete
            document.querySelector('button[name="ActionType"]').value = "Delete";
            // 提交表单
            document.getElementById('mainSearchForm').submit();
        });
    });
</script>

控制器代码:

public class YourController : Controller
{
    private readonly IYourRepository _repository; // 假设你的数据仓储

    public YourController(IYourRepository repository)
    {
        _repository = repository;
    }

    [HttpPost]
    public ActionResult Search(List<string> SearchConditions, string ActionType, string DeleteKey1, string DeleteKey2, string DeleteKey3)
    {
        var model = new SearchViewModel();
        // 确保搜索条件不为空,初始化10个空值
        model.SearchConditions = SearchConditions ?? Enumerable.Repeat(string.Empty, 10).ToList();

        // 如果是删除动作,先执行删除
        if (ActionType == "Delete" && !string.IsNullOrEmpty(DeleteKey1) && !string.IsNullOrEmpty(DeleteKey2) && !string.IsNullOrEmpty(DeleteKey3))
        {
            _repository.DeleteByCompositeKey(DeleteKey1, DeleteKey2, DeleteKey3);
        }

        // 用当前搜索条件重新查询结果
        model.SearchResults = _repository.Search(model.SearchConditions);

        return View(model);
    }
}
方案二:优化独立表单方案

如果你不想写JS,也可以给每行单独做表单,通过隐藏字段传递所有搜索条件来解决“无法获取原搜索条件”的问题。

实现步骤:

  1. 主搜索表单负责提交搜索请求
  2. 每行结果的删除表单里,除了放联合主键的隐藏字段,还要把10个搜索条件都做成隐藏字段
  3. 控制器处理删除后,用传递过来的搜索条件重新查询

Razor 视图代码:

@model SearchViewModel

<!-- 主搜索表单 -->
@using (Html.BeginForm("Search", "YourController", FormMethod.Post))
{
    @for (int i = 0; i < 10; i++)
    {
        <div>
            <label>搜索条件 @(i+1):</label>
            <input type="text" name="SearchConditions[@i]" value="@Model.SearchConditions[i]" />
        </div>
    }
    <button type="submit">搜索</button>
}

<!-- 结果列表,每行一个删除表单 -->
<table border="1" cellpadding="8" style="margin-top:20px;">
    <thead>
        <tr>
            <th>字段1</th>
            <th>字段2</th>
            <th>字段3</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.SearchResults)
        {
            <tr>
                <td>@item.Field1</td>
                <td>@item.Field2</td>
                <td>@item.Field3</td>
                <td>
                    @using (Html.BeginForm("DeleteAndSearch", "YourController", FormMethod.Post))
                    {
                        <!-- 传递联合主键 -->
                        <input type="hidden" name="Key1" value="@item.Field1" />
                        <input type="hidden" name="Key2" value="@item.Field2" />
                        <input type="hidden" name="Key3" value="@item.Field3" />

                        <!-- 传递所有搜索条件的隐藏字段 -->
                        @for (int i = 0; i < 10; i++)
                        {
                            <input type="hidden" name="SearchConditions[@i]" value="@Model.SearchConditions[i]" />
                        }

                        <button type="submit">删除</button>
                    }
                </td>
            </tr>
        }
    </tbody>
</table>

控制器代码:

public class YourController : Controller
{
    private readonly IYourRepository _repository;

    public YourController(IYourRepository repository)
    {
        _repository = repository;
    }

    [HttpPost]
    public ActionResult Search(List<string> SearchConditions)
    {
        var model = new SearchViewModel();
        model.SearchConditions = SearchConditions ?? Enumerable.Repeat(string.Empty, 10).ToList();
        model.SearchResults = _repository.Search(model.SearchConditions);
        return View(model);
    }

    [HttpPost]
    public ActionResult DeleteAndSearch(List<string> SearchConditions, string Key1, string Key2, string Key3)
    {
        // 执行删除
        _repository.DeleteByCompositeKey(Key1, Key2, Key3);

        // 用原搜索条件重新查询
        var model = new SearchViewModel();
        model.SearchConditions = SearchConditions;
        model.SearchResults = _repository.Search(model.SearchConditions);

        return View("Search", model);
    }
}
方案对比建议
  • 方案一更简洁,避免了重复的隐藏字段,适合搜索条件较多的场景,只是需要一点JS代码
  • 方案二完全不需要JS,纯后端处理,适合对前端JS不太熟悉的开发者,但会生成较多的隐藏字段

内容的提问来源于stack exchange,提问作者md1000

火山引擎 最新活动