[CLOSED] MVC DirectEvent/Method ComboBox - Loading Data

[adelaney]

I have a combobox with which I am trying to load data via a DirectMethod. I have been reviewing this sample: https://examples2.ext.net/#/Form/Com...Linked_Combos/. However, I think there must be some difference to implementing this correctly in MVC. I am not getting any data back. Is there something obvious I am missing?

Here is my view:

@(Html.X.Window().ID("winReinsurerContacts") _
      .Hidden(True) _
      .Width(300) _
      .Height(150) _
      .Title("Edit Contact") _
      .BodyPadding(5) _
      .Resizable(False) _
      .Closable(False) _
      .Center() _
      .Modal(True) _
      .Layout(LayoutType.Anchor) _
      .Icon(Icon.Application) _
      .Items(
        Html.X.Hidden().ID("reinsurerRecordID"),
        Html.X.Hidden().ID("reinsurerID"),
        Html.X.ComboBox().ID("cboReinsurerLookup").FieldLabel("Contact") _
        .DisplayField("Text") _
        .ValueField("Value") _
        .Store(Html.X.Store.ID("wreinsurerContactStore") _
               .DirectEvents(sub(evts)
                                 evts.Load.Url = Url.Action("ReinsurerContacts", New With {.reinsurerID = 0})
               End Sub) _
               .AutoLoad(False) _
               .Model(Html.X.Model.Fields(
                      Html.X.ModelField.Name("Value"),
                      Html.X.ModelField.Name("Text"))
                      )
              )
        ) _
      .Buttons(Html.X.Button().Icon(Icon.Accept).Text("Update").Listeners(Sub(lstnr)
                                                                              lstnr.Click.Handler = "alert('got it!');"
                                                                          End Sub),
              Html.X.Button().Icon(Icon.Cancel).Text("Cancel").Listeners(Sub(lstnr)
                                                                             lstnr.Click.Handler = "#{winReinsurerContacts}.hide();"
                                                                         End Sub))
    )

Here is the controller:

<DirectMethod()> _
        Function ReinsurerContacts(ByVal reinsurerID As Integer) As ActionResult
            Dim rslt As New StoreResult()
            Dim o As New List(Of Object)
            Dim cbo As Ext.Net.ComboBox

                cbo = Me.GetCmp(Of Ext.Net.ComboBox)("cboReinsurerLookup")
                o.Add(New With {.Text = "Hello", .Value = "0"})
                o.Add(New With {.Text = "Hello1", .Value = "1"})
                cbo.GetStore().DataSource = o
                cbo.DataBind()
                

            Return Me.Direct()
        End Function

[Daniil]

Hi @adelaney,

Please use AjaxProxy.

I just committed this example on Razor to SVN.

Example View

@model System.Collections.IEnumerable

@{
    ViewBag.Title = "Ajax Linked Combos - Ext.NET MVC Examples";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section example
{
    @(Html.X().ComboBox()
        .ID("ComboBoxCountry")
        .Editable(false)
        .QueryMode(DataLoadMode.Local)
        .TriggerAction(TriggerAction.All)
        .SelectOnFocus(true)
        .EmptyText("Select a country")
        .Listeners(ls =>
            ls.Select.Handler = "App.ComboBoxCity.clearValue(); App.ComboBoxCity.getStore().load()"
        )
        .Items(
            new ListItem("Belgium", "BE"),
            new ListItem("Brazil", "BR"),
            new ListItem("Bulgaria", "BG"),
            new ListItem("Canada", "CA"),
            new ListItem("Chile", "CL"),
            new ListItem("Cyprus", "CY"),
            new ListItem("Finland", "FI"),
            new ListItem("France", "FR"),
            new ListItem("Germany", "DE"),
            new ListItem("Hungary", "HU"),
            new ListItem("Ireland", "IE"),
            new ListItem("Israel", "IL"),
            new ListItem("Italy", "IT"),
            new ListItem("Lithuania", "LT"),
            new ListItem("Mexico", "MX"),
            new ListItem("Netherlands", "NL"),
            new ListItem("New Zealand", "NZ"),
            new ListItem("Norway", "NO"),
            new ListItem("Pakistan", "PK"),
            new ListItem("Poland", "PL"),
            new ListItem("Romania", "RO"),
            new ListItem("Slovakia", "SK"),
            new ListItem("Slovenia", "SI"),
            new ListItem("Spain", "ES"),
            new ListItem("Sweden", "SE"),
            new ListItem("Switzerland", "CH"),
            new ListItem("United Kingdom", "GB")
        )
    )

    @(Html.X().ComboBox()
        .ID("ComboBoxCity")
        .TypeAhead(true)
        .QueryMode(DataLoadMode.Local)
        .ForceSelection(true)
        .TriggerAction(TriggerAction.All)
        .DisplayField("name")
        .ValueField("id")
        .EmptyText("Loading...")
        .ValueNotFoundText("Loading...")
        .Store(Html.X().Store()
            .AutoLoad(false)
            .Model(Html.X().Model()
                .IDProperty("Id")
                .Fields(
                    new ModelField("id", ModelFieldType.String) { Mapping = "Id" },
                    new ModelField("name", ModelFieldType.String) { Mapping = "Name" }
                )
            )
            .Proxy(Html.X().AjaxProxy()
                .Url(Url.Action("GetCities"))
                .Reader(Html.X().JsonReader().Root("data"))
            )
            .Parameters(ps =>
                ps.Add(new StoreParameter("country", "App.ComboBoxCountry.getValue()", ParameterMode.Raw))
            )
            .Listeners(ls =>
                ls.Load.Handler = @"var combo = App.ComboBoxCity;
                                    combo.setValue(records[0].get(combo.valueField));"
            )
        )
    )
}

Example Controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Ext.Net.MVC.Examples.Areas.Form_ComboBox.Ajax_Linked_Combos.Controllers
{
    public class Ajax_Linked_CombosController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetCities(string country)
        {
            return this.Store(City.GetCities(country));
        }
    }
}

Example Model

using System;
using System.Collections;
using System.Collections.Generic;
using System.Xml;
using System.Web;

namespace Ext.Net.MVC.Examples.Areas.Form_ComboBox.Ajax_Linked_Combos
{
    public class City
    {
        public static IEnumerable GetCities(string country)
        {
            XmlDocument xmlDoc = new XmlDocument();
            xmlDoc.Load(HttpContext.Current.Server.MapPath("~/Areas/Form_ComboBox/Content/Cities.xml"));
            List<object> data = new List<object>();

            foreach (XmlNode cityNode in xmlDoc.SelectNodes(string.Concat("countries/country[@code='", country, "']/city")))
            {
                string id = cityNode.SelectSingleNode("id").InnerText;
                string name = cityNode.SelectSingleNode("name").InnerText;

                data.Add(new { Id = id, Name = name });
            }

            return data;
        }
    }
}

[adelaney]

Thank you! That example was perfect. Now, this may be a dumb question, so I apologize in advance if it is. However, in theory, when should you use a direct event/method and when should you use a proxy?

[Daniil]

Commonly, it is more comfortable to use server proxies to load/save Stores data. It is its destination.

For other AJAX actions you can use a DirectEvent or DirectMethod.

[adelaney]

Well, I was almost there. My combo loads the data perfectly, but (there's always a but) the combo is in a popup window that is intended to look up a contact based on the ReinsurerID stored in a hidden field. This happens exactly as expected on the first load. However, on the second popup (when the ID is different), the hidden field gets a new value, but I cannot find a method to call on the combo (or the store) to dump the former list and re-call the proxy. I have tried .clearData(), .reload(), etc., but nothing is quite right. How can I accomplish this?

[adelaney]

Ok. I found the answer myself. For me, adding this to the combo did the trick:

.TriggerAction(TriggerAction.All) _
.QueryCaching(False) _
.QueryMode(DataLoadMode.Remote) _