Overview:
This article explains how to create a sum of two numbers using model and javascript without a controller action in ASP.NET MVC. then pass the data from the view to the javascript function using by model. The following steps here.
Step-1:
Create a new project in visual studio 2019.
Step-2:
Step-3:
if you don't have a controller, Create a new controller in the controller folder. - Right-click on Model folder- Add new controller class enter the name as HomeController.cs
Or HomeController.cs is created automatically when you create a project.
Step-4:
Create a new view page from the controller- Right-click on the Controller action method then create the view.
Model Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVCJavascriptSum.Models
{
public class SumModel
{
public int a { get; set; }
public int b { get; set; }
public int total { get; set; }
}
}
Controller Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVCJavascriptSum.Models;
namespace MVCJavascriptSum.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
[HttpGet]
public ActionResult Sum()
{
return View();
}
[HttpPost]
public ActionResult Sum(SumModel sumModel)
{
return View();
}
}
}
View Code:
@model MVCJavascriptSum.Models.SumModel
@{
ViewBag.Title = "Sum";
}
<h2>Sum</h2>
@using (Html.BeginForm("Sum", "Home"))
{
<label>A value:</label>
@Html.TextBoxFor(Model => Model.a, new { @class = "form-control", @id = "txta" })
<label>B value:</label>
@Html.TextBoxFor(Model => Model.b, new { @class = "form-control", @onchange = "add()", @id = "txtb" })
<br />
<div class="col-lg-push-2">
<div class="col-lg-2"><label>Total:</label></div>
@Html.HiddenFor(Model => Model.total, new { @class = "form-control", @id = "total" })
@Html.TextBoxFor(Model => Model.total, new { @class = "form-control", style = "width:100px", @disabled = "true" })
</div>
<button id="sum" type="submit">Sum</button>
}
<script type="text/javascript">
function add() {
var a, b, total;
a = Number(document.getElementById("txta").value);
b = Number(document.getElementById("txtb").value);
total = a + b;
//alert(total);
document.getElementById("total").value = total;
// alert(total);
$("#total").value = total
}
</script>
Route Config.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace MVCJavascriptSum
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Sum", id = UrlParameter.Optional }
);
}
}
}
https://youtu.be/y2x77PLjaMc
Summary
This tutorial explains, how to create a sum of two numbers using model and javascript in asp.net MVC C#. Learn more and share with your friends and relatives. any comments are given below.
Thank you for reading my blogs..!!
