Sending an array to jQuery UI Dialog

Question

I am creating an ASP.NET MVC application that has postcode lookup functionality. I capture the postcode from the user send it to a web service and have an array of addresses returned. I wuold like to display the array of addresses in something like the jQuery UI Dialog. The user can then select the correct address which is returned and populates the address fields. Is this possible using the dialog?

Answer 1

You will need to format the array as a JSON object and then read it with $.getJSON for example. It is easy to populate a combo box with the content of an array.

You can have the combo box inside a UI dialog - it is the same as if the combo box were always visible. In fact the dialog is just a part of the DOM being shown and hidden. It isn't any different from other DOM elements.

Answer 2

You could consider using textbox control instead as described in "jQuery Auto-Complete Text Box with ASP.NET MVC" article by Ben Scheirman.

Answer 3

You can use jQuery to inject HTML and then pop the dialog, like this:

function displayAddressList() {
    var url = '<%= Url.Action("List", "Address") %>';
    $.get(url, function(data) {
        $("#PopUp").html(data);
        $("#PopUp").dialog('open');
    });
}

HTML:

<div id="PopUp" title="Address List"></div>

So if your post handler code in your controller returns a View (a control), you can inject it and then pop the dialog.