Add 2 numbers in MVC
Download the sample project from the link below:
http://demos.essentialsolve.com/demos/Files/MVC/DemoCal.rar
- Create a new project in Visual Studio.
- Name the project as "MVCDemoCalc".
- Click Ok.
http://demos.essentialsolve.com/demos/Files/MVC/DemoCal.rar
- Create a new project in Visual Studio.
- Name the project as "MVCDemoCalc".
- Click Ok.
- In the next screen, select "Internet Application" in Project Template and Razor as View Engine. Click Ok.
- A new project opens. You will see 3 folders in the Solution Explorer named as View, Controller and Model as shown below.
- Create a New class named as MathCalc in the Model folder. Define a method named as Sum to add the 2 numbers.
public class MathCal
{
[DisplayName("Value1")]
public double Value1 { get; set; }
[DisplayName("Value2")]
public double Value2 { get; set; }
public double Sum(double v1, double v2)
{
return v1+v2;
}
}
- A new project opens. You will see 3 folders in the Solution Explorer named as View, Controller and Model as shown below.
- Create a New class named as MathCalc in the Model folder. Define a method named as Sum to add the 2 numbers.
public class MathCal
{
[DisplayName("Value1")]
public double Value1 { get; set; }
[DisplayName("Value2")]
public double Value2 { get; set; }
public double Sum(double v1, double v2)
{
return v1+v2;
}
}
- Create a controller "MathCalController" in Controller folder.
- This class uses the MathCal class object. Below is the code:
public class MathCalController : Controller
{
//
// GET: /MathCal/
public ActionResult Index(MathCal objMathCal)
{
ViewBag.Results = objMathCal.Sum(objMathCal.Value1, objMathCal.Value2);
return View(objMathCal);
}
}
- Compile the project to generate classes.
- Right click the ActionResult to generate the detail view.
- Give View Name as 'Index'. View Enginer as Razor. Select the checkbox 'Create a strongly typed view'. Selec the model class 'MathCal'. Choose Scaffold Template as Details. Click select. Below is the modified code of Index.cshtml:
@model MVCDemoCalc.Models.MathCal
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
using (@Html.BeginForm())
{
<fieldset>
<legend>MathCal</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.Value1)
@Html.EditorFor(model => model.Value1)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Value2)
@Html.EditorFor(model => model.Value2)
</div>
<div class="display-label">
@Html.Label("Result")
@ViewBag.Results
</div>
</fieldset>
<p>
<input type="submit" value="Add" />
</p>
}
</body>
</html>
- Open RoutConfig.cs file located in App_Start folder. Change the default startup page as below:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "MathCal", action = "Index", id = UrlParameter.Optional }
);
}
- Run the program and check the output. Here below is the ouput:
- This class uses the MathCal class object. Below is the code:
public class MathCalController : Controller
{
//
// GET: /MathCal/
public ActionResult Index(MathCal objMathCal)
{
ViewBag.Results = objMathCal.Sum(objMathCal.Value1, objMathCal.Value2);
return View(objMathCal);
}
}
- Compile the project to generate classes.
- Right click the ActionResult to generate the detail view.
@model MVCDemoCalc.Models.MathCal
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
using (@Html.BeginForm())
{
<fieldset>
<legend>MathCal</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.Value1)
@Html.EditorFor(model => model.Value1)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Value2)
@Html.EditorFor(model => model.Value2)
</div>
<div class="display-label">
@Html.Label("Result")
@ViewBag.Results
</div>
</fieldset>
<p>
<input type="submit" value="Add" />
</p>
}
</body>
</html>
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "MathCal", action = "Index", id = UrlParameter.Optional }
);
}
- Run the program and check the output. Here below is the ouput:
No comments:
Post a Comment