如何在控制器MVC C＃中获取选定的索引更改值

Question

I am getting value in a dropdown list and I wanted to get the selected value in controller when user select any value from the dropdown list. My view is -

@using (Html.BeginForm("ApReport", "Sales", FormMethod.Post))
{
    @Html.DropDownList("Ddl", null, "All", new { @class = "control-label"})

    @Html.Hidden("rddl")                                 
}

controller -

[HttpPost]
public ActionResult ApReport(ApReport Ddl)
{
  string Ddlvalue = string.Empty;
  if (Request.Form["rddl"] != null)
  {
    Ddlvalue = Request.Form["rddl"].ToString();
  }
}

but I am not getting any value. Also, I donot want to use any submit button.

Thanks in advance

Answer 1

The use of Ajax allows you as the developer to update the main view without reloading the entire page, as well as send data to the server in the background.

This is how I would have accomplished this task.

Firstly, I would have created an action in my controller which returns a JsonResult. This will return a JSON object to your calling jquery code, that you can use to get values back into your views. Here is an example of the action method.

[HttpGet]
public JsonResult YourActionName(string selectedValue) //Assuming key in your dropdown is string
{
    var result = DoYourCalculation(selectedValue);

    return Json(new { myResult = result }, JsonRequestBehavior.AllowGet);
}

Now, you need to add your jquery code. I would recommend you place this in a seperate javascript file referenced by your view.

Here is the JQuery code, with the ajax call to the Action in your controller. The Ajax call to the server is initiated by the 'change' event of your DropDown, handled in JQuery, as can be seen below.

    $(function () {
        $(document)
            .on('change', '#Ddl', function(){
                var valueofDropDown = $(this).val();
                var url = '/YourControllerName/YourActionName';
                var dataToSend = { selectedValue: valueofDropDown }

                $.ajax({
                    url: url,
                    data: dataToSend,
                    type: 'GET',
                    success: function (dataReceived) {
                        //update control on View
                        var receivedValue = dataReceived.myResult ;
                        $('YourControlIDToUpdate').val(receivedValue);
                }
            })
        });
    };