Javascript 如何通过单击div提交值？

我在Asp.NETMVC新闻网站上工作，比如雅虎、BBC。。。。 我有很多包含提要标题、文本和图像的div。我想要实现的是，无论我在哪里单击标题、文本或提要图像，都可以单击这些包含这3个元素的div，并将提要ID的值发布到我的控制器方法。 我已经这样做了：

在我的提要表中，我有：FeedID FeedText FeedPath

视图：

我想应该有一种方法可以在这个div中发布FeedID，而不必使用按钮

我已经检查过这些帖子了，但是没有一个对我有帮助

感谢您的帮助…

更改此选项：

@foreach (Feeds item in Model.FeedViewModel)
{
  <div class="col-4">
  @using (Html.BeginForm("goToFeed", "Home"))
  {
      <h3>@item.title</h3>>
      <button type ="submit" name="FeedID" value="@item.FeedID" 
          style="background:none; border:none" href="#">@item.FeedText</button>
      <img src="@Url.Content(@item.FeedPath)">
  }
  </div>     
}

为此：

@foreach (Feeds item in Model.FeedViewModel)
{        
    <div class="feed col-4">
    @using (Html.BeginForm("goToFeed", "Home"))
    {
        @Html.HiddenFor(m => item.FeedID)
        <h3>@item.title</h3>>
        <button type ="submit" name="FeedID" value="@item.FeedID" 
            style="background:none; border:none" href="#">@item.FeedText</button>
        <img src="@Url.Content(@item.FeedPath)">
    }
    </div>     
}

然后将其添加到您的页面：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript"> 
$(function() { 
    $('.feed').click(function() { 
         return $(this).closest("form").submit();
     });
  }); 
</script>

更改此项：

@foreach (Feeds item in Model.FeedViewModel)
{
  <div class="col-4">
  @using (Html.BeginForm("goToFeed", "Home"))
  {
      <h3>@item.title</h3>>
      <button type ="submit" name="FeedID" value="@item.FeedID" 
          style="background:none; border:none" href="#">@item.FeedText</button>
      <img src="@Url.Content(@item.FeedPath)">
  }
  </div>     
}

为此：

@foreach (Feeds item in Model.FeedViewModel)
{        
    <div class="feed col-4">
    @using (Html.BeginForm("goToFeed", "Home"))
    {
        @Html.HiddenFor(m => item.FeedID)
        <h3>@item.title</h3>>
        <button type ="submit" name="FeedID" value="@item.FeedID" 
            style="background:none; border:none" href="#">@item.FeedText</button>
        <img src="@Url.Content(@item.FeedPath)">
    }
    </div>     
}

然后将其添加到您的页面：

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script type="text/javascript"> 
$(function() { 
    $('.feed').click(function() { 
         return $(this).closest("form").submit();
     });
  }); 
</script>

---

将razor表单发布到服务器时需要有一个字段，因此隐藏FieldID将允许发送该表单。在区域周围有一个div，该区域使用提交函数添加onclick属性以发布上述表单文档。表单[0]。也可以使用提交

@foreach (Feeds item in Model.FeedViewModel)
  {
  <div class="col-4">
  @using (Html.BeginForm("goToFeed", "Home"))
         {
          <div onclick="this.parentNode.submit()">
             @Html.HiddenFor(m => item.FeedID)
            <h3>@item.title</h3>>
            <button type ="submit" name="FeedID" value="@item.FeedID" 
               style="background:none; border:none" href="#">@item.FeedText</button>
             <img src="@Url.Content(@item.FeedPath)">
           </div>
         }
   </div> 
   }

---

将razor表单发布到服务器时需要有一个字段，因此隐藏FieldID将允许发送该表单。在区域周围有一个div，该区域使用提交函数添加onclick属性以发布上述表单文档。表单[0]。也可以使用提交

@foreach (Feeds item in Model.FeedViewModel)
  {
  <div class="col-4">
  @using (Html.BeginForm("goToFeed", "Home"))
         {
          <div onclick="this.parentNode.submit()">
             @Html.HiddenFor(m => item.FeedID)
            <h3>@item.title</h3>>
            <button type ="submit" name="FeedID" value="@item.FeedID" 
               style="background:none; border:none" href="#">@item.FeedText</button>
             <img src="@Url.Content(@item.FeedPath)">
           </div>
         }
   </div> 
   }

---

您不应该使用POST请求来读取数据。在这种情况下，正确的HTTP动词是GET。POST主要用于创建新条目。看

这不仅有学术上的原因。如果您使用POST，并且您的用户使用浏览器的向后/向前按钮进行导航，他们会看到您确定要重新提交表单吗？信息

要使用GET，您的CSHTML可以如下所示。使用CSS标记类js feed和js feedId，以便以后可以使用jQuery访问这些元素

@foreach (Feeds item in Model.FeedViewModel) {
    <div class="col-4 js-feed">
        <h3>@item.title</h3>>
        <span>@item.FeedText</span>
        @Html.HiddenFor(m => item.FeedID, new { @class = "js-feedId" })
    </div>     
}

目标控制器操作应使用[HttpGet]属性化

---

您不应该使用POST请求来读取数据。在这种情况下，正确的HTTP动词是GET。POST主要用于创建新条目。看

这不仅有学术上的原因。如果您使用POST，并且您的用户使用浏览器的向后/向前按钮进行导航，他们会看到您确定要重新提交表单吗？信息

要使用GET，您的CSHTML可以如下所示。使用CSS标记类js feed和js feedId，以便以后可以使用jQuery访问这些元素

@foreach (Feeds item in Model.FeedViewModel) {
    <div class="col-4 js-feed">
        <h3>@item.title</h3>>
        <span>@item.FeedText</span>
        @Html.HiddenFor(m => item.FeedID, new { @class = "js-feedId" })
    </div>     
}

目标控制器操作应使用[HttpGet]属性化

---

是的，您可以设置一些JS来处理对div的单击，然后找到匹配的表单并在该表单上运行submit方法。但是…由于表单中没有任何实际的表单字段，因此在提交时不会向服务器发送任何值。您需要一些实际的字段，例如隐藏字段、文本框、复选框等，以便有一些数据供表单提交。如果您只想提交提要ID，那么一个隐藏字段就可以完成这项工作。是的，您可以设置一些JS来处理对div的单击，然后找到匹配的表单并在该表单上运行submit方法。但是…由于表单中没有任何实际的表单字段，因此在提交时不会向服务器发送任何值。您需要一些实际的字段，例如隐藏字段、文本框、复选框等，以便有一些数据供表单提交。如果您只想提交提要ID，那么一个隐藏字段就可以完成这项工作；感谢您的回复，我完全按照您所说的做了，并在提交后添加了括号，但div不可单击。您是否将提要CSS标记类添加到div？js中有一些语法错误，我已修复它->$function{$'.feed'。clickfunction{return$this.closestform.submit；}；我认为您在提交后遗漏了一些括号：return$this.closestform.submit；感谢您的回复，我完全按照您所说的做了，并在提交后添加了括号，但div不可单击。您是否将提要CSS标记类添加到div？js中有一些语法错误，我已修复它->$function{$'.feed'。clickfunction{return$this.closestform.submit；}；很高兴我能帮忙：很高兴我能帮忙：