通过Request.Form得到CheckBoxList当前所点选项的索引值

本文介绍如何在ASP.NET中通过CheckBoxList控件处理用户的点击事件,并获取被点击项的索引。该方法适用于需要响应用户交互并进行相应处理的应用场景。


也即得到目前用户是点击了哪个Item项 触发了回发

页面HTML部分
------------
<asp:CheckBoxList ID="CheckBoxList1" runat="server" AutoPostBack="True"
 OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
    <asp:ListItem Value="1" Text="1a"></asp:ListItem>
    <asp:ListItem Value="2" Text="2b"></asp:ListItem>
    <asp:ListItem Value="3" Text="3c"></asp:ListItem>
    <asp:ListItem Value="4" Text="4d"></asp:ListItem>
</asp:CheckBoxList>

页面cs部分
------------
protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
{
    //形如CheckBoxList1$2 其中CheckBoxList1为控件名 其后的2为触发回发事件的索引 索引从0开始
    string strCheck = Request.Form["__EVENTTARGET"].ToString();

    string strIndex = strCheck.Substring(strCheck.IndexOf("$")+1);
    this.TextBox1.Text = strIndex;
}

以上只是取得了点击的Item的索引
并没有判断用户是点选操作 还是 取消点选操作
更多功能可以再自动行添加

另 可参见 借助HiddenText 确定CheckBoxList当前的操作类型及点击的CheckBox

<template> <view class="container"> <!-- 顶部索引板块 --> <view class="index-section"> <u-form :model="filters" ref="uForm"> <u-row gutter="16"> <u-col span="6"> <u-form-item label="问卷标题" prop="title"> <u-input v-model="filters.title" placeholder="输入问卷标题" /> </u-form-item> </u-col> <u-col span="3"> <u-form-item label="状态" prop="status"> <u-select v-model="filters.status" :list="statusOptions" /> </u-form-item> </u-col> <u-col span="3"> <u-form-item label=" " prop="actions"> <u-button type="primary" @click="applyFilters">搜索</u-button> <u-button plain @click="resetFilters" style="margin-left: 20rpx">重置</u-button> </u-form-item> </u-col> </u-row> </u-form> </view> <!-- 问卷详情卡片 --> <view class="card"> <view class="card-header"> <text class="title">{{ survey.title }}</text> <u-tag :text="survey.status" :type="survey.status === 'published' ? 'success' : 'warning'" /> </view> <view class="card-body"> <u-row> <u-col span="4"> <view class="info-item"> <text class="label">创建人:</text> <text class="value">{{ survey.creator }}</text> </view> </u-col> <u-col span="4"> <view class="info-item"> <text class="label">截止时间:</text> <text class="value">{{ survey.deadline }}</text> </view> </u-col> <u-col span="4"> <view class="info-item"> <text class="label">参与人数:</text> <text class="value">{{ survey.participants }}</text> </view> </u-col> </u-row> <view class="question-list"> <view v-for="(question, index) in survey.questions" :key="question.id" class="question-item"> <text class="question-title">{{ index + 1 }}. {{ question.title }}</text> <view v-if="question.type === 'radio'" class="options"> <u-radio-group v-model="question.answer"> <u-radio v-for="option in question.options" :key="option.value" :name="option.value" :label="option.label" /> </u-radio-group> </view> <view v-else-if="question.type === 'checkbox'" class="options"> <u-checkbox-group v-model="question.answer"> <u-checkbox v-for="option in question.options" :key="option.value" :name="option.value" :label="option.label" /> </u-checkbox-group> </view> <u-input v-else v-model="question.answer" type="textarea" /> </view> </view> </view> <view class="card-footer"> <u-button type="primary" @click="submitSurvey">提交问卷</u-button> <u-button plain @click="previewSurvey" style="margin-left: 20rpx">预览</u-button> </view> </view> </view> </template> <script> import { ref, reactive, onMounted } from 'vue'; import { request } from '@/utils/request'; export default { setup() { const survey = reactive({ id: '', title: '', status: 'draft', creator: '', deadline: '', participants: 0, questions: [] }); const filters = reactive({ title: '', status: '' }); const statusOptions = ref([ { label: '全部', value: '' }, { label: '草稿', value: 'draft' }, { label: '已发布', value: 'published' }, { label: '已结束', value: 'closed' } ]); // 加载问卷详情 const loadSurveyDetail = async (id) => { try { const response = await request({ url: `/api/surveys/${id}`, method: 'GET' }); Object.assign(survey, response.data); } catch (error) { uni.showToast({ title: '加载问卷失败', icon: 'error' }); } }; // 应用筛选条件 const applyFilters = () => { // 实际项目中这里会重新获取数据 uni.showToast({ title: '筛选条件已应用', icon: 'success' }); }; // 重置筛选条件 const resetFilters = () => { filters.title = ''; filters.status = ''; }; // 提交问卷 const submitSurvey = () => { // 实际提交逻辑 uni.showToast({ title: '问卷提交成功', icon: 'success' }); }; // 预览问卷 const previewSurvey = () => { uni.navigateTo({ url: `/pages/survey/preview?id=${survey.id}` }); }; onMounted(() => { // 获取路由参数 const pages = getCurrentPages(); const currentPage = pages[pages.length - 1]; const { id } = currentPage.$page.options; if (id) { loadSurveyDetail(id); } }); return { survey, filters, statusOptions, applyFilters, resetFilters, submitSurvey, previewSurvey }; } }; </script> <style scoped lang="scss"> .container { padding: 30rpx; background-color: #f5f7fa; min-height: 100vh; } .index-section { background-color: #ffffff; border-radius: 16rpx; padding: 30rpx; margin-bottom: 40rpx; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); } .card { background-color: #ffffff; border-radius: 16rpx; overflow: hidden; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); &-header { padding: 30rpx; background-color: #2979ff; color: #ffffff; display: flex; justify-content: space-between; align-items: center; .title { font-size: 36rpx; font-weight: bold; } } &-body { padding: 30rpx; .info-item { margin-bottom: 20rpx; .label { color: #606266; margin-right: 10rpx; } .value { font-weight: 500; } } .question-list { margin-top: 40rpx; .question-item { padding: 20rpx 0; border-bottom: 1rpx solid #ebeef5; .question-title { font-size: 32rpx; font-weight: 500; margin-bottom: 20rpx; display: block; } .options { margin-left: 40rpx; } } } } &-footer { padding: 30rpx; display: flex; justify-content: center; border-top: 1rpx solid #ebeef5; } } </style> 帮我检查一下这个详情页代码有没有问题,代码是vue3+uniapp-plus 项目
最新发布
07-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值