MVC Razor中C#字符串与jQuery值对比报错及解决方法

嘿，这个问题我之前也踩过坑！核心原因是你把服务器端的Razor/C#代码和客户端的jQuery/JS代码混在一起执行了，两者的运行时机完全不搭：

• Razor代码是在服务器生成HTML页面的时候跑的，这时候浏览器还没拿到页面，$('#InvoiceSelect').val()这种客户端JS代码服务器根本看不懂，自然会报语法错误。
• 而jQuery代码是页面加载到浏览器之后才运行的，这时候服务器已经把页面发过来了，没法再回头修改Razor生成的内容。

下面给你三个可行的解决方案，你可以根据自己的场景选：

方案1：页面加载时一次性过滤（适合初始值固定的场景） #

如果你的InvoiceSelect在页面打开时就有默认选中值，而且只需要过滤一次，那可以把这个初始值传到服务器端，用Razor直接对比：

实现步骤： #

1. 在Controller里把发票初始值存到ViewBag或者Model里：

// 假设你从业务逻辑里拿到初始发票编号
string defaultInvoice = "INV001";
ViewBag.DefaultInvoice = defaultInvoice;
// 或者给你的Model加个属性，比如Model.CurrentInvoiceNbr

2. 在Razor视图里用服务器端的值做对比：

<select class="form-control" id="ClinicIDSelect">
    @foreach (DataRow r in Model.Tables["Clinic"].Rows)
    {
        string invNbr = r["INVOICE_NBR"].ToString();
        // 用ViewBag里的服务器值对比，而不是客户端的jQuery代码
        if (invNbr == ViewBag.DefaultInvoice)
        {
            <option value="@r["CLINIC_CODE"]">@r["CLINIC_CODE"]</option>
        }
    }
</select>

方案2：客户端动态过滤（无需服务器交互，适合小数据量） #

如果是用户点击按钮后，根据InvoiceSelect当前选中的值实时过滤，那可以把所有诊所数据先传到客户端，用JS处理：

实现步骤： #

1. 先把所有诊所数据存到JS数组里（或者渲染带标记的选项）：

<!-- 把诊所数据序列化成JS数组，方便后续过滤 -->
<script>
    // 用Html.Raw避免转义，直接生成JS数组
    const allClinics = @Html.Raw(Json.Serialize(
        Model.Tables["Clinic"].AsEnumerable().Select(r => new {
            ClinicCode = r["CLINIC_CODE"].ToString(),
            InvoiceNbr = r["INVOICE_NBR"].ToString()
        })
    ));
</script>

2. 给按钮绑定点击事件，用JS过滤并更新下拉框：

<button id="FilterClinicBtn">筛选诊所</button>
<select class="form-control" id="ClinicIDSelect"></select>

<script>
    document.getElementById('FilterClinicBtn').addEventListener('click', () => {
        const selectedInvoice = document.getElementById('InvoiceSelect').value;
        const clinicSelect = document.getElementById('ClinicIDSelect');
        
        // 清空现有选项
        clinicSelect.innerHTML = '';
        
        // 过滤符合条件的诊所，添加到下拉框
        allClinics.forEach(clinic => {
            if (clinic.InvoiceNbr === selectedInvoice) {
                const option = document.createElement('option');
                option.value = clinic.ClinicCode;
                option.textContent = clinic.ClinicCode;
                clinicSelect.appendChild(option);
            }
        });
    });
</script>

方案3：AJAX异步请求过滤（适合大数据量，避免前端加载过多数据） #

如果诊所数据量很大，不想把所有数据都传到前端，可以用AJAX点击按钮时请求服务器，获取过滤后的结果：

实现步骤： #

1. 在Controller里加一个处理过滤的Action：

public JsonResult GetFilteredClinics(string invoiceNbr)
{
    // 从你的数据源过滤出对应发票的诊所
    var filtered = Model.Tables["Clinic"].AsEnumerable()
        .Where(r => r["INVOICE_NBR"].ToString() == invoiceNbr)
        .Select(r => new {
            ClinicCode = r["CLINIC_CODE"].ToString()
        });
    
    return Json(filtered, JsonRequestBehavior.AllowGet);
}

2. 在视图里用AJAX实现点击过滤：

<select class="form-control" id="ClinicIDSelect"></select>
<button id="FilterClinicBtn">筛选诊所</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#FilterClinicBtn').click(function() {
        const selectedInvoice = $('#InvoiceSelect').val();
        
        $.ajax({
            url: '@Url.Action("GetFilteredClinics", "YourController")', // 替换成你的Controller名称
            type: 'GET',
            data: { invoiceNbr: selectedInvoice },
            success: function(data) {
                const $clinicSelect = $('#ClinicIDSelect');
                $clinicSelect.empty();
                
                // 把返回的数据渲染成选项
                $.each(data, function(index, clinic) {
                    $clinicSelect.append(`<option value="${clinic.ClinicCode}">${clinic.ClinicCode}</option>`);
                });
            },
            error: function() {
                alert('获取诊所数据失败，请稍后重试');
            }
        });
    });
</script>

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