使用ajax加载部分视图时，会触发提交按钮

本文关键字：提交 按钮 ajax 加载部 视图 使用 | 更新日期: 2023-09-27 18:15:54

当我用ajax加载部分视图时，提交按钮被触发。如果我移除/删除提交按钮，部分视图将被正确呈现。

这是我的javascript代码: 
$(".searchclientssendsms").keypress(function (event) {
    var keycode = (event.keycode ? event.keycode : event.which);
    if (keycode == '13') { //enter key
             var value = $(this).val();
             $.get("/smstemplate/SearchClients/" + value,
             function (data) {             
                $('#searchClientsResult').html(data);               
             });
    }
});

RouteConfig中关于我的搜索的那行:

routes.MapRoute(name: "SearchClientsSendSMS", 
                  url: "smstemplate/searchclients/{search}", 
             defaults: new { controller = "smstemplate",
                                 action = "searchclients" });

和来自控制器的函数:

    public ActionResult SendSMS()
    {
        return View();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult SendSMS(SMSTemplate sms, string[] clients)
    {
        foreach (string client in clients)
        {
            int idclient = Convert.ToInt32(client);
            Customer customer=db.Customers.Find(idclient);
           // SendSMS(customer.Phone, sms.Text);
        }
        return View();
    }

    public ActionResult SearchClients(string search)
    {
        List<Customer> clients = db.Customers.Where(c => c.Deleted == true && (c.Email.Contains(search) || c.Name.Contains(search) || c.Phone.Contains(search))).ToList();
        return PartialView(clients);
    }

如果我执行firebug中的javascript函数，则部分视图被渲染更正。提交按钮不再被触发。

 $.get("/smstemplate/SearchClients/poir",
        function (data) {
            $('#searchClientsResult').html(data);
        });

我注意到这个行为只有在输入键。

是什么导致的呢?

使用ajax加载部分视图时，会触发提交按钮

在我看来，Enter键也在提交按钮，所以它同时调用AJAX并按下按钮。

试试这个:

$(".searchclientssendsms").keypress(function (event) {
var keycode = (event.keycode ? event.keycode : event.which);
    if (keycode == '13') { //enter key
         var value = $(this).val();
         $.get("/smstemplate/SearchClients/" + value,
         function (data) {             
            $('#searchClientsResult').html(data);               
         });
         event.preventDefault(); //Inside the if so only is prevented for Enter Key.
    }
});

你可以试着在整个页面禁用它:

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
   });
});
相关文章：