写不会的伤心小猪 2024-06-16 14:18 采纳率: 90%
浏览 5
已采纳

mvc怎么用ajax实现点击超链接下面的表格做出相应变化

img

就是点击上面选择区域之后 下边的 选择影城跟 时间一起切换，用的数据库是sql server 运行是vs2022

  • 写回答

3条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-06-16 14:18
    关注

    引自免费微信小程序：皆我百晓生

    为了解决你的问题，我们可以设计一个MVC架构的系统，其中使用Ajax来更新页面上的表格数据，当用户在页面上进行交互时（例如点击“选择区域”），后端将根据用户的请求动态生成并返回新的数据。

    步骤 1: 设计前端HTML结构

    首先，我们需要一个基本的HTML结构，包含用户可以互动的部分（如“选择区域”的下拉菜单）以及将被Ajax更新的表格部分。这里是一个示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选座购票</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h1>选座购票</h1>
    <div id="selections">
        <label for="region">选择区域:</label>
        <select id="region" name="region">
            <option value="广州">广州</option>
            <!-- 其他选项 -->
        </select>
    </div>

    <table id="cinemasTable">
        <thead>
            <tr>
                <th>选择影城</th>
                <th>放映时间</th>
                <th>语言版本</th>
                <th>放映厅</th>
                <th>现价/影院价格</th>
            </tr>
        </thead>
        <tbody id="cinemasBody">
            <!-- 动态填充内容 -->
        </tbody>
    </table>

    <script src="app.js"></script>
</body>
</html>

    步骤 2: 编写JavaScript/Ajax代码

    接下来，我们编写JavaScript代码，使用Ajax从服务器获取数据，并在用户选择不同区域时更新表格。这通常在app.js文件中完成：

    $(document).ready(function () {
    $('#region').on('change', function () {
        var selectedRegion = $(this).val();
        $.ajax({
            url: '/api/cinemas/' + selectedRegion,
            type: 'GET',
            success: function (data) {
                updateCinemaList(data);
            },
            error: function () {
                console.log('Error fetching cinemas');
            }
        });
    });

    function updateCinemaList(cinemas) {
        var tableBody = $('#cinemasBody');
        tableBody.empty(); // 清空现有数据

        $.each(cinemas, function (index, cinema) {
            var row = $('<tr>');
            row.append($('<td>').text(cinema.name));
            row.append($('<td>').text(cinema.showTime));
            row.append($('<td>').text(cinema.language));
            row.append($('<td>').text(cinema.hall));
            row.append($('<td>').text(cinema.price));
            tableBody.append(row);
        });
    }
});

    步骤 3: 后端逻辑

    在后端，你需要创建一个API端点来处理来自前端的请求。如果你使用的是ASP.NET MVC，这可能看起来像这样：

    public class CinemaController : Controller
{
    public ActionResult Index(string region)
    {
        // 假设你有一个方法可以从数据库中获取电影院列表
        var cinemas = GetCinemasByRegion(region);

        return Json(cinemas, JsonRequestBehavior.AllowGet);
    }

    private List<Cinema> GetCinemasByRegion(string region)
    {
        using (var context = new YourDbContext())
        {
            return context.Cinemas.Where(c => c.Region == region).ToList();
        }
    }
}

    在这个例子中，YourDbContext应该是你的EF Core上下文类，而Cinema模型应该包含所有必要的字段，如name, showTime, language, hall, 和 price。

    通过这些步骤，你应该能够创建一个响应式的网页，当用户选择不同的区域时，表格中的数据会动态更新。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 已采纳回答 9月27日
  • 创建了问题 6月16日

悬赏问题

  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 在虚拟机环境下完成以下，要求截图！
  • ¥15 求往届大挑得奖作品（ppt…）
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中，如何配置环境，可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见