cshtml将模型传递给JS提交函数？

Question

有办法将Model.SortOrder编号传递给JS提交函数吗？

JS

  $("#pubmed-form").submit(function (event) {
            event.preventDefault();
            console.log('pubmed-form');
    });


  <div id="pubmed-container" style="@(Model.Type == "Pubmed" ? "display:block" : "display:none")">
        <form id="pubmed-form" class="form-horizontal">
            <div id="search-grid-container" style="text-align:center;margin: 20px 0;">
                @(Model.Text)
            </div>
            <hr />

            <div class="text-center">
                <button type="submit" class="btn btn-primary modal-submit-btn">Save</button>
                <button type="button" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>

​

​

Answer 1

有很多方法可以做到这一点，这取决于你的确切需求。您可以将模型属性作为data属性添加到form元素上，当submit事件发生时可以读取该属性：

$("#pubmed-form").submit(function(e) {
  e.preventDefault();
  var sortOrder = $(this).data('sortorder');
  console.log(sortorder);
});

<div id="pubmed-container" style="@(Model.Type == "Pubmed" ? "display: block" : "display: none")">
  <form id="pubmed-form" class="form-horizontal" data-sortorder="@Model.SortOrder">
    <div id="search-grid-container">
      @(Model.Text)
    </div>
    <hr />
    <div class="text-center">
      <button type="submit" class="btn btn-primary modal-submit-btn">Save</button>
      <button type="button" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
    </div>
  </form>
</div>

或者，您可以使用一个隐藏字段，这样您就根本不需要任何JS了，前提是您没有使用AJAX：

<div id="pubmed-container" style="@(Model.Type == "Pubmed" ? "display: block" : "display: none")">
  <form id="pubmed-form" class="form-horizontal">
    <div id="search-grid-container">
      @(Model.Text)
    </div>
    <hr />
    <div class="text-center">
      <button type="submit" class="btn btn-primary modal-submit-btn">Save</button>
      <button type="button" class="btn btn-default modal-close-btn" data-dismiss="modal">Close</button>
    </div>
    @Html.HiddenFor(m => m.SortOrder)
  </form>
</div>

另一种方法是直接将模型值输出到JS，尽管这可以说将JS/C#逻辑绑定得太紧密了：

$("#pubmed-form").submit(function(e) {
  e.preventDefault();
  var sortOrder = '@Model.SortOrder'; // remove the quotes if the model property is numeric
  console.log(sortorder);
});