Question

搜索后我需要清除过滤器这是我的 index.cshtml

<form method="post" id="form">
    <div class="row">
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchNom" value="@ViewData["sNom"]?.ToString()" class="form-control" id="nom" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchPrenom" value="@ViewData["sPrenom"]?.ToString()" id="prenom" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchEmail" value="@ViewData["sEmail"]?.ToString()" id="email" />
            </div>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <input type="search" name="searchTelephone" value="@ViewData["sTelephone"]?.ToString()" id="telephone" />
            </div>
        </div>
        <div class="col-md-2">
            <p>
                <input type="submit" value="Search" class="btn btn-primary" />
                <button class="btn" type="reset" id="reset" onclick="Reset()"><i class="fa fa-trash"></i></button>
            </p>
        </div>
    </div>
</form>

，然后操作索引：

   public string searchNom { get; set; }
        public string searchPrenom { get; set; }
        public string searchEmail { get; set; }
        public string searchTelephone { get; set; }
        public async Task<IActionResult> Index(string searchNom, string searchPrenom, string searchEmail, string searchTelephone, int? pageNumber, string currentFilter)
        {
            
            if (searchNom != null || searchPrenom != null || searchEmail != null || searchTelephone != null)
            {
                pageNumber = 1;

            }
            

            var personnels = from s in _context.personnels
                             select s;
            if (!String.IsNullOrEmpty(searchNom) || !String.IsNullOrEmpty(searchPrenom) || !String.IsNullOrEmpty(searchEmail) || !String.IsNullOrEmpty(searchTelephone))
            {
                personnels = personnels.Where(s => s.Nom.Equals(searchNom) || s.Prenom.Equals(searchPrenom) || s.Email.Equals(searchEmail) || s.Telephone.Equals(searchTelephone));
                ViewData["sNom"] = searchNom ;
                ViewData["sPrenom"] = searchPrenom;
                ViewData["sEmail"] = searchEmail;
                ViewData["sTelephone"] =searchTelephone ;
                
            }

            else
            {
                ViewData["sNom"] = "";
                ViewData["sPrenom"] = "";
                ViewData["sEmail"] = "";
                ViewData["sTelephone"] = "";
            }
          
            
                int pageSize = 20;
            return View(await Pagination<PersonnelModel>.CreateAsync(personnels.AsNoTracking(), pageNumber ?? 1, pageSize));


        }

js代码：

<script>
    function Reset() {
        document.getElementById("nom").value = "";
        document.getElementById("prenom").value = "";
        document.getElementById("email").value = "";
        document.getElementById("telephone").value = "";


    }</script>

现在是问题，按钮重置不起作用是一个异常未捕获的TypeError：无法将属性'selectedIndex'设置为null 重置时（（索引）：357）在HTMLButtonElement.onclick（（index :: 107）

请问有什么方法可以使“重置”按钮同时作用于表单数据值？

非常感谢您提供任何帮助。

Answer 1

欢迎来到。

上面的代码无法执行，因为我们没有_context变量，也没有PersonelModel类。

您使用ViewData初始填充表单的方式似乎有点阴暗-我会确保我通过视图模型。我知道这不是这里的问题。

回答实际问题，我将从包装脚本功能开始

document.addEventListener("DOMContentLoaded", function(){
  // Handler when the DOM is fully loaded
});

或看看here

看看jQuery库中的onclick函数，而不看.click()属性，看看here

使用上面的代码，您的代码将类似于：

$("#submit-button").click(function() {
    document.getElementById("nom").value = "";
    document.getElementById("prenom").value = "";
    document.getElementById("email").value = "";
    document.getElementById("telephone").value = "";
});

假设您在按钮中添加了提交按钮ID。

Answer 2

我终于找到了解决方案，我添加了这个document.forms [“ form”]。submit（）;也

   <script>
        function Reset() {

            document.getElementById("nom").value = "";
            document.getElementById("prenom").value = "";
            document.getElementById("email").value = "";
            document.getElementById("telephone").value = "";
            document.forms["form"].submit();

        }</script>

发布并清除过滤器-剃刀页面

2 个答案: