Обновить представление с новой моделью с помощью вызова AJAX

Question

У меня проблема с перезагрузкой View с использованием вызова AJAX.

Существует контроллер с именем Syzyf и два действия Index (одно без параметров и одно со строковым параметром).

В Index представлении есть флажки, из которых я создаю параметр действия.Действие вызывается кнопкой, которая вызывает функцию ниже.

Проблема в том, что я не могу загрузить View заново.Когда я отлаживал скрипт в консоли, я получил код 200 с новой моделью.Как обновить Index представление с помощью скрипта ниже?

$('#refreshTasks').click(function () {

    var checkboxesChecked = $('#checkBoxes input:checked');

    var priorities = [];

    checkboxesChecked.each(function () {
        var input = $(this);
        var id = input.attr('id');
        priorities.push(id);
    });

    var filter = JSON.stringify(priorities);

    $.ajax({
        type: "POST",
        url: "/Syzyf/Index",
        data: { filters: filter },
        success: function (result) {
        }
    });
});

И, наконец, действия:

public ActionResult Index()
    {
        if (CheckIfSyzyfConfigured(CustomMethods.GetUserId(User.Identity.Name)))
        {
            using (var ctx = new SyzyfContext())
            {
                ctx.Database.Connection.Open();
                using (var cmd = ctx.Database.Connection.CreateCommand())
                {
                    cmd.CommandText = "GetListTaskWeb";
                    cmd.CommandType = CommandType.StoredProcedure;
                    var param = cmd.CreateParameter();
                    param.ParameterName = "userId";
                    param.Value = CustomMethods.GetUserId(User.Identity.Name);
                    cmd.Parameters.Add(param);

                    using (var reader = cmd.ExecuteReader())
                    {
                        var model = Read(reader).ToList();
                        ctx.Database.Connection.Close();
                        return View(model);
                    }
                }
            }
        }
        else
        {
            return View("NotConfigured");
        }
    }

    [HttpPost]
    public ActionResult Index(string filters)
    {
        if (CheckIfSyzyfConfigured(CustomMethods.GetUserId(User.Identity.Name)))
        {
            using (var ctx = new SyzyfContext())
            {
                ctx.Database.Connection.Open();
                using (var cmd = ctx.Database.Connection.CreateCommand())
                {

                    cmd.CommandText = "GetListTaskWeb";
                    cmd.CommandType = CommandType.StoredProcedure;
                    var param = cmd.CreateParameter();
                    param.ParameterName = "userId";
                    param.Value = CustomMethods.GetUserId(User.Identity.Name);
                    cmd.Parameters.Add(param);

                    if (filters != null)
                    {

                        var test = JsonConvert.DeserializeObject<List<string>>(filters);
                        var priorsXml = test.Select(p => new XElement("prior", p));
                        var mainXml = new XElement("Priorities", priorsXml);
                        var xmlString = mainXml.ToString();

                        var param2 = cmd.CreateParameter();
                        param2.ParameterName = "statusFilter";
                        param2.Value = xmlString;
                    }

                    using (var reader = cmd.ExecuteReader())
                    {
                        var model = Read(reader).ToList();
                        ctx.Database.Connection.Close();
                        var json = JsonConvert.SerializeObject(model);
                        return View(model);
                    }
                }
            }
        }
        else
        {
            return View("NotConfigured");
        }
    }

Answer 1

Вам необходимо заменить свое представление на основе HTML-элемента.

var filter = JSON.stringify(priorities);

    $.ajax({
        type: "POST",
        url: "/Syzyf/Index",
        data: { filters: filter },
        success: function (result) {
             $('[HTML_element]').empty().html(result);
        }
    });

Примечание : возвращать только HTML, который вы хотите обновить (не всю страницу / частичное представление) или получать конкретный контент из result, возвращаемого контроллером.

Обновление : В таком случае всегда рекомендуется возвращать PartialView из контроллера.