vendredi 10 juin 2016

Ajax.BeginForm cannot submit dropdown list selected value


Form:

<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>

searchResult action:

[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
        }

The problem is when I submit the form, searchResult action's both parameters show null. I have tried multiple approaches including these below:

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

And this: (with Javascript runtime error)

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

And adding onsubmit=return searchForm() to the form parameters, and use Javascript to submit:

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;
}

And jQuery functions for either Search button's click event,

$("#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}))'
                )
        });

or the form's submit event

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

None of the above can pass parameters to the controller. Can anyone help me please?


Aucun commentaire:

Enregistrer un commentaire