如何在按钮单击时调用操作

Question

您好，我有一个使用电子邮件地址值作为搜索字段的表单，当系统中存在电子邮件地址时，我想填充表单。

我创建了此操作以通过电子邮件地址搜索

 public async Task<IActionResult> GetContactByEmailID(string emailID)
        {

            if (emailID == null)
            {
                return NotFound();
            }
            var Contacts = await ContactsService.GetContactsByEmailID(emailID);

            if (Contacts == null)
            {
                return NotFound();
            }
            var ContactsDetail = Mapper.Map<Contact>(Contacts);

            return View(ContactsDetail);
        }

我需要有关如何在单击按钮时调用上述操作的帮助，如果存在，我想在名称文本框中显示与电子邮件地址关联的联系人姓名

  <div class="col-sm-6">
      <label for="EmailAddress" class="col-6 form-control-label">Email</label>
      <input asp-for="EmailAddress" type="email" id="emailaddress" >
       <button class="btn" role="button">Search</button>
  </div>

以下是我要显示所选联系人姓名的地方

<form>
   <div class="col-sm-5 m-b">
     <label for="Name" class="col-sm-10 form-control-label required">Full Name</label>
      <input asp-for="Name" type="text" class="form-control form-control" id="Name" placeholder="">
     <span asp-validation-for="Name" class="text-danger" />
    </div>

Answer 1

为了在不刷新页面的情况下更新表单或正在处理的任何内容，您需要实现一个异步方法来获取联系人详细信息，并将结果添加到 DOM。

我喜欢为此目的使用局部视图。

流程是这样的：

用户输入一个电子邮件地址，点击搜索按钮。一个 Ajax 请求将被发送到适当的方法，该方法返回一个局部视图。 当它向 Ajax 调用者返回数据时，我们将结果插入到 id 为 '#target' 的 div 中

     public async Task<IActionResult> GetContactByEmailID(string emailID)
            {

                if (emailID == null)
                {
                    return NotFound();
                }
                var Contacts = await ContactsService.GetContactsByEmailID(emailID);

                if (Contacts == null)
                {
                    return NotFound();
                }
                var ContactsDetail = Mapper.Map<Contact>(Contacts);

                return Partial("_ContactDetails", ContactsDetail);
            }

// Partial view inside Views/Shared: _ContactDetails.cshtml

@Model ContactsDetail

<label>Full name</label>
<p>@model.FullName</p>

  <div class="col-sm-6">
      <label for="EmailAddress" class="col-6 form-control-label">Email</label>
      <input asp-for="EmailAddress" type="email" id="emailaddress" >
       <button id="searchButton" class="btn" role="button">Search</button>
  </div>

<form>
   <div class="col-sm-5 m-b">
     <label for="Name" class="col-sm-10 form-control-label required">Full Name</label>

      // Here it will add the partial view to the page, if the Ajax call is successful.
      <div id="target"></div>

      <input asp-for="Name" type="text" class="form-control form-control" id="Name" placeholder="">
     <span asp-validation-for="Name" class="text-danger" />
    </div>
</form>

@section Scripts {
    <script>
        $('#searchButton').on('click', function(e) {
            $.ajax({
                url: '/home/GetContactDetailById'
                data: { 'emailId' : '$("#EmailAddress").val()' }
                success: function (result) {
                    $('#target').html(result);
                },
                datatype: 'json'
            });
        });
    </script>
}

Answer 2

这是剃须刀页面中的解决方案。更改代码以适应模型和数据库的需要：

后面的页面代码：

public class AboutModel : PageModel
{
    [BindProperty]
    public string Email { get; set; }

    [BindProperty]
    public string Name { get; set; }
    public void OnGet()
    {
        Email = "Enter email to search here";
    }

    public JsonResult OnGetContactByEmailID(string emailid)
    {
        // get name based on email;
        return new JsonResult("Arun");
    }
}

页面查看代码 -

@page
@model AboutModel
@{
    ViewData["Title"] = "About";
}
<script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous"></script>
<br /> 
<br/>

<div class="col-sm-6">
    <label for="EmailAddress" class="col-6 form-control-label">Email</label>
    <input asp-for="Email" type="email" id="emailaddress">
    <button class="btn" role="button" onclick="search()">Search</button>
</div>

<div class="col-sm-5 m-b">
    <label for="Name" class="col-sm-10 form-control-label required">Full Name</label>
    <input asp-for="Name" type="text" class="form-control form-control" id="Name" placeholder="">
    <span asp-validation-for="Name" class="text-danger" />
</div>

<script type="text/javascript">
    function search() {
        if ($('#emailaddress').val() != "") {
            $.ajax({
                type: 'get',
                dataType: 'json',
                cache: false,
                url: "/?handler=ContactByEmailID",
                data: { 'emailID': $('#emailaddress').val() },
                success: function (response) {
                    $('#Name').val(response);
                    // set json result to selected contact Name
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }
    };
</script>

在这里输出：