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的呼叫

回答

相關問題