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

Answer 1

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

Answer 2

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!