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

Question

我工作的Asp.net的mvc新闻网站一样（雅虎，BBC ...）。我有一个包含的div负荷提要标题，文本和image.What我要实现的就是让这些div包含这些3个点击元素无论身在何处，我点击（标题，正文或饲料图像）以及张贴的价值进料ID到我的控制器的方法。我已经做到了这一点是这样的：

在我的饲料表我有：FeedID-FeedText-送进路径

视图：

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

而在我的控制，我走的是“FeedID”

控制器：

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

该URL的GET动作在JS部分配置。从点击FeedId提取div，与本FeedId配置URL替换占位符，然后通过设置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>

目标控制器动作应与[HttpGet]归因。

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

Answer 2

更改此：

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

Answer 3

具有场张贴剃刀形式使具有FieldID隐藏将使这个要发送的服务器时是必需的。具有围绕加入onclick属性与提交函数的区域一个div张贴上述形式document.forms [0] .submit（）也可以被使用。

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