製品版のみの機能

エディター - 数値エディター MVC

売上総利益

￥738990.00

当期純利益

￥773022.95

国税 % 地方税 % 国民年金 % 医療保険 %

このサンプルは、より大きい画面サイズのためにデザインされました。

モバイルデバイスで画面を回転、フルサイズ表示、またはその他のデバイスにメールで送信します。

このサンプルは、igNumericEditor コントロールの基本的な使用方法を紹介します。

コードビュー

クリップボードへコピー

ASP.NET ビュー
ASP.NET コントローラー

                @using Infragistics.Web.Mvc


<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/structure/infragistics.css" rel="stylesheet" />
    <style>
        #payment {
            width: 50%;
            border: 1px solid #ccc;
            box-sizing: border-box;
            padding: 20px;
        }

        #salary {
            float: left;
        }

        #salary > p {
            margin-bottom: 20px;
        }

        .sample-page h2 {
            margin-top: 0;
        }

        #deduction {
            float: right;
        }

        #deduction label {
            display: block;
        }

        .ui-igedit-container {
            margin-bottom: 15px;
        }

        .clearfix:after {
            content: "";
            display: table;
            clear: both;
        }

        @@media screen and (max-width:785px) {
            #payment {
                width: 60%;
            }
        }

        @@media screen and (max-width:685px) {
            #payment {
                width: 100%;
            }
        }

        @@media screen and (max-width:420px) {
            #salary, #deduction {
                float: none;
            }
        }
    </style>

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script>

</head>
<body>
    <div id="payment" class="clearfix">
        <div id="salary">
            <h2>売上総利益</h2>
            <p id="gross">￥738990.00</p>
            <h2>当期純利益</h2>
            <p id="nett">￥773022.95</p>
        </div>
        <div id="deduction">
            <label for="federalTax">国税 %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("federalTax")
                        .Value(10)
                        .ListItems(new List<object>() { 10, 15, 25, 28, 33, 35 })
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())
            <label for="stateTax">地方税 %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("stateTax")
                        .ButtonType(TextEditorButtonType.Spin)
                        .SpinDelta(0.01)
                        .MinValue(-5.53)
                        .MaxValue(5.53)
                        .Value(-5.00)
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())
            <label for="socialSecurity">国民年金 %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("socialSecurity")
                        .Value(-10.0)
                        .MinValue(-12.4)
                        .MaxValue(12.4)
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())
            <label for="medicare">医療保険 %</label>
            @(Html.Infragistics().NumericEditor()
                        .ID("medicare")
                        .Value(2.9)
                        .AddClientEvent(EditorClientEvents.ValueChanged, "changingValue")
                        .Render())

        </div>
    </div>
    <script>
            function changingValue() {
                var newNettIncome = nettChange().toLocaleString();
                $("#nett").text("$ " + newNettIncome);
            }

            function nettChange() {

            	var gross = 6000.00, nett, grossMadicare, grossSecurity, grossFederalTax, grossStateTax;
            	var federalTax = $("#federalTax").igNumericEditor("value");
            	var stateTax = $("#stateTax").igNumericEditor("value");
            	var socialSecurity = $("#socialSecurity").igNumericEditor("value");
            	var medicare = $("#medicare").igNumericEditor("value");

            	grossSecurity = (gross * socialSecurity) / 100;
            	grossMadicare = (gross * medicare) / 100;
            	gross = gross - (grossSecurity + grossMadicare);


            	grossFederalTax = (gross * federalTax) / 100;
            	grossStateTax = (gross * stateTax) / 100;

            	nett = gross - (grossFederalTax + grossStateTax);

            	return parseFloat(nett.toFixed(2));

            }
    </script>

</body>
</html>

                 using IgniteUI.SamplesBrowser.Models.DataAnnotations;
using IgniteUI.SamplesBrowser.Models.Northwind;
using IgniteUI.SamplesBrowser.Models.Repositories;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IgniteUI.SamplesBrowser.Controllers
{
    public class EditorsController : Controller
    {
        //
        // GET: /Editors/

        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation()
        {
            ValidatedOrder model = new ValidatedOrder();
			ViewData["message"] = String.Empty;
			model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [HttpPost]
        [ActionName("data-annotation-validation")]
        public ActionResult DataAnnotationValidation(ValidatedOrder model)
        {
			if (ModelState.IsValid)
			{
				ViewData["message"] = "製品を保存しました";
			}
            model.ShipMethodList = this.GetShipMethods();
            return View("data-annotation-validation", model);
        }

        [ActionName("load-and-save-form-values")]
        public ActionResult EditProduct()
        {
            Product product = RepositoryFactory.GetProductRepository().Get().First();
            ViewData["message"] = String.Empty;
            return View("load-and-save-form-values", product);
        }

        [ActionName("text-editor-mvc")]
        public ActionResult TextEditor()
        {
            return View();
        }

        [ActionName("date-editor-mvc")]
        public ActionResult DateEditor()
        {
            return View();
        }

        [ActionName("numeric-editor-mvc")]
        public ActionResult NumericEditor()
        {
            return View();
        }

        [ActionName("mask-editor-mvc")]
        public ActionResult MaskEditor()
        {
            return View();
        }

        public List<SelectListItem> GetShipMethods()
        {
            List<SelectListItem> selectList = new List<SelectListItem>()
            {
                new SelectListItem { Text = "標準", Value = "Standard" },
                new SelectListItem { Text = "1 日", Value = "OneDay" },
                new SelectListItem { Text = "2 日", Value = "TwoDay" },
                new SelectListItem { Text = "海外発送", Value = "International" }
            };
            return selectList;
        }

    }
}

Ignite UI for jQuery | サンプル

検索結果

エディター - 数値エディター MVC

売上総利益

当期純利益

コードビュー

Ignite UI for jQuery | サンプル

検索結果

エディター - 数値エディター MVC

売上総利益

当期純利益

コード ビュー

コードビュー