Grab C# variable value from a HTML dropdown-menu to pass parameter to variable in Controller Object

Question

I have a question and I have no idea how to even start. I have this controller:

HomeController.cs

using dependencies;

namespace Automata.Controllers
{
    public class HomeController : Controller
    {
        public System.Data.DataTable dt_PagosRecibidos = new System.Data.DataTable();
        public ActionResult PagosRecibidos()
        {
            cargarPagosRecibidos();
            return View();
        }
        public void cargarPagosRecibidos()
        {
            string myVar = "";
            String SentaiAppServer = System.Configuration.ConfigurationManager.AppSettings["SentaiAppServer"].ToString();
            string sURL = SentaiAppServer + ("app/interfaces/bbva/sp_EstadoCuenta.html?fecha_ini=07/16/19&fecha_fin=07/16/19&interfazado=no&Sucursal=" + myVar + "&");
            System.Data.DataSet ds = clsUtilerias.ObtenerDSInterfaceSentai(sURL);
            dt_PagosRecibidos = ds.Tables[1];
        }
    }
}

I also have my HTML dropdown:

<div class="col-lg-2 col-md-3 form-group pull-right">
    <label>Sucursal:</label>
    <select id="sucursalTabla" onchange="myFilter()" class="form-control">
        <option value="" selected>Filtrar..</option>
        <option value="MY">Monterrey</option>
        <option value="GD">Guadalajara</option>
        <option value="MX">Mexico</option>
        <option value="PB">Puebla</option>
        <option value="VR">Veracruz</option>
        <option value="MD">Merida</option>
        <option value="SA">Saltillo</option>
    </select>
</div>

How can I make the option value="XX" equal to myVar in my controller?

Or is there any other way I can use a dropdown to change a variable in the object I have inside my Controller?

I will need to do the same thing with the date,

("app/interfaces/bbva/sp_EstadoCuenta.html?fecha_ini=07/16/19&fecha_fin=07/16/19&interfazado=no&Sucursal=" + myVar + "&");

fecha_ini=07/16/19
fecha_fin=07/16/19

those might be variables also such as

starte_date = picker.startdate
end_date = picker.enddate

Since you're apparently using ASP.NET MVC, why not just use `Html.DropDownListFor`? See [How to write a simple Html.DropDownListFor()?](https://stackoverflow.com/q/3057873/215552) — Heretic Monkey, Oct 09 '19 at 18:53
@EGC there's no myFilter function sorry about the copy&paste, do you have any suggestion about that function? — IceeFrog, Oct 09 '19 at 21:50

Awk11 · Answer 1 · 2019-10-10T12:21:41.497

The best way to do this is to set up an ajax call in a javascript function and send the data you need to your controller through an endpoint. So basically something like this:

Javascript:

$.ajax({
   type: "POST",
   url: "Home/GetInfo", //The controller class name (minus 'Controller') + '/' + Function Name
   data: {
      var: optionValue, //var being the name of the variable in the c# function and optionValue being the value of the dropdown
      date: date
   },
   success: function () {
      // Do whatever you want when the function returns successfully
      alert("Successfully sent data")
   },
   error: function (xhr, status, error) {
      // If something went wrong in making the call 
      // (it couldnt find the endpoint or an exception got called in the c# function), 
      // do something with the error data
      alert(error);
   }
});

C# function in HomeController

public void GetInfo(string var, DateTime date){
   string myVar = var;
   DateTime myDate = date;
}

Sorry sir but I dont understand how to implement this, can you please throw an example? — IceeFrog, Oct 09 '19 at 21:07
This code already pretty much is an example. Just put that ajax call into a function in javascript that gets called whenever you want it to, customize the variables in the data section of the ajax call to be whatever you need them to be, and that's it. I've added comments to the code to make it a little more clear. Hope this helps! — Awk11, Oct 10 '19 at 12:17

score 1 · Accepted Answer · answered Oct 09 '19 at 22:06

You could give something like this a go?

I referred to these existing answers for some code parts: html select (dropdown) control selected index changed event in asp.net & Dropdown selected index changed event not firing up

HTML

<div class="col-lg-2 col-md-3 form-group pull-right">
    <label>Sucursal:</label>
    <select id="sucursalTabla" OnSelectedIndexChanged="ddl_SelectedIndexChanged" AutoPostBack="True" class="form-control">
        <option value="" selected>Filtrar..</option>
        <option value="MY">Monterrey</option>
        <option value="GD">Guadalajara</option>
        <option value="MX">Mexico</option>
        <option value="PB">Puebla</option>
        <option value="VR">Veracruz</option>
        <option value="MD">Merida</option>
        <option value="SA">Saltillo</option>
    </select>
</div>

C#

using dependencies;

namespace Automata.Controllers
{
    public class HomeController : Controller
    {
        protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
       {
            //code here
       }

        public System.Data.DataTable dt_PagosRecibidos = new System.Data.DataTable();
        public ActionResult PagosRecibidos()
        {
            cargarPagosRecibidos();
            return View();
        }
        public void cargarPagosRecibidos()
        {
            string myVar = "";
            String SentaiAppServer = System.Configuration.ConfigurationManager.AppSettings["SentaiAppServer"].ToString();
            string sURL = SentaiAppServer + ("app/interfaces/bbva/sp_EstadoCuenta.html?fecha_ini=07/16/19&fecha_fin=07/16/19&interfazado=no&Sucursal=" + myVar + "&");
            System.Data.DataSet ds = clsUtilerias.ObtenerDSInterfaceSentai(sURL);
            dt_PagosRecibidos = ds.Tables[1];
        }
    }
}

To access the element specifically from the EventArgs e value, refer to the official documentation: HtmlSelect Class & DropDownList.SelectedIndex Property

Goodluck!

Grab C# variable value from a HTML dropdown-menu to pass parameter to variable in Controller Object

2 Answers2