如何在 ASP.NET Core 中實現表單重置按鈕？

Question

如何使用重置按鈕刪除表單輸入？ 我想刪除這些搜索過濾器以清除 ASP.NET 核心搜索過濾器

我使用 JS function 來清除這些輸入，但它不起作用。

索引頁面：

<form  id="form">
    <div class="row">

        <div class="col-md-2">


            <div class="form-group">
                @Html.TextBox("nom", null, new { @class = "form-control ", placeholder = "Par nom",id="nom" })


            </div>
        </div>
        <div class="col-md-2">


            <div class="form-group">
                @Html.TextBox("prenom", null, new { @class = "form-control", placeholder = "Par prenom" ,id="prenom"})


            </div>
        </div>
        <div class="col-md-2">


            <div class="form-group">
                @Html.TextBox("email", null, new { @class = "form-control", placeholder = "Par email" ,id="email"})


            </div>
        </div>
        <div class="col-md-2">


            <div class="form-group">
                @Html.TextBox("telephone", null, new { @class = "form-control", placeholder = "Par telephone" ,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="resetFields()" asp-action="Clear" ><i class="fa fa-trash"></i></button>

            </p>

        </div>



    </div>
</form>


> Blockquote

行動指數：

public async Task<IActionResult> Index(string nom, string prenom, string email, string telephone, int? pageNumber, string currentFilter)
    {
        
        if (nom != null || prenom != null || email != null || telephone != null)
        {
            pageNumber = 1;

        }
        else
        {
            nom = currentFilter;
            prenom = currentFilter;
            email = currentFilter;
            telephone = currentFilter;
        }

        var personnels = from s in _context.personnels
                         select s;
        if (!String.IsNullOrEmpty(nom) || !String.IsNullOrEmpty(prenom) || !String.IsNullOrEmpty(email) || !String.IsNullOrEmpty(telephone))
        {
            personnels = personnels.Where(s => s.Nom.Equals(nom) || s.Prenom.Equals(prenom) || s.Email.Equals(email) || s.Telephone.Equals(telephone));
        }
        if(!String.IsNullOrEmpty(nom) && !String.IsNullOrEmpty(prenom) && !String.IsNullOrEmpty(email) && !String.IsNullOrEmpty(telephone))
        {
            personnels = personnels.Where(s => s.Nom.Equals(nom) && s.Prenom.Equals(prenom) && s.Email.Equals(email) && s.Telephone.Equals(telephone));
        }
            int pageSize = 20;
        return View(await Pagination<PersonnelModel>.CreateAsync(personnels.AsNoTracking(), pageNumber ?? 1, pageSize));


    }

代碼 javascript

function Reset() {
   
    document.getElementById('nom').value = '';
    document.getElementById('prenom').value = '';
    document.getElementById('email').value = '';
    document.getElementById('telephone').value = '';

    

    }

Answer 1

這只是一個復制錯誤對不起，在我的代碼中我寫了Reset（），我想在搜索后清除過濾器並清除輸入，但是如何使用這個document.forms [“form”].submit（），我也試試制作另一個代碼但它不起作用，非常感謝您提前提供任何幫助。

索引操作：

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));

我的 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>


        }

代碼.js

function Reset() {
   
    
   
    
  
    document.querySelector('input[name=searchNom]').value = null;
    document.querySelector('input[name=searchPrenom]').value = null;
    document.querySelector('input[name=searchEmail]').value = null;
    document.querySelector('input[name=searchTelephone]').value = null;
    }

重置按鈕不起作用，有一個異常：Uncaught TypeError: Cannot set property 'selectedIndex' of null at Reset ((index):350) at HTMLButtonElement.onclick ((index):107)