我来帮你搞定这个需求！你的核心目标是当LoadingFrom和LoadingTill相等时禁用提交按钮，这里得兼顾页面加载时的后端初始状态控制和用户输入时的前端实时校验——只靠Razor后端渲染的话，用户修改输入框后按钮状态不会自动更新，所以得前后端配合实现，具体步骤如下：

一、后端初始渲染（页面加载时的按钮状态） #

你的初步思路是对的，但可以优化写法，同时要考虑空值场景（比如两个字段都未填写时是否禁用？可根据你的需求调整）。用Razor三元运算符会比代码块更简洁：

<button type="submit" class="btn btn-primary btn-nav-unloading" 
        @(Model.LoadingFrom == Model.LoadingTill ? "disabled" : "")>
    Unloading Address <i class="material-icons">keyboard_arrow_right</i>
</button>

注意事项：

• 如果LoadingFrom和LoadingTill是DateTime类型，直接用==比较值相等没问题；如果是字符串类型，要确保格式完全统一（比如都是yyyy-MM-dd），避免因格式差异导致判断错误。
• 如果字段可能为null，补充空值判断逻辑：

@( (Model.LoadingFrom != null && Model.LoadingTill != null && Model.LoadingFrom.Equals(Model.LoadingTill)) ? "disabled" : "")

二、前端实时校验（用户输入时动态更新按钮） #

只靠后端渲染的话，用户修改输入框内容后，按钮状态不会自动同步变化，所以必须用JavaScript监听输入事件，实时对比两个值并更新按钮的禁用状态：

// 获取页面元素
const loadingFromInput = document.getElementById('loading-from');
const loadingTillInput = document.getElementById('loading-till');
const submitButton = document.querySelector('.btn-nav-unloading');

// 定义校验逻辑函数
function toggleButtonState() {
    const fromValue = loadingFromInput.value.trim();
    const tillValue = loadingTillInput.value.trim();
    
    // 当两个值相等时禁用按钮，可根据需求调整条件（比如排除空值）
    submitButton.disabled = (fromValue === tillValue);
}

// 监听输入框的输入事件
loadingFromInput.addEventListener('input', toggleButtonState);
loadingTillInput.addEventListener('input', toggleButtonState);

// 页面加载完成后执行一次，确保初始状态正确
window.addEventListener('load', toggleButtonState);

把这段代码放在页面底部（或者包裹在DOMContentLoaded事件里），确保DOM元素加载完成后再执行。如果你的项目用了jQuery，也可以用$(document).ready()来替代window.load。

三、后端模型验证（防止前端绕过） #

为了安全，即使前端禁用了按钮，还是要在后端提交时再次校验——毕竟用户可以通过浏览器控制台修改按钮状态提交请求。你可以选择两种方式：

方式1：自定义模型验证属性 #

创建一个自定义验证属性，直接标记在模型字段上：

public class LoadingDatesNotEqualAttribute : ValidationAttribute
{
    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        var model = (YourModelClass)validationContext.ObjectInstance;
        if (model.LoadingFrom != null && model.LoadingTill != null && model.LoadingFrom.Equals(model.LoadingTill))
        {
            return new ValidationResult("Loading From and Loading Till cannot be the same.");
        }
        return ValidationResult.Success;
    }
}

然后在模型中使用：

public class YourModelClass
{
    public DateTime? LoadingFrom { get; set; }
    
    [LoadingDatesNotEqual]
    public DateTime? LoadingTill { get; set; }
}

方式2：控制器Action中直接校验 #

在处理提交的Action里添加判断逻辑：

[HttpPost]
public ActionResult YourSubmitAction(YourModelClass model)
{
    // 校验两个值是否相等
    if (model.LoadingFrom != null && model.LoadingTill != null && model.LoadingFrom.Equals(model.LoadingTill))
    {
        ModelState.AddModelError("LoadingTill", "Loading From and Loading Till cannot be the same.");
        return View(model);
    }
    
    if (ModelState.IsValid)
    {
        // 处理正常提交逻辑
        return RedirectToAction("SuccessPage");
    }
    return View(model);
}

这样即使前端被绕过，后端也能拦截无效的提交请求。

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