JQuery Function MVC中不調用控制器的Ajax方法

Question

我有JQuery函數來收集所有選中的romsIds並傳遞給控制器​​方法，但它不調用控制器方法。 控制器名稱：ApproveURLsController

這裏我的代碼：

$("#Approve").click(function() { 

    checkedIds = $(".ckb").filter(":checked").map(function() { return this.id; }); 

    $.ajax({ 
     type: "POST", 
     url: "@Url.Action("ApproveOrRejectAll", "ApproveURLs")", 
     traditional: true, 
     data: { Ids: checkedIds.toArray() , Status: "A" }, 
     success: sucessFunc, 
     error: errorFunc 
    }); 

    function successFunc(data, status) { 

     location.reload(); 
    } 
    function errorFunc(data, status) { 

     alert('error'); 
    } 
}); 

在上面的代碼 「批准」

是按鈕，這是我喜歡這個

<input type="button" value="Approve" id="Approve" class="btn btn-primary" /> 

和我的控制器方法定義

[HttpPost] 
public void ApproveOrRejectAll(List<int> Ids, string Status) 
{ 

} 

我無法找出問題所在，請在此幫助我。

Answer 1

創建模型來保存所需的值。

public class ApproveOrRejectAllModel { 
    public List<int> Ids { get; set; } 
    public string Status { get; set; } 
} 

更新操作以使用定義的模型

[HttpPost] 
public void ApproveOrRejectAll([FromBody]ApproveOrRejectAllModel model) { 
    List<int> Ids = model.Ids; 
    string Status = model.Status; 

    //..other code 
} 

在客戶端上確保數據正確發送。

$("#Approve").click(function() { 

    checkedIds = $(".ckb").filter(":checked").map(function() { return this.id; }); 

    //Constructing payload to be posted. 
    var model = { Ids: checkedIds.toArray(), Status: "A" }; 

    $.ajax({ 
     type: "POST", 
     url: "@Url.Action("ApproveOrRejectAll", "ApproveURLs")", 
     traditional: true, 
     data: JSON.stringify(model), //<-- stringify data to be sent. 
     success: sucessFunc, 
     error: errorFunc 
    }); 

    function successFunc(data, status) { 

     location.reload(); 
    } 
    function errorFunc(data, status) { 

     alert('error'); 
    } 
}); 

Answer 2

不能通過HTTP調用Non-ActionResult函數而沒有一些解決方法。

您必須將[WebMethod]嵌入到您的void ApproveOrRejectAll（...）之上或將類型更改爲ActionResult。

Answer 3

使用可以達到這個使用Java腳本陣列

查看： -

<div> 
    <input type="checkbox" name="checkBoxHeader" class="checkBoxHeader" value="1" /> 1 
    <input type="checkbox" name="checkBoxHeader" class="checkBoxHeader" value="2" /> 2 
    <input type="checkbox" name="checkBoxHeader" class="checkBoxHeader" value="3" /> 3 
</div> 

<div class="form-group"> 
    <div class="col-md-offset-2 col-md-10"> 
     <input type="submit" value="Login" class="btn btn-default" id="btnSummit"/> 
    </div> 
</div> 
@Scripts.Render("~/bundles/jquery") 
<script type="text/javascript"> 
    var obj; 
    $(".checkBoxHeader").click(function() { 
     var checkBoxValueToPush = new Array(); 

     //checked check box value 
     $('.checkBoxHeader:checked').each(function() { 
      checkBoxValueToPush.push($(this).val()); 
     }); 
     obj = { 
      CheckeBoxdIds: checkBoxValueToPush 
     }; 
    }); 
    $("#btnSummit").click(function() { 
     $.ajax({ 
      url: '/Default/filterData', 
      contentType: 'application/json; charset=utf-8', 
      type: 'POST', 
      data: JSON.stringify(obj), 
      cache: false, 
      success: function() { 
      }, 
      error: function (xhr, status, error) { 
       alert("Error"); 
      } 
     }); 
    }); 
</script> 

控制器： -

[HttpPost] 
     public void filterData(List<int> CheckeBoxdIds) 
     { 
      // Code 
     } 

希望它的工作！

快樂編碼！

Answer 4

嗨按照您的代碼片斷我明白，你缺少的東西你的code.I解釋一個例子來調用控制器使用Ajax。

//Define the type of result you want from you controller here I m describing for JSONResut 
    //Controller with 2 parameter's make sure the type and name of parameter posted is same as written in controller method. 
    public JsonResult SaveEmployeeRecord(string id,string name) 
    { 
     string this_id = id; 
     string this_name = name; 
     // do here some operation 
     return Json(new {id=this_id,name = this_name },JsonRequestBehavior.AllowGet); 
} 

//View /Javascript to call action method 
$.ajax({ 
      type: 'POST', 
      dataType: 'json', 
      url: '/Home/SaveEmployeeRecord', 
      data: { id: '67', name: 'Prashant' }, 
      success: function (Data) { 
       alert(data.id); 
       alert(data.name); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 

      } 
     });