Question

I have the following markup on my page

<td colspan="2">
    <table border="0" cellpadding="3" cellspacing="1" width="100%">
    <tr><td colspan="2"><%= Html.LabelFor(model => model.CustomerID)%></td></tr>
    <tr>
        <td width="85%">
            <%= Html.DropDownListFor(model => model.CustomerID, Model.CustomerList, new { id = "customerSelect", style = "width: 380px" })%>
            <%= Html.ValidationMessageFor(model => model.CustomerID, "*")%>
        </td>
        <td width="15%"><button id="btnAddCustomer" style="font-size: 0.7em;">Add new Customer</button></td>
    </tr>
    </table>
</td>

When the user click on the btnAddCustomer a modal dialog is open with the form to add a new customer. It compile the form and then press the save button.

How can I refresh the select element to include the latest added customer and select it?

Should I use ajax?

Answer 1

I’ve ended up on using JSON to get the options and added to select using jquery manipulation

The following code does the tricks

function refreshCustomers() {
    $.ajax({
        type: "post",
        dataType: "json",
        url: '<%= Url.Content("~/Contact/GetCustomers") %>',
        async: false,
        data: AddAntiForgeryToken({}),
        success: function (response) {
            $('#customerSelect').html('');
            $.each(response, function (i, customer) {
                $('#customerSelect').append($("<option></option>").attr("value", customer.Value).text(customer.Text));
            });
        }
    });
}