Question

****编辑 - 显然这只发生在MS Edge上。它适用于单个Enter on Chrome和Firefox。**

我遇到一个问题，即只有在文本框中输入两次后才提交表单。

表单非常简单，只有一个文本框和提交按钮。

如果我明确点击“提交”按钮，一切正常;数据显示正确和所有，但我也想通过按Enter键提交。而且我注意到如果我只是输入一次，它就不起作用了。直到我按两次表格实际提交后才输入。

我已经尝试绑定到jquery的keypress，甚至做了.live（），但即使这样，它只能在输入两次后才能工作。

如果它是相关的，我在Search.cshtml上绑定到DOMSubtreeModified的原因是因为我正在使用datatables.net jQuery插件，我找不到一种方法来调用.DataTable（）方法表单提交后的表格，所以我必须在div上的HTML更改后调用它。

我的设置如下：

Search.cshtml

<div id="search-form">
@Html.Action("SearchForm", "Item")
</div>
<br />
<br />
<div id="search-results">
</div>

@section scripts {
    <script type="text/javascript">
        $('#search-results').bind("DOMSubtreeModified", function () {
            $('#items').DataTable();
        });
    </script>
}

_SearchFormPartial.cshtml

@using (Ajax.BeginForm("Search", "Item", FormMethod.Post,
            new AjaxOptions
            {
                InsertionMode = InsertionMode.Replace,
                HttpMethod = "POST",
                UpdateTargetId = "search-results"
            }))
{
    <div class="row">
        <div class="col-md-3">
            <input type="text" id="term" name="term" placeholder="Search by Item Name" class="form-control" autofocus />
        </div>
        <div class="col-md-2">
            <input type="submit" value="Search" id="btnSearch" class="btn btn-default" />
        </div>
    </div>
}

_SearchResultsPartial.cshtml

@model List<MyItem>

@{
    ViewBag.Title = "Search Results";
}

<table class="table table-striped" id="items">
    <thead>
        <tr>
            <td><strong>Name</strong></td>
            <td><strong>Type</strong></td>
            <td><strong>Status</strong></td>
        </tr>
    </thead>
    @foreach (var item in Model)
    {
        <tr class="clickable-row">
            <td>@item.Name</td>
            <td>@item.Type</td>
            <td>@item.Status</td>
        </tr>
    }

</table>

@section scripts {
    <script type="text/javascript">

        $(document).ready(function () {
            $("#items tr").css('cursor', 'pointer');
        });

        $("#items tr.clickable-row").on('click', function (e, row, $element) {
            var url = $(this).closest('tr').children('td.secretLink').children(":first").attr("href");
            window.location = url;
        });
    </script>
}

Answer 1

对于两种浏览器，当我单击一次Enter时，此方法都在Chrome和IE Edge中起作用

https://dotnetfiddle.net/DUvLqb

Controller / ViewModel

namespace Testy20161006.Controllers
{
    public class MyItem
    {
        public string Name { get; set; }
        public string Type { get; set; }
        public string Status { get; set; }
    }

    public class HomeController : Controller
    {
        public ActionResult SearchForm()
        {
            return View();
        }

        public ActionResult SearchMe(string term)
        {
            return View();
        }

        public ActionResult Search()
        {
            var myItem1 = new MyItem { Name = "Name1", Status = "Stat1", Type = "Type1" };
            var myItem2 = new MyItem { Name = "Name2", Status = "Stat2", Type = "Type2" };
            var myItem3 = new MyItem { Name = "Name3", Status = "Stat3", Type = "Type3" };
            IList<MyItem> list = new List<MyItem>();
            list.Add(myItem1);
            list.Add(myItem2);
            list.Add(myItem3);

            return View(list);
        }

Search.cshtml

@model List<Testy20161006.Controllers.MyItem>

@{
    ViewBag.Title = "Search";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Search</h2>

<div id="search-form">
    @*changing this action*@
    @*@Html.Action("SearchForm", "Item")*@
    @Html.ActionLink("Click to Search", "SearchForm")
</div>
<br />
<br />
<div id="search-results">
</div>

@Html.Partial("~/Views/Home/_SearchFormPartial.cshtml")
@Html.Partial("~/Views/Home/_SearchResultsPartial.cshtml", Model)

@section scripts {
    <script type="text/javascript">
        $('#search-results').bind("DOMSubtreeModified", function () {
            $('#items').DataTable();
        });
    </script>
}

_SearchFormPartial.cshtml

@*Changing Ajax.BeginForm Signature*@
@*@using (Ajax.BeginForm("Search", "Item", FormMethod.Post,
                new AjaxOptions
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "POST",
                    UpdateTargetId = "search-results"
                }))
    {*@
@using (Ajax.BeginForm("SearchMe", "Home", FormMethod.Post,
            new AjaxOptions
            {
                InsertionMode = InsertionMode.Replace,
                HttpMethod = "POST",
                UpdateTargetId = "search-results"
            }))
{
    <div class="row">
        <div class="col-md-3">
            <input type="text" id="term" name="term" placeholder="Search by Item Name" class="form-control" autofocus />
        </div>
        <div class="col-md-2">
            <input type="submit" value="Search" id="btnSearch" class="btn btn-default" />
        </div>
    </div>
}

_SearchResultsPartial

@model List<Testy20161006.Controllers.MyItem>

@{
    ViewBag.Title = "Search Results";
}

<table class="table table-striped" id="items">
    <thead>
        <tr>
            <td><strong>Name</strong></td>
            <td><strong>Type</strong></td>
            <td><strong>Status</strong></td>
        </tr>
    </thead>
    @foreach (var item in Model)
    {
        <tr class="clickable-row">
            <td>@item.Name</td>
            <td>@item.Type</td>
            <td>@item.Status</td>
        </tr>
    }

</table>

@section scripts {
    <script type="text/javascript">

        $(document).ready(function () {
            $("#items tr").css('cursor', 'pointer');
        });

        $("#items tr.clickable-row").on('click', function (e, row, $element) {
            var url = $(this).closest('tr').children('td.secretLink').children(":first").attr("href");
            window.location = url;
        });
    </script>
}

ASP.NET MVC部分视图上的表单仅在MS Edge上的文本框上输入两次后提交

1 个答案: