2014-11-06 66 views
0

我正在使用visual studio 2013,MVC4和C#做一個簡單的應用程序。這個網絡應用程序有一個包含多個複選框的表格和一個默認情況下已升級的更新按鈕。當點擊一個或多個複選框時,激活按鈕。單擊按鈕時運行控制器方法MVC4 C#

這裏的想法是,當單擊「更新」按鈕並將這些更改保存在數據庫中時,將複選框的所有信息(哪些是打開或關閉)發送到服務器。

爲了實現這一點,我試圖通過jquery使用ajax,但不幸我沒有成功,因爲當我點擊按鈕時什麼都沒有發生。

這是cshtml文件,我用它來生成客戶端的觀點:

<input type="submit" value="Save Checkbox Changes" class="btn btn-primary disabled" id="SaveCheckboxChanges" /> 

<table class="table"> 
    <tr> 
     <th> 
      @Html.DisplayNameFor(model => model.RequiresSetup) 
     </th> 
     <th> 
      @Html.DisplayNameFor(model => model.Disabled) 
     </th> 
    </tr> 

    @{ 
     foreach (var item in Model) 
     { 

      <tr> 
       <td> 
        @Html.EditorFor(modelItem => item.RequiresSetup) 
       </td> 
       <td> 
        @Html.EditorFor(modelItem => item.Disabled) 
       </td> 
      </tr> 
     } 
} 
</table> 

的JavaScript代碼,我有按鈕SaveCheckboxChanges如下:

$("#SaveCheckboxChanges").click(function (event) { 
     if (!$("#SaveCheckboxChanges").hasClass("disabled")) { 

      $.ajax({ 
       url: '/Material/UpdateCheckBoxes', 
       type: 'POST', 
       data: {bla: "bdsjdnjsdnsnd" 

       }, 
       contentType: 'application/json; charset=utf-8', 
       success: function (data) { 
        alert(data.success); 
       }, 
       error: function() { 
        alert("error"); 
       } 
      }); 
     } 

    }); 

而且在我的材料控制器,我有以下幾種:

[HttpPost] 
public ActionResult UpdateCheckBoxes(string bla) 
{ 
    return Content("Working!" + bla); 
} 

我期望的是,點擊按鈕後,頁面顯示「Working」字符串,表示控制器中的功能正確執行。

但是,這並沒有發生,我看到的只是javascript錯誤提示。

如何使這個Ajax請求工作?我錯過了什麼?

+1

在Fiddler或DevTools中查看網絡事務時是否獲得404或500? – beauXjames 2014-11-06 16:49:18

+0

我收到500內部服務器錯誤! – 2014-11-06 17:15:01

+1

是啊......這意味着你實際上擊中了你的控制器,但是有一個問題......並且沒有data.success來提醒......調試從ajax調用返回的數據對象 – beauXjames 2014-11-06 17:21:49

回答

0

問題出在Ajax調用中。這裏是解決方案:

$.ajax({ 
       url: "Controler/Action", 
       type: 'POST', 
       contentType: 'application/json; charset=utf-8', 
       traditional: true, 
       data: JSON.stringify({ requiresSetupArray: requiresSetupArray, disabledArray: disabledArray }), 
       success: function (data) { 
        button.attr('value', 'Save Checkbox Changes'); 
        button.addClass('disabled'); 
       }, 
       error: function() { 
        alert("error"); 
       } 
      }); 

有幾件事情需要注意:

  • 字符串化是很重要的。沒有它,沒有任何工作
  • 小心with contentType
  • 小心檢查控制器正在執行的參數!

希望它能幫助未來的人!

1

你的控制器方法返回什麼...

將其轉換爲以下::

public String Material() 
{ 
    return "Working!"; 
} 
1

這不是事情是如何工作的。當您響應AJAX請求調用Response.Write時,實際的AJAX響應是字符串「Working!」。除非您將該字符串添加到DOM中的某個位置,否則將永遠不會寫入該頁面。

+0

仍然有相同的錯誤,但是現在修復了! – 2014-11-06 17:12:29

1

我在代碼中看到了3個不正確的東西。

1)[ValidateAntiForgeryToken] 你不會在你的ajax調用中實現它,所以你應該在你的控制器中刪除它。 (我不知道如何使用它與JQuery)。 2)如果您的控制器被稱爲「MaterialController.cs」,並且您沒有更改路線配置,則使用的URL是:'/ Material/Material'。

3)你的函數返回「void」。用字符串或ActionResult替換你的void。然後,通過返回「一些字符串」替換你的「Response.write」。

+0

1.刪除了令牌,2.更改了它,3.字符串不是類型的ActionResult,所以我不能這樣做:S – 2014-11-06 17:04:39

+0

路由配置沒有改變,並且該控制器被稱爲MaterialController.cs 路徑是正確的。當爲該控制器設置主頁時,該選項將打開。主頁在localhost:xxxx/Material,而不在localhost:xxxx/Material/Material。 – 2014-11-06 17:12:10

+0

您在MaterialController中肯定有「get」動作。如果不指定操作,則會爲您設置默認操作(get)。當你發生什麼時,只有這個行動的一個斷點? – 2014-11-07 12:23:42