2015-01-02 81 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); 
    }
相关问题