如何用JQuery将分部视图的raceid传递至父视图并调用控制器？

嘿，我来帮你一步步捋清楚这个问题，咱们先从JQuery没触发的坑说起，再搞定传值和控制器调用的事儿：

一、先解决JQuery代码没触发的问题 #

大概率是因为你的分部视图是动态加载的（比如通过Ajax异步渲染、或者页面后期才插入DOM），这时候直接给分部视图里的元素绑定click之类的事件是没用的——页面初始化的时候这些元素还不存在呢！

这时候得用事件委托的方式绑定，把事件绑定到父视图里本来就存在的静态容器上，比如你父视图里的.panel-body：

比如原来的代码如果是这样的（会失效）：

$('.race-btn').click(function() {
  // 你的逻辑
});

改成这样就没问题了：

// 绑定到父视图里一直存在的容器，监听子元素的点击
$('.panel-body').on('click', '.race-btn', function() {
  var raceId = $(this).data('raceid'); // 假设你给分部视图的元素加了data-raceid属性存值
  // 接下来就是传值到父视图+调用控制器的逻辑
});

二、把RaceId从分部视图传到父视图的两种实用方法 #

方法1：用自定义事件传值（推荐，解耦性好） #

这种方式不用直接操作父视图的DOM，通过事件传递更灵活：

1. 先给分部视图里的元素加个存储RaceId的属性：

<!-- 分部视图里的按钮/选择项，比如赛事选择按钮 -->
<button class="race-btn" data-raceid="@Model.RaceId">选择该赛事</button>

2. 分部视图里的JQuery代码触发自定义事件：

$('.race-btn').click(function() {
  var raceId = $(this).data('raceid');
  // 触发一个自定义事件，把RaceId作为参数传出去
  $(document).trigger('raceSelected', [raceId]);
});

3. 父视图里监听这个自定义事件，接收值：

// 父视图的script里加这段，确保页面加载后执行
$(document).on('raceSelected', function(event, raceId) {
  console.log('父视图拿到RaceId啦：', raceId);
  // 拿到值之后就可以调用控制器拿赛事名称了
  getRaceName(raceId);
});

方法2：直接操作父视图的DOM元素（简单直接） #

如果父视图里有用来存值的元素（比如隐藏域），可以直接赋值：

1. 父视图里加个隐藏域：

<input type="hidden" id="selectedRaceId" />

2. 分部视图里的JQuery代码直接给这个隐藏域赋值：

$('.race-btn').click(function() {
  var raceId = $(this).data('raceid');
  // 直接给父视图的隐藏域设值
  $('#selectedRaceId').val(raceId);
  // 接着调用控制器
  getRaceName(raceId);
});

三、正确调用控制器获取赛事名称 #

你原来的代码var raceName = '@Url.Action("RacesName", "Races")?id=' + race;只是生成了请求的URL，但并没有实际发起请求去调用控制器。得用Ajax来发起请求才行：

function getRaceName(raceId) {
  // 生成正确的请求地址，Url.Action会自动处理路由，不用自己拼路径
  var requestUrl = '@Url.Action("RacesName", "Races")';
  
  $.ajax({
    url: requestUrl,
    type: 'GET',
    data: { id: raceId }, // 把RaceId作为参数传给控制器
    success: function(response) {
      // 这里拿到控制器返回的赛事名称，比如直接返回字符串或者JSON
      console.log('拿到赛事名称啦：', response);
      // 可以把结果显示到父视图的某个元素里，比如
      $('#raceNameDisplay').text(response);
    },
    error: function(xhr, status, error) {
      console.error('请求出错啦：', error);
    }
  });
}

这里要注意两个点：

• 控制器的RacesName方法要标记为[HttpGet]，并且能接收id参数：

[HttpGet]
public ActionResult RacesName(int id)
{
  // 这里写根据id查询赛事名称的逻辑
  var raceName = YourRaceService.GetRaceNameById(id);
  // 返回字符串或者JSON都可以，比如返回字符串
  return Content(raceName);
}

• 如果你的分部视图是异步加载的，@Url.Action可能没法正确生成URL，这时候可以在父视图里先存好基础URL：

// 父视图的script里定义全局变量
var racesNameUrl = '@Url.Action("RacesName", "Races")';

然后在Ajax里直接用racesNameUrl就行。

四、最后再排查几个常见坑 #

1. 确保JQuery已经正确引入，而且要在你的自定义代码之前加载（比如放在页面底部，或者<head>里）。
2. 打开浏览器的开发者工具（按F12），看Console标签有没有报错——比如元素找不到、语法错误这些，都是常见的触发失败原因。
3. 如果分部视图是用Html.Partial同步渲染的，那直接绑定事件没问题，但如果是异步加载的，必须用事件委托哦！

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