我怎样才能在按钮点击时调用动作 [英] How can i call an Action on button click

问题描述

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

Hi I have a form that used email address value as a search field, when email address exist in the system i want to populate a form.

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

I created this action to search by email address

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

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

I need help on how Call the above action on button click and if exist i would like to display the Name of contact associated to the email address in the Name textbox

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

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

The following is where i want to display the selected contact Name

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

推荐答案

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

Here is solution in razor page. change code to accommodate model and database need:

后面的页面代码:

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>

此处输出:

这篇关于我怎样才能在按钮点击时调用动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！