ASP.NET CORE 2 MVC中Ajax跳转显示视图问题求助

嘿，我明白你现在遇到的问题了——用jQuery DataTables点击行想打开编辑视图，但Ajax调用控制器后只能拿到返回结果，没法直接显示视图对吧？这其实是因为Ajax的工作机制默认就是异步获取数据，不会自动帮你渲染页面，得咱们手动处理一下。下面给你两种常用的解决方案，你可以根据需求选：

方案一：直接跳转到编辑页面（简单直接） #

这种方式不需要用Ajax加载视图，而是点击行后让浏览器直接请求编辑页面的URL，控制器返回视图后浏览器会自动渲染。

前端代码（DataTables行点击事件） #

@section scripts{
    <script>
        $(document).ready(function() {
            // 初始化DataTables
            var table = $('#yourDatatableId').DataTable({
                // 你的DataTables配置项，比如ajax数据源、列定义等
                ajax: '/YourController/GetData',
                columns: [
                    { data: 'Id' },
                    { data: 'Name' },
                    // 其他列...
                ]
            });

            // 绑定行点击事件
            $('#yourDatatableId tbody').on('click', 'tr', function() {
                // 获取当前行的数据
                var rowData = table.row(this).data();
                // 拿到ID（根据你的数据结构调整，比如rowData.Id）
                var recordId = rowData.Id;
                
                // 跳转到编辑页面
                window.location.href = '/YourController/Edit/' + recordId;
            });
        });
    </script>
}

后端控制器代码 #

public class YourController : Controller
{
    private readonly IYourService _service;

    public YourController(IYourService service)
    {
        _service = service;
    }

    // GET: 加载编辑视图
    public IActionResult Edit(int id)
    {
        var model = _service.GetById(id);
        if (model == null)
        {
            return NotFound();
        }
        // 返回编辑视图并传递模型
        return View(model);
    }

    // POST: 处理更新请求
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Edit(int id, YourViewModel model)
    {
        if (id != model.Id)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _service.Update(model);
                // 更新成功后跳回列表页
                return RedirectToAction(nameof(Index));
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", $"更新失败：{ex.Message}");
            }
        }
        // 验证失败，返回编辑视图显示错误
        return View(model);
    }
}

方案二：用模态框加载编辑视图（无刷新体验） #

如果不想跳转页面，想在当前页弹出模态框编辑数据，可以用这种方式：通过Ajax获取编辑视图的HTML，插入到模态框中显示，提交时再用Ajax更新数据库。

前端代码 #

首先在页面上添加一个空的模态框：

<!-- 编辑模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="modalContent">
            <!-- 这里会动态加载编辑视图的内容 -->
        </div>
    </div>
</div>

然后是DataTables和模态框的JS逻辑：

@section scripts{
    <script>
        $(document).ready(function() {
            var table = $('#yourDatatableId').DataTable({
                ajax: '/YourController/GetData',
                columns: [
                    { data: 'Id' },
                    { data: 'Name' },
                    // 其他列...
                ]
            });

            // 行点击加载编辑视图到模态框
            $('#yourDatatableId tbody').on('click', 'tr', function() {
                var rowData = table.row(this).data();
                var recordId = rowData.Id;

                $.ajax({
                    url: '/YourController/Edit/' + recordId,
                    type: 'GET',
                    success: function(viewHtml) {
                        // 将返回的视图HTML插入模态框
                        $('#modalContent').html(viewHtml);
                        // 显示模态框
                        $('#editModal').modal('show');
                    },
                    error: function() {
                        alert('加载编辑表单失败，请稍后重试');
                    }
                });
            });

            // 处理模态框内的表单提交（动态绑定事件）
            $(document).on('submit', '#editForm', function(e) {
                e.preventDefault(); // 阻止默认表单提交行为

                var formData = $(this).serialize();
                var formAction = $(this).attr('action');

                $.ajax({
                    url: formAction,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        if (response.success) {
                            // 更新成功：关闭模态框，刷新DataTables
                            $('#editModal').modal('hide');
                            table.ajax.reload();
                            alert('数据更新成功');
                        } else {
                            // 验证失败：重新加载带错误信息的视图到模态框
                            $('#modalContent').html(response);
                        }
                    },
                    error: function() {
                        alert('数据更新失败，请稍后重试');
                    }
                });
            });
        });
    </script>
}

后端控制器代码（适配Ajax请求） #

public class YourController : Controller
{
    private readonly IYourService _service;

    public YourController(IYourService service)
    {
        _service = service;
    }

    // GET: 加载编辑视图
    public IActionResult Edit(int id)
    {
        var model = _service.GetById(id);
        if (model == null)
        {
            return NotFound();
        }
        return View(model);
    }

    // POST: 处理更新请求，支持Ajax和普通请求
    [HttpPost]
    [ValidateAntiForgeryToken]
    public IActionResult Edit(int id, YourViewModel model)
    {
        if (id != model.Id)
        {
            return NotFound();
        }

        if (ModelState.IsValid)
        {
            try
            {
                _service.Update(model);
                // 如果是Ajax请求，返回JSON成功信息
                if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
                {
                    return Json(new { success = true });
                }
                // 普通请求跳回列表页
                return RedirectToAction(nameof(Index));
            }
            catch (Exception ex)
            {
                ModelState.AddModelError("", $"更新失败：{ex.Message}");
            }
        }

        // 验证失败：如果是Ajax请求返回视图HTML，否则返回视图
        if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
        {
            return PartialView(model); // 或者直接return View(model)，根据你的视图结构调整
        }
        return View(model);
    }
}

为什么原来的方法不行？ #

你之前用Ajax调用控制器动作，返回的视图HTML只会进入Ajax的success回调函数里，浏览器不会自动把这段HTML渲染成页面。所以必须手动把这些HTML插入到页面的某个元素中（比如模态框），或者直接跳转到控制器的URL让浏览器处理视图渲染。

内容的提问来源于stack exchange，提问作者Bicycle Dave