Exchange Html.Action() for an Ajax request

Question

I have a method that returns a ActionResult called through a Html.Action() directly on View using Razor.

This method is used to render a ComboBox of devExpress with the data I send a command SQL at the opening of view, where it takes a long time to carry the combobox from the screen, since for each 1 it must go in the database and bring the data from the past command.

Problem I want to exchange this call through Html.Action() for a javascript to load the data from combobox in the component click event, so I don’t waste the loading time of the view and click only when the user is actually using/clicking.

View:

@Html.Action("ComboBoxDataFilter", "SearchComboBox", new
        {
          controlName = "ComboBoxFILIAL",
          sql = "SELECT CODFIL, TAG, RAZSOC FROM FILIAL",
          fkField = "CODFIL",
          fields = "TAG, RAZSOC",
          descriptionFields = "Código, Razão Social",
          widthColumns = "30%,70%",
          width = "100%",
          showFormatString = true,
          showAdvancedFilter = false,
          showStandardFilter = false,
          showDropDownButton = true,
          inputHidden = "CODFIL",
          filter = "",
          eventSelectedIndexChanged = "function(s, e) { $('#CODFIL').val(ComboBoxFILIAL.GetValue()); onCodFilChange(); }",
          eventBeginCallback = "",
          filterfield = "RAZSOC",
          value = (Model == null || Model.CODFIL == null) ? 0 : Model.CODFIL
        })

public ActionResult ComboBoxDataFilter(string controlName, string sql, string fkField, string customFkField, string fields, string filter, string eventSelectedIndexChanged, string eventValueChanged, string eventBeginCallback, string eventEndCallback, string value, string sqlValue, string filterfield, string descriptionFields, string fkTable, string compositeFk, string displayFields, string inputHidden, string width, string widthColumns, bool showAdvancedFilter, bool showStandardFilter, bool showDropDownButton, bool showFormatString, string valueType, bool readOnly,  string view, Dictionary<string, object> parametros, bool showCleanButton = true)
{
  var model;
  return PartialView("SearchComboBoxFilter", model);
}

Answer 1

You can do something like this, create an object that receives all settings from your combobox and then send via post.

             var config ={
                    controlName = "ComboBoxFILIAL",
                      sql = "SELECT CODFIL, TAG, RAZSOC FROM FILIAL",
                      fkField = "CODFIL",
                      fields = "TAG, RAZSOC",
                      descriptionFields = "Código, Razão Social",
                      widthColumns = "30%,70%",
                      width = "100%",
                      showFormatString = true,
                      showAdvancedFilter = false,
                      showStandardFilter = false,
                      showDropDownButton = true,
                      inputHidden = "CODFIL",
                      filter = "",
                    eventBeginCallback = "",
                      filterfield = "RAZSOC",
             }


               $.ajax()({
                    url: "/ComboBoxDataFilter/SearchComboBox",
                    type: "POST",
				    data: config ,
                    dataType: "json"
                });

public ActionResult ComboBoxDataFilter(ComboBoxDataFilter config)
{

  JavaScriptSerializer ser = new JavaScriptSerializer();
  var model = ser.Deserialize<ComboBoxDataFilter>(config);

  return PartialView("SearchComboBoxFilter", model);
}