Как динамически добавить строку в HTML-таблицу (с данными сервера) в выпадающей ячейке в asp.net mvc

Question

У меня есть выпадающая ячейка, и после нажатия на элемент я хочу добавить строку в HTML-таблицу. Я сделал это, используя Javascript: (addRowToTable - базовая функция Javascript):

<script type='text/javascript'>
    $(document).ready(function() {
        $('#locations').change(function() {
            if (this.selectedIndex != 0) {
                var support = new Array("True", "False");
                addRowToTable(this.value, support , "Table");
                this.remove(this.selectedIndex);
                this.selectedIndex = 0;

            }
        });
    });
 </script>

но теперь я понял, что некоторые данные, которые мне нужно показать в новой строке таблицы, у меня нет на стороне клиента, поэтому мне нужно как-то:

• Передайте выбранное значение на сервер (действие контроллера), а затем верните оставшиеся атрибуты данных, обновите HTML-таблицу (ajax) новым значением на стороне клиента после получения полных данных обратно на сервер.

У кого-нибудь есть примеры попыток сделать что-то подобное?

Answer 1

Вы можете использовать метод jquery $. Ajax для получения сериализованных данных json:

 <script type='text/javascript'>
        $(document).ready(function() {
            $('#locations').change(function() {
                if (this.selectedIndex != 0) {
                    var support = new Array("True", "False");

                $.ajax({
                type: "POST",
                url: "/YourController/YourAction,
                dataType: "json",
                error: function(xhr, status, error) { },
                success: function(data) {

                    addRowToTable(this.value, data.This ,data.That, "Table");
                    this.remove(this.selectedIndex);
                    this.selectedIndex = 0;

                }
            });
        });
     </script>

и действие контроллера:

public JsonResult YourAction()
        {
            //do your stuff..

            return Json(new { This="this", That="that"});
        }

Answer 2

Я бы использовал методы jQuery Ajax http://docs.jquery.com/Ajax/jQuery.get#urldatacallbacktype

<script type='text/javascript'>
    $(document).ready(function() {
        $('#locations').change(function() {
            if (this.selectedIndex != 0) {
                $.get("test", { value:this.value }, function(data){
                    addRowToTable(this.value, data , "Table");
                    this.remove(this.selectedIndex);
                    this.selectedIndex = 0;
                });
            }
        });
    });
 </script>

Так что это сделает HTTP-запрос GET к / test на вашем сервере, передав параметр url со значением = все, что было выбрано (http://localhost/test?value=something). Когда запрос завершится, вы получите объект данных, переданный в обратный вызов, который вы можете использовать при добавлении вашей строки. Посмотрите на документы jQuery для получения дополнительной информации о том, что вы получаете и как это проверить (вы можете проверить тип ответа, успех или неудачу и т. д.).

Надеюсь, это поможет!