製品版のみの機能

エディター - フォーム値の保存と読み込み

製品名	内容量
単価	在庫数
入荷待ち	再発注レベル

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

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

この編集フォームのサンプルでは、複数の igEditor コントロールがあります。エディターの値はサーバーで設定されています。サンプルコードは、[送信] ボタンを押すときに、変更をサーバーに保存します。

コードビュー

クリップボードへコピー

                @using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models

@model IgniteUI.SamplesBrowser.Models.Northwind.Product

<!DOCTYPE html>

<html>
<head>
    <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" />

    <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>
    <style type="text/css">
        td {
            vertical-align: top;
        }

        label {
            display: block;
            line-height: 20px;
        }

        .mainTable {
            position: relative;
            width: 350px;
            margin-left: -175px;
            left: 50%;
            border-collapse: collapse;
        }

        .fonts {
            font-family: Verdana;
            font-size: 0.8em;
        }

        #submitEvent {
            float: right;
            height: 30px;
            margin-top: 10px;
        }

        .success {
            color: #458B00;
            float: right;
        }

        @@media all and (max-width: 400px) {
            .mainTable {
                width: 180px;
                margin-left: -90px;
            }

            .mainTable td {
                float: left;
            }
        }
    </style>
    <div class="sampleContents">
        <div class="sample-container">
            @using (Html.BeginForm())
            {
            @Html.HiddenFor(m => m.ID)
            <table cellpadding="5" cellspacing="0" class="mainTable">
                <tr>
                    <td style="vertical-align:top;">           
                        <label class="fonts">
                            製品名</label>
                        @(Html.Infragistics().TextEditorFor(m => m.ProductName)
                         .ID("textEditorProductName")
                         .ValidatorOptions(m => m.Required(true).OnBlur(true).OnSubmit(true))
                         .Width("160")
                         .Render())
                    </td>
                    <td>
                        <label class="fonts">
                            内容量</label>
                         
                        @(Html.Infragistics().NumericEditorFor(m => m.QuantityPerUnit)
                         .ID("numericEditorQuantityPerUnit")
                         .ValidatorOptions(m => m.Required(true).OnBlur(true).OnSubmit(true))
						.Width("160")
                         .Render())
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="fonts">
                            単価</label>
                   
                        @(Html.Infragistics().CurrencyEditorFor(m => m.UnitPrice)
                         .ID("currencyEditorUnitPrice")
                         .ValidatorOptions(m => m.Required(true).OnBlur(true).OnSubmit(true))
						.Width("160")
                         .MinValue(0)
                         .Render())
                          
                    </td>
                    <td>
                        <label class="fonts">
                        在庫数</label>
                         
                        @(Html.Infragistics().NumericEditorFor(m => m.UnitsInStock)
                            .ID("numericEditorUnitsInStock")
                            .ValidatorOptions(m => m.Required(true).OnBlur(true).OnSubmit(true))
							.Width("160")
                            .MinValue(0)
                            .Render())
                    </td>
                </tr>
                <tr>
                    <td>
                        <label class="fonts">
                        入荷待ち</label>
                         
                        @(Html.Infragistics().NumericEditorFor(m => m.UnitsOnOrder)
                            .ID("numericEditorUnitsOnOrder")
                            .ValidatorOptions(m => m.Required(true).OnBlur(true).OnSubmit(true))
							.Width("160")
                            .MinValue(0)
                            .Render())
                    </td>
                    <td>
                       <label class="fonts">
                         再発注レベル</label>
                         
                        @(Html.Infragistics().NumericEditorFor(m => m.ReorderLevel)
                            .ID("numericEditorReorderLevel")
                            .ValidatorOptions(m => m.Required(true).OnBlur(true).OnSubmit(true))
							.Width("160")
                            .MinValue(0)
                            .Render())
                       <input type="submit" id="submitEvent" value="送信" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="border: none;">
                    @if (ViewData["message"] != String.Empty)
                    { 
                    <span class="success">@ViewData["message"]</span>
                    }
                    </td>
                </tr>
            </table>
            
            }
        </div>
    </div>
</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;
        }

    }
}

             using IgniteUI.SamplesBrowser.Models.Repositories;
using System;

namespace IgniteUI.SamplesBrowser.Models.Northwind
{
    public class Product
    {
        public int ID { get; set; }
        public string ProductName { get; set; }
        public Nullable<int> SupplierID { get; set; }
        public Nullable<int> CategoryID { get; set; }
        public string QuantityPerUnit { get; set; }
        public Nullable<decimal> UnitPrice { get; set; }
        public Nullable<short> UnitsInStock { get; set; }
        public Nullable<short> UnitsOnOrder { get; set; }
        public Nullable<short> ReorderLevel { get; set; }
        public string SupplierName { get; set; }
        public string CategoryName { get; set; }
        public int Rating { get; set; }
        public bool Discontinued { get; set; }
        public string CategoryImageUrl { get; set; }
    }
}

Ignite UI for jQuery | サンプル

検索結果

エディター - フォーム値の保存と読み込み

コードビュー

Ignite UI for jQuery | サンプル

検索結果

エディター - フォーム値の保存と読み込み

コード ビュー

コードビュー