javascript - 如何通过点击一个div提交一个值？

Question

我正在开发 Asp.net Mvc 新闻网站，例如(yahoo、BBC ...)。 我有很多包含提要标题、文本和图像的 div。我想要实现的是使这些包含这 3 个元素的 div 可点击，无论我在哪里单击(标题、文本或提要图像)并发布值我的 Controller 方法的提要 ID。 我已经这样做了:

在我的提要表中我有:FeedID-FeedText-FeedPath

查看:

  @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>     
   }

在我的 Controller 中，我使用“FeedID”

Controller :

    [HttpPost]
    public ActionResult goToFeed(int FeedID)
    {
     //some code here
    } 

我想应该有一种方法可以在这个 div 中发布 FeedID 而无需将其设为按钮。

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

Form submit by click on a div element without JS

submiting form on div click with js

感谢您的帮助...

Answer 1

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

这不仅有学术上的原因。如果您使用 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>     
}

GET 操作的 URL 在 JS 部分配置。从点击的div中提取FeedId，用这个FeedId替换配置的URL中的占位符，然后通过设置重定向到这个 Action >window.location.href，这将重新加载页面。

如果您不想重新加载整个页面，请改用 $.ajax。

<script type="text/javascript">
    $(document).ready(function() {
        var getUrl = '@Url.Action("goToFeed", "Home", new { FeedID = "To_Be_Replaced_By_JS" })';

        $('.js-feed').on('click', function() {
            var feedId = $('.js-feedId', $(this)).val(); // search only inside clicked element
            var feedUrl = getUrl.replace('To_Be_Replaced_By_JS', feedId);
            window.location.href = feedUrl;
        });
     });
</script>

目标 Controller 操作应使用 [HttpGet] 进行属性化。

[HttpGet]
public ActionResult goToFeed(int FeedID) {
 //some code here
}