如何创建采用POST请求的Partial View并获取文本框输入参数？

一、将按钮从GET改为POST请求 #

你现在用<a>标签生成的是GET请求，因为<a>默认通过URL跳转发起GET请求。要改成POST，这里有两种实用方案：

方案1：用表单包裹（同步提交）

把按钮放在<form>里，指定method="post"，用ASP.NET MVC自带的Html.BeginForm生成表单更规范：

@model int

@using (Html.BeginForm("Edit", "YourControllerName", new { id = Model }, FormMethod.Post))
{
    <button type="submit" class="btn btn-primary btn-sm">
        <span class="glyphicon glyphicon-pencil"></span>
        <span>Save</span>
    </button>
}

记得把YourControllerName替换成你实际的控制器名称，点击按钮时就会以POST方式提交到Edit方法，同时携带id参数。

方案2：用Ajax异步POST（无页面跳转）

如果不想刷新页面，用jQuery Ajax发起POST请求会更灵活：

@model int

<button type="button" class="btn btn-primary btn-sm js-save-btn" data-id="@Model">
    <span class="glyphicon glyphicon-pencil"></span>
    <span>Save</span>
</button>

<script>
$(document).ready(function() {
    $('.js-save-btn').click(function() {
        var targetId = $(this).data('id');
        $.ajax({
            url: '@Url.Action("Edit")',
            type: 'POST',
            data: { id: targetId },
            success: function(response) {
                // 这里可以写成功后的逻辑，比如更新页面局部内容
            },
            error: function() {
                // 处理请求失败的情况
            }
        });
    });
});
</script>

二、传递文本框的所有值到Partial View #

分两种场景来处理，看你具体需求：

场景1：提交表单时把文本框值和按钮一起传给后台（同步提交）

如果文本框和按钮在同一个页面，直接把文本框放到刚才的<form>里，ASP.NET MVC的模型绑定会自动把表单里的所有字段值传给控制器的Edit方法。示例如下：

@model YourViewModel // 假设你有包含文本框字段的ViewModel

@using (Html.BeginForm("Edit", "YourControllerName", FormMethod.Post))
{
    <!-- 文本框示例 -->
    @Html.TextBoxFor(m => m.FirstTextField, new { @class = "form-control" })
    @Html.TextBoxFor(m => m.SecondTextField, new { @class = "form-control" })

    <!-- 提交按钮 -->
    <button type="submit" class="btn btn-primary btn-sm">
        <span class="glyphicon glyphicon-pencil"></span>
        <span>Save</span>
    </button>
}

对应的控制器方法可以直接接收ViewModel：

[HttpPost]
public ActionResult Edit(YourViewModel model)
{
    // 这里可以直接获取model.FirstTextField、model.SecondTextField的值
    // 处理业务逻辑...
    return RedirectToAction("Index");
}

场景2：把文本框值传给Partial View本身（渲染Partial时传递）

如果是要在渲染Partial View的时候，把当前页面文本框的值作为参数传给它，那需要用JavaScript先获取文本框的值，再通过Ajax加载Partial并传递参数：

$(document).ready(function() {
    $('.js-load-partial').click(function() {
        // 获取文本框的值
        var textVal1 = $('#FirstTextField').val();
        var textVal2 = $('#SecondTextField').val();
        
        $.ajax({
            url: '@Url.Action("YourPartialAction")',
            type: 'GET', // 也可以用POST，看你的Action方法定义
            data: { 
                text1: textVal1,
                text2: textVal2,
                id: @Model // 带上原来的id参数
            },
            success: function(html) {
                // 把返回的Partial View HTML插入到页面指定容器
                $('#PartialContainer').html(html);
            }
        });
    });
});

对应的控制器Action：

public ActionResult YourPartialAction(int id, string text1, string text2)
{
    // 组装Partial View需要的模型
    var partialModel = new PartialViewModel { Id = id, Text1 = text1, Text2 = text2 };
    return PartialView("YourPartialViewName", partialModel);
}

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