使用AJAX调用以新模型重新加载View

时间:2019-05-27 10:16:34

标签: c# jquery ajax asp.net-mvc

我在使用AJAX调用重新加载View时遇到问题。

有一个名为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");
        }
    }

1 个答案:

答案 0 :(得分: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总是一个好习惯。