MVC中如何从主视图绑定分部视图按钮的点击事件？

让我帮你排查并解决这个问题，你的代码里有几个关键问题导致点击事件无法触发或者功能异常：

1. 选择器错误（最直接的触发失败原因） #

你的分部视图里按钮的ID是BtnLogin，但JavaScript代码里用了类选择器.BtnLogin——jQuery找不到匹配的元素，自然无法绑定点击事件。

修复方法： #

把JS里的选择器改成ID选择器$("#BtnLogin")：

$(document).ready(function () {
    $("#BtnLogin").on('click', function (event) {
        // 后续逻辑代码...
    });
});

如果你更倾向于用类选择器，也可以给按钮添加BtnLogin类：

<input type="button" ID="BtnLogin" value="تسجيل الدخول" Class="GreenButtonStyle BtnLogin" />

2. data-value属性缺失，导致AJAX参数无效 #

你的JS代码尝试获取$(this).attr('data-value')，但按钮上根本没有这个属性，会导致requestedDataType的值为undefined，AJAX请求传递的参数完全不符合预期。

修复方法： #

根据实际需求给按钮添加data-value属性，比如：

<input type="button" ID="BtnLogin" value="تسجيل الدخول" Class="GreenButtonStyle" data-value="login-request" />

如果这个参数不是必须的，可以直接移除相关代码，或者调整为你需要传递的实际参数。

3. AJAX请求URL硬编码的潜在问题 #

你直接写了url: "Login/Login"，这在某些路由配置下（比如应用部署在子目录）会导致URL错误，请求无法到达控制器。

修复方法： #

使用ASP.NET MVC的@Url.Action()辅助方法生成正确的URL：

url: "@Url.Action("Login", "YourControllerName")", // 替换成你的实际控制器名称，比如Account

4. AJAX参数与控制器方法不匹配 #

你的控制器Login方法接收的是AdminLoginClass user对象，但AJAX只传递了requestedDataType参数，控制器无法获取登录所需的用户名和密码，逻辑无法正常执行。

修复方法： #

假设你的分部视图里有用户名和密码输入框（你没贴出但应该存在），在点击事件中获取这些值并传递给控制器：

$("#BtnLogin").on('click', function (event) {
    event.preventDefault(); // 防止不必要的页面跳转
    var username = $("#AdminUserName").val(); // 对应输入框ID
    var password = $("#AdminPassWord").val(); // 对应输入框ID
    
    $.ajax({
        type: "POST", // 登录请求建议用POST，更安全
        data: { 
            AdminUserName: username,
            AdminPassWord: password,
            ReturnUrl: "@ViewContext.HttpContext.Request.QueryString["ReturnUrl"]" // 若需要跳转回原页面
        },
        url: "@Url.Action("Login", "YourControllerName")",
        success: function (data) {
            // 根据返回结果处理逻辑
            if (data.success) {
                window.location.href = data.redirectUrl;
            } else {
                alert(data.message);
            }
        },
        error: function () {
            alert('请求出错，请稍后重试')
        }
    });
});

同时调整控制器方法，确保能正确接收参数并返回JSON格式的结果：

[HttpPost] // 添加HttpPost特性，对应AJAX的POST请求
public ActionResult Login(AdminLoginClass user, string ReturnUrl = "")
{
    bool success = false;
    string message = "";
    string redirectUrl = Url.Action("Index", "Home");

    DBModel.DBAdminLogin DB_Model = new DBModel.DBAdminLogin();
    AdminLoginClass admin = DB_Model.Login(user.AdminUserName, user.AdminPassWord);
    
    if (admin != null && admin.AdminGroupID > 0) // 假设这是登录成功的判断条件
    {
        success = true;
        // 这里可以添加登录态逻辑，比如设置Session、Cookie等
    }
    else
    {
        message = "用户名或密码错误";
        redirectUrl = "";
    }

    return Json(new { success = success, message = message, redirectUrl = redirectUrl });
}

额外注意事项 #

• 确保你已经正确引入jQuery库，否则$会报错，点击事件自然无法触发：

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  

• 如果你的分部视图是通过AJAX动态加载的（不是服务器端@Html.Partial渲染的），需要用事件委托绑定点击事件：

  $(document).on('click', "#BtnLogin", function (event) {
      // 点击事件逻辑
  });
  

  你的情况是服务器端直接渲染的分部视图，所以document.ready里直接绑定即可。

按照以上步骤修复后，按钮点击事件应该能正常触发，登录逻辑也能正确执行。

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