Ajax.BeginForm 无法提交下拉列表选择值答案

【问题标题】：Ajax.BeginForm cannot submit dropdown list selected valueAjax.BeginForm 无法提交下拉列表选择值
【发布时间】：2016-06-10 23:02:11
【问题描述】：

表格：

<div id="_SearchTab">
    @using (Ajax.BeginForm("searchResult", "Maintenance", null, 
        new AjaxOptions {
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "gridArea",
            HttpMethod = "Get",
            LoadingElementId = "loading"
        }, new { id = "searchByCriteria"}))
{
<table>
    <tr>
    <td>
     @Html.LabelFor(model => model.UNIT_CD)
                @Html.DropDownListFor(model => model.UNIT_CD, new SelectList(ViewBag.UnitList, "Value", "Text"), "-- Select a Unit --")
    </td> </tr>
    <tr>
    <td>
        @Html.LabelFor(model => model.PROGRAM_CD)
            @Html.TextBoxFor(model => model.PROGRAM_CD)
        </td> </tr>

       </table>
            <div id=" buttonHolder">
    <input id="Search" type="Submit" value="Search"/>
</div>
} 
</div>
<div id="gridArea">
   display data here
</div>

搜索结果操作：

[HttpGet]
        public PartialViewResult searchResult(string unitCode, string programCode) // showed both null in debug mode
        {
            // typical Linq stuff, if parameters are null, show all the data in the partial view, if at leastone of the parameters is not null, use it as search criteria
        }

问题是当我提交表单时，searchResult 操作的两个参数都显示null。我尝试了多种方法，包括以下这些：

<input id="Search" type="Submit" value="Search" 
onclick="javascript:$('searchByCriteria').submit()" />

还有这个：（带有 Javascript 运行时错误）

<input id="Search" type="Submit" value="Search" 
onclick ="@(Url.Action("searchResult", "Maintenance", new { unitCode = Model.UNIT_CD, programCode = Model.PROGRAM_CD})) "/>

并在表单参数中添加onsubmit=return searchForm()，并使用Javascript提交：

function searchForm() { 
    $("#gridArea").html("");
            // Load SearchResult partialview in gridArea div
            $("#gridArea").load(
                '@(Url.Action("searchResult", "Maintenance", new { unitCode = Model.UNIT_CD, programCode = Model.PROGRAM_CD}))'
                )
            return false;
}

以及Search按钮的点击事件的jQuery函数，

$("#Search").click(
            function () {
                // clear the grid area
                $("#gridArea").html("");
                // Load SearchResult partialview in gridArea div
                $("#gridArea").load(
                    '@(Url.Action("searchResult", "Maintenance", new { unitCode = Model.UNIT_CD, programCode = Model.PROGRAM_CD}))'
                )
        });

或表单的提交事件

$("#searchByCriteria").submit(function (event) {
            $("#gridArea").html("");
            $("#gridArea").load(
                '@(Url.Action("searchResult", "Maintenance", new { unitCode = Model.UNIT_CD, programCode = Model.PROGRAM_CD}))'
                )
        });

以上都不能将参数传递给控制器。谁能帮帮我？

【问题讨论】：

您的下拉列表名为UNIT_CD，因此参数需要为string UNIT_CD。而且您没有名为 programCode 的表单控件
对不起programCode 是一个文本框。让我在代码中添加它
那么参数需要为string UNIT_CD, string PROGRAM_CD（匹配表单控件的name属性
我重命名了两个参数。不工作
当然可以。至于您的其他尝试 - @Url.Action() 是剃须刀代码，在您将其传递给视图之前在服务器上对其进行评估，因此您添加的参数是模型的初始值（即null）。如果要保留原始参数名称，则需要为 .load('@Url.Action("searchResult", "Maintenance")', { unitCode: $('UNIT_CD').val(), programCode: $('#PROGRAM_CD').val() })

标签： jquery asp.net-mvc forms ajax.beginform

【解决方案1】：

可能您已经找到了解决方案。虽然你也可以走这条路，

[HttpGet]
public PartialViewResult searchResult(string unitCode, string programCode)
{
    unitCode= Request.Form["UNIT_CD"];
    programCode= Request.Form["PROGRAM_CD"];
    ...
}

【讨论】：