ajax mvc html：jquery val无法阻止对api的呼叫

当点击一个按钮时，我正在用ajax调用web api。根据我的视图模型数据注释，我的表单使用JqueryVal进行表单验证。ajax mvc html：jquery val无法阻止对api的呼叫

我的问题是，当我在窗体中单击按钮“LISTO”，它会调用我的API，jqueryval的inspite被标记（需要选择一个文件）错误

这是我的代码：

我的视图模型包含数据的注释（该dataannotations与jquery.validate.js和jquery.validate.unobtrusive.js一起作为你℃。一看，它是工作，但没有阻止该API被调用）：

public class CursoViewModel 
{ 
    public Guid Id { get; set; } 
    [MaxLength(125)] 
    public string Titulo { get; set; } 
    [Required]  
    public string Descripcion { get; set; } 
    [Required(ErrorMessage ="selecciona una imagen para tu curso")] 
    [DataType(DataType.Upload)] 
    public HttpPostedFileBase Imagen { get; set; } 
}

类贴到我的API

public class person 
{ 
    public string name { get; set; } 
    public string surname { get; set; } 
}

的API代码

[HttpPut] 
[Route("api/ProfesorCurso/test")] 
public string Put(person p) 
{ 
    return p.name + p.surname; 
}

我见

@model project.ViewModels.CourseViewModel 
<form id="Editcurso" method="post" action="#"> 
    @Html.AntiForgeryToken() 
    @Html.ValidationSummary(true, "Please fix the following errors.") 
    <div class="container"> 
     <div class="form-group"> 
      @Html.LabelFor(c=>c.Titulo) 
      @Html.TextBoxFor(c => c.Titulo, new {id="titulo", @class="form-control"})   
      @Html.ValidationMessageFor(m => m.Titulo) 
     </div> 
     <div class="form-group"> 
      @Html.LabelFor(c => c.Descripcion) 
      @Html.TextAreaFor(c => c.Descripcion, new {id="descripcion", @class = "form-control" }) 
      @Html.ValidationMessageFor(m => m.Descripcion) 
     </div> 
     <div class="thumbnail" id="imagencurso"></div> 
     <div class="form-group"> 
      @Html.LabelFor(m => m.Imagen) 
      @Html.TextBoxFor(m => m.Imagen, new {id="imagen" ,type = "file", data_rule_validCustomer = "true" }) 
      @Html.ValidationMessageFor(m => m.Imagen) 
     </div> 
     <button id="submiter" type="submit" class="btn btn-primary">Listo!</button> 
    </div> 
</form>

视图中的脚本

@section scripts 
{ 
    @Scripts.Render("~/bundles/jqueryval") 
    <script> 
     $(document).ready(function() { 
      $("#submiter").click(function() { 
       jQuery.support.cors = true; 
       var person = new Object(); 
       person.name = "Sourav"; 
       person.surname = "Kayal"; 
       $.ajax({ 
        url: '/api/ProfesorCurso/test', 
        type: 'PUT', 
        dataType: 'json', 
        data: person, 
        success: function (data) { 
         console.log(data); 
         return false; 
        }, 
        error: function (x, y, z) { 
         alert('error al postear'); 
         return false; 
        } 
       }); 
      }); 
     }); 
    </script> 
}

如何防止ajax在单击我的表单按钮时调用我的api，如果有jquery验证错误？

感谢

来源

2017-09-17 ev vk

你应该处理.submit()事件的形式，然后你可以检查.valid()，如果不取消Ajax调用。注意你也应该取消默认提交。

$('#Editcurso').submit(e) { 
    e.preventDefault(); // prevent the default submit 
    if (!$(this).valid()) { 
     return; // exit the function and display the errors 
    } 
    .... 
    $.ajax({ 
     .... 
    }); 
}

作为一个侧面说明，没有一点增加new { id="titulo" }等 - 的HtmlHelper方法生成表单控件已经基于属性名

来源

2017-09-17 02:39:54

哇添加id属性！这太好了！经过两天的尝试和尝试，我得到它的工作！谢谢 –

很高兴，但我对你实际在这里做的事情感到有点困惑 - 你的观点是基于'CourseViewModel'，但是你发布'person'的数据 - 你在哪里提交'CourseViewModel'的数据？ –

我以人为例来简化我的调试。我这样做是因为我无法使用AJAX正确调用我的api。其实我不是以“正常”的方式发回任何东西（意思是我回发给mvc控制器），我只是使用ajax来更新或发布到我的后端。 –

ajax mvc html：jquery val无法阻止对api的呼叫

回答

相关问题