MVC 根据下拉框的值局部刷新要更新的内容

谌vv

已于 2024-02-01 11:53:32 修改

阅读量779

点赞数

文章标签： mvc javascript jquery ajax

于 2022-06-15 00:04:35 首次发布

本文链接：https://blog.csdn.net/weixin_54629917/article/details/125287934

版权

本次操作具体流程如下:

1.通过选择下拉框的值进行局部的刷新。

以下有一个列子：比如选择班级后找到对应班级的学生，如图：

选择2003班后就会得到下面对应的学生信息,选择其他班也皆是一致（且会局部刷新区域内的所有,包括已经选中了的学生）

首先需要完成这些思路就要先理清楚, 首先要先获取下拉框里面的值之后再把下拉框内的值给到一个隐藏的文本框用来接受，并用onchange事件进行提交文本里面的值给控制器从而进行显示。

话不多说,代码做了注释，直接看即可,如果有哪里不清楚可以私信我

为了更加方便各位能够看懂,我写了一个简洁的界面给大家参考（点击了班级就会切换对应的学生,其中下面的文本框只是用于接受班级Id的,到时候直接隐藏即可）

具体代码如下:

1.index 视图页:


@{
    Layout = null;
}
@model Tuple<IEnumerable<Ajax_02.Models.TbClass>, IEnumerable<Ajax_02.Models.Student>>

<!DOCTYPE html>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script> @*需要导入这两个JS包*@
</head>
<body>
    @using (Ajax.BeginForm("Search", "Default", new AjaxOptions
    {
        UpdateTargetId = "JuBu",//更新的地方块 就是指这个元素id地方内的分部视图的内容可实现更新到主页面 异步刷新
        InsertionMode = InsertionMode.Replace,
        HttpMethod = "GET",//请求方式
    },new { @id= "Forrm" }))//这个id就是给表单的一个id值
    {
        <select class="form-select" name="TbClassID" id="TbClassID" style="font-size:1.2em;" onchange="">
            @foreach (var item in Model.Item1)//遍历出下拉框的值（输出所有的班级）
            {
                <option value="@item.ClassID"> @item.TbClassName </option>
                //ClassID指班级的ID,TbClassName指班级名称:如2003班
            }
        </select>

        <input type="text" id="ClassID" name="ClassIDs" value="" style="display:block" />//用于接受下拉框值的文本框

        <script type="text/javascript">
            $('#TbClassID').change(function () {
                //获取选中下拉框的属性值
                let val = $('#TbClassID option:selected').val();
                document.getElementById("ClassID").value = val;//把获取到的值赋给文本框
                $("#Forrm").submit() //获取表单的id后进行每一次点击下拉框的onchange的提交
            })
        </script>


            @*这里写根据班级获取学生的数据*@

            <div id="JuBu">@*这个div用于需要局部更新的界面,把他们包起来*@
                @foreach (var item in Model.Item2)
                {
                        <div>
                            <input type="checkbox" class="form-check-input ck" id="check1" name="StuNumber" style="margin-top:8px" value="">
                            @item.StuName (@item.StuNumber)
                        </div>
                    <div style="height:10px;"></div>
                }
            </div>

    }
    <div id="JuBu"></div>
</body>
</html>

2.控制器页面:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ajax_02.Models;

namespace Ajax_02.Controllers
{
    public class DefaultController : Controller
    {
        // GET: Default
        LoveManagementDBEntities db = new LoveManagementDBEntities();
        public ActionResult Index()
        {
            int TeacherID = 1;
            var objClass = db.TbClass.Where(m => m.TeacherID == TeacherID).First();//加载时获取第一个班级的id
            int cid = objClass.ClassID;
            IEnumerable<TbClass> classList = db.TbClass.Where(n=>n.TeacherID==TeacherID).ToList(); //此段是根据老师ID获取到管理的班级,这里给老师ID写个死值
            IEnumerable<Student> studentList = db.Student.Where(s => s.TbClassID == cid).ToList();//此段是根据班级ID获取到管理的学生
            var tupleModel = new Tuple<IEnumerable<TbClass>, IEnumerable<Student>>(classList, studentList); //Tuple可以用于接受四个以下的强类型的值
            return View(tupleModel);
        }
        /// <summary>
        /// AjaX异步刷新方法
        /// </summary>
        /// <param name="ClassIDs"></param>
        /// <returns></returns>
        public ActionResult Search(int ClassIDs)
        {
            IEnumerable<Student> Awp = db.Student.Where(n => n.TbClassID == ClassIDs).ToList();//根据班级Id查询学生
            return PartialView("_Myfirst", Awp);//返回分部页
        }
    }
}

3.分部视图页

@model IEnumerable<Ajax_02.Models.Student>
    @*//分部视图页*@
<div id="JuBu">@*//这里为需要异步刷新的内容*@
    @foreach (var item in Model)
    {

            <div>
                <input type="checkbox" class="form-check-input ck" id="check1" name="StuNumber" style="margin-top:8px" value="">
                @item.StuName (@item.StuNumber)
            </div>
    }
</div>

代码有点多,如果有哪里不懂的可以私信我。