2015-01-02 89 views
0

我是MonoDevelop,C#和Linux的新手。要了解事情是如何工作的,我試圖製作一個簡單的網頁來輸入矩形的高度和寬度,然後使用提交按鈕來計算和顯示該區域。如何在C#中使用MonoDevelop檢索HTML文本框的值

我有兩個問題。首先,我無法獲得提交按鈕來實際執行任何操作。其次,我無法在C#代碼中獲取文本框的值。一旦我得到它,我認爲我可以處理好這些數值來計算面積並將其吐出。 Request.Form命令是我相信的問題點。

這是我到目前爲止有:

<body> 
 
\t <div> 
 
\t \t Height <input type="text" name="inHeight" value=1 /><br /> 
 
\t \t Width <input type="text" name="inWidth" value=1 /><br /> 
 
\t \t <br /> 
 
\t \t <input type="button" name="btnCalculateArea" value="Calculate Area" onclick="CalculateArea()" /><br /> 
 
\t \t <br /> 
 
\t \t <%= Html.Encode(ViewData["Message"]) %> 
 
\t </div> 
 
</body>

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Web.Mvc.Ajax; 

namespace rectangle_area.Controllers 
{ 
    public class HomeController : Controller 
    { 
     public string strHeight; 
     public string strWidth; 
     public int intHeight; 
     public int intWidth; 
     public double dblArea; 

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

     public ViewResult CalculateArea() 
     { 
      strHeight = Request.Form ["inHeight"]; 
      strWidth = Request.Form ["inWidth"]; 

      if (strHeight != null && strWidth != null) { 
       intHeight = Convert.ToInt16 (strHeight); 
       intWidth = Convert.ToInt16 (strWidth); 

       dblArea = intHeight * intWidth; 

       ViewData ["Message"] = "The area of this rectangle is " + dblArea + " square units."; 
      } else { 
       ViewData ["Message"] = "Please enter values for the Height and Width."; 
      } 

      return View(); 
     } 
    } 
} 
+0

你要撥打的'CalculateArea'在'HomeController',因爲我可以從你的代碼明白,但在你的標記,你只需綁定到您的按鈕的單擊事件具有相同名稱的函數。這不起作用。你必須綁定一個函數,使ajax調用你的控制器。此外,如果沒有任何腳本用「CalculateArea」名稱加載函數,您應該會得到一個異常,如果您打開瀏覽器的開發人員工具並查看控制檯的輸出。 – Christos

+0

是的,你是對的。我在Firefox中得到一個ReferenceError,這個函數沒有定義。我會試着弄清楚如何進行適當的調用。 有關從文本框中獲取適當值到C#代碼中進行計算的任何想法? – bungee41

回答

0

你必須有綁定的功能,使一個AJAX調用您的控制器。

感謝您的指導,Christos!在朋友和更多研究的幫助下,我得到了它的工作。這是我結束了:

<head runat="server"> 
 
\t <title>Calculate the area of a rectangle</title> 
 
\t <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      var serviceURL = '/Home/CalculateArea'; 
 
\t \t \t 
 
\t \t \t $('#calcBtn').click(function(){ 
 
\t \t \t \t $.ajax({ 
 
      \t  type: "GET", 
 
       \t url: serviceURL, 
 
       \t data: { inHeight: $("#inHeight").val(), inWidth: $("#inWidth").val() }, 
 
\t     contentType: "application/json; charset=utf-8", 
 
\t     dataType: "json", 
 
\t     success: successFunc, 
 
\t     error: errorFunc 
 
      \t }); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t function successFunc(data, status) {  
 
       alert(data); 
 
      } 
 
\t \t \t 
 
      function errorFunc() { 
 
       alert('error'); 
 
      } 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
\t <div> 
 
\t \t Height <input type="text" id="inHeight" value=2 /><br /> 
 
\t \t Width <input type="text" id="inWidth" value=3 /><br /> 
 
\t \t <br /> 
 
\t \t <input id="calcBtn" type="submit" value="Calculate Area" /><br /> 
 
\t \t <br /> 
 
\t \t 
 
\t </div> 
 
</body>

 
    [HttpGet] 
    public ActionResult CalculateArea() 
    { 
     strHeight = Request.Params ["inHeight"]; 
     strWidth = Request.Params ["inWidth"]; 

     if (strHeight != null && strWidth != null) { 
      intHeight = Convert.ToInt16 (strHeight); 
      intWidth = Convert.ToInt16 (strWidth); 

      dblArea = intHeight * intWidth; 

      ViewData ["Message"] = "The area of this rectangle is " + dblArea + " square units."; 
     } else { 
      ViewData ["Message"] = "Please enter values between 0 and 999."; 
     } 

     return Json(ViewData["Message"], JsonRequestBehavior.AllowGet); 
    }
相關問題