ASP.NET MVC Controls > Controls > Input > Common Features > Scaffolding |
The steps to scaffold ComponentOne Input control for ASP.NET MVC are as follows:
In the Solution Explorer, right-click the project name and select Add|New Scaffolded Item. The Add Scaffold wizard appears.
In the Add Scaffold wizard, select Common and then select C1 Scaffolder from the right pane. You can also select Common|MVC|Controller or Common|MVC|View and then C1 Scaffolder to add only a controller or a view.
Click Add.
Select Input control and click Next.
The C1 ASP.NET MVC Input wizard appears with the General tab selected by default.
In the General tab, specify the model as follows:
Input1Controller.cs |
Copy Code
|
---|---|
using System; using System.Collections.Generic; using System.Linq; using C1.Web.Mvc; using C1.Web.Mvc.Serializition; using System.Web; using System.Data; using System.Web.Mvc; using System.Data.Entity; // This code was generated by C1 Scaffolder. namespace C1MvcWebAppScaffolding.Controllers { public partial class Input2Controller : Controller { private C1MvcWebAppScaffolding.Models.C1NWindEntities db = new C1MvcWebAppScaffolding.Models.C1NWindEntities(); public ActionResult Index() { var model = db.Products; return View(model); } public ActionResult Details(int key1) { var model = db.Products.Find(key1); if (model == null) { return HttpNotFound(); } return View(model); } public ActionResult Create() { return View(); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Create([Bind(Include = "ProductID,ProductName,SupplierID,CategoryID,QuantityPerUnit,UnitPrice,UnitsInStock,UnitsOnOrder,ReorderLevel,Discontinued")] C1MvcWebAppScaffolding.Models.Product product) { if (ModelState.IsValid) { db.Products.Add(product); db.SaveChanges(); return RedirectToAction("Index"); } return View(product); } public ActionResult Edit(int key1) { var model = db.Products.Find(key1); if (model == null) { return HttpNotFound(); } return View(model); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Edit([Bind(Include = "ProductID,ProductName,SupplierID,CategoryID,QuantityPerUnit,UnitPrice,UnitsInStock,UnitsOnOrder,ReorderLevel,Discontinued")] C1MvcWebAppScaffolding.Models.Product product) { if (ModelState.IsValid) { db.Entry(product).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(product); } public ActionResult Delete(int key1) { var model = db.Products.Find(key1); if (model == null) { return HttpNotFound(); } return View(model); } [HttpPost, ActionName("Delete")] [ValidateAntiForgeryToken] public ActionResult DeleteConfirmed(int key1) { var model = db.Products.Find(key1); db.Products.Remove(model); db.SaveChanges(); return RedirectToAction("Index"); } protected override void Dispose(bool disposing) { if (disposing) { db.Dispose(); } base.Dispose(disposing); } } } |
The codes generated for the five views are as follows:
HTML Helpers
Create.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @using C1.Web.Mvc.Fluent @model C1MvcWebAppScaffolding.Models.Product <script> function timeChanged(sender) { var date = sender.value; var hour = date.getHours(); var min = date.getMinutes(); var second = date.getSeconds(); var inputDate = wijmo.Control.getControl("#inputDateFor" + sender.hostElement.id); inputDate.value.setHours(hour); inputDate.value.setMinutes(min); inputDate.value.setSeconds(second); inputDate.refresh(); } </script> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Product</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) <div class="form-group"> @Html.LabelFor(model => model.ProductID, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.ProductID).Required(false) @Html.ValidationMessageFor(model => model.ProductID, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputMaskFor(model => model.ProductName) @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.QuantityPerUnit, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputMaskFor(model => model.QuantityPerUnit) @Html.ValidationMessageFor(model => model.QuantityPerUnit, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.UnitPrice, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.UnitPrice).Required(false) @Html.ValidationMessageFor(model => model.UnitPrice, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.UnitsInStock, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.UnitsInStock).Required(false) @Html.ValidationMessageFor(model => model.UnitsInStock, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.UnitsOnOrder, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.UnitsOnOrder).Required(false) @Html.ValidationMessageFor(model => model.UnitsOnOrder, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div> <input type="submit" value="Create"/> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> |
Delete.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @using C1.Web.Mvc.Fluent @model C1MvcWebAppScaffolding.Models.Product <h3>Are you sure you want to delete this?</h3> <div> <h4>Product</h4> <hr /> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.ProductName) </dt> <dd> @Html.DisplayFor(model => model.ProductName) </dd> <dt> @Html.DisplayNameFor(model => model.QuantityPerUnit) </dt> <dd> @Html.DisplayFor(model => model.QuantityPerUnit) </dd> <dt> @Html.DisplayNameFor(model => model.UnitPrice) </dt> <dd> @Html.DisplayFor(model => model.UnitPrice) </dd> <dt> @Html.DisplayNameFor(model => model.UnitsInStock) </dt> <dd> @Html.DisplayFor(model => model.UnitsInStock) </dd> <dt> @Html.DisplayNameFor(model => model.UnitsOnOrder) </dt> <dd> @Html.DisplayFor(model => model.UnitsOnOrder) </dd> </dl> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-actions no-color"> <input type="submit" value="Delete" class="btn btn-default" /> | @Html.ActionLink("Back to List", "Index") </div> } </div> |
Details.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @using C1.Web.Mvc.Fluent @model C1MvcWebAppScaffolding.Models.Product <div> <h4>Product</h4> <hr /> <dl class="dl-horizontal"> <dt> @Html.DisplayNameFor(model => model.ProductName) </dt> <dd> @Html.DisplayFor(model => model.ProductName) </dd> <dt> @Html.DisplayNameFor(model => model.QuantityPerUnit) </dt> <dd> @Html.DisplayFor(model => model.QuantityPerUnit) </dd> <dt> @Html.DisplayNameFor(model => model.UnitPrice) </dt> <dd> @Html.DisplayFor(model => model.UnitPrice) </dd> <dt> @Html.DisplayNameFor(model => model.UnitsInStock) </dt> <dd> @Html.DisplayFor(model => model.UnitsInStock) </dd> <dt> @Html.DisplayNameFor(model => model.UnitsOnOrder) </dt> <dd> @Html.DisplayFor(model => model.UnitsOnOrder) </dd> </dl> </div> <p> @Html.ActionLink("Edit", "Edit", new {key1=Model.ProductID}) | @Html.ActionLink("Back to List", "Index") </p> |
Edit.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @using C1.Web.Mvc.Fluent @model C1MvcWebAppScaffolding.Models.Product <script> function timeChanged(sender) { var date = sender.value; var hour = date.getHours(); var min = date.getMinutes(); var second = date.getSeconds(); var inputDate = wijmo.Control.getControl("#inputDateFor" + sender.hostElement.id); inputDate.value.setHours(hour); inputDate.value.setMinutes(min); inputDate.value.setSeconds(second); inputDate.refresh(); } </script> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div class="form-horizontal"> <h4>Product</h4> <hr /> @Html.ValidationSummary(true, "", new { @class = "text-danger" }) @Html.HiddenFor(model => model.ProductID) <div class="form-group"> @Html.LabelFor(model => model.ProductName, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputMaskFor(model => model.ProductName) @Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.QuantityPerUnit, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputMaskFor(model => model.QuantityPerUnit) @Html.ValidationMessageFor(model => model.QuantityPerUnit, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.UnitPrice, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.UnitPrice).Required(false) @Html.ValidationMessageFor(model => model.UnitPrice, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.UnitsInStock, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.UnitsInStock).Required(false) @Html.ValidationMessageFor(model => model.UnitsInStock, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.UnitsOnOrder, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.C1().InputNumberFor(model => model.UnitsOnOrder).Required(false) @Html.ValidationMessageFor(model => model.UnitsOnOrder, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> <div> <input type="submit" value="Save"/> </div> </div> </div> } <div> @Html.ActionLink("Back to List", "Index") </div> |
Index.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @using C1.Web.Mvc.Fluent @model IEnumerable<C1MvcWebAppScaffolding.Models.Product> <p> @Html.ActionLink("Create New", "Create") </p> <table class="table"> <tr> <th> @Html.DisplayNameFor(model => model.ProductName) </th> <th> @Html.DisplayNameFor(model => model.QuantityPerUnit) </th> <th> @Html.DisplayNameFor(model => model.UnitPrice) </th> <th> @Html.DisplayNameFor(model => model.UnitsInStock) </th> <th> @Html.DisplayNameFor(model => model.UnitsOnOrder) </th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(model => item.ProductName) </td> <td> @Html.DisplayFor(model => item.QuantityPerUnit) </td> <td> @Html.DisplayFor(model => item.UnitPrice) </td> <td> @Html.DisplayFor(model => item.UnitsInStock) </td> <td> @Html.DisplayFor(model => item.UnitsOnOrder) </td> <td> @Html.ActionLink("Edit", "Edit", new {key1=item.ProductID}) | @Html.ActionLink("Details", "Details", new {key1=item.ProductID}) | @Html.ActionLink("Delete", "Delete", new {key1=item.ProductID}) </td> </tr> } </table> |
Tag Helpers
Create.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @addTagHelper *, C1.AspNetCore.Mvc @model C1MvcApplication1.Models.Product <script> function timeChanged(sender) { var date = sender.value; var hour = date.getHours(); var min = date.getMinutes(); var second = date.getSeconds(); var inputDate = wijmo.Control.getControl("#inputDateFor" + sender.hostElement.id); inputDate.value.setHours(hour); inputDate.value.setMinutes(min); inputDate.value.setSeconds(second); inputDate.refresh(); } </script> <form asp-action="Create"> <div class="form-horizontal"> <h4>Product</h4> <hr /> <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="ProductName" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-mask for="@Model.ProductName"> </c1-input-mask> <span asp-validation-for="ProductName" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="QuantityPerUnit" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-mask for="@Model.QuantityPerUnit"> </c1-input-mask> <span asp-validation-for="QuantityPerUnit" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="UnitPrice" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-number for="@Model.UnitPrice" required="false"> </c1-input-number> <span asp-validation-for="UnitPrice" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="UnitsInStock" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-number for="@Model.UnitsInStock" required="false"> </c1-input-number> <span asp-validation-for="UnitsInStock" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="UnitsOnOrder" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-number for="@Model.UnitsOnOrder" required="false"> </c1-input-number> <span asp-validation-for="UnitsOnOrder" class="text-danger"></span> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Create" class="btn btn-default" /> </div> </div> </div> </form> <div> <a asp-action="Index">Back to List</a> </div> |
Delete.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @addTagHelper "*, C1.Web.Mvc" @model C1MvcApplication1.Models.Product <h3>Are you sure you want to delete this?</h3> <div> <h4>Product</h4> <hr /> <dl class="dl-horizontal"> <dt> ProductName </dt> <dd> @Model.ProductName </dd> <dt> QuantityPerUnit </dt> <dd> @Model.QuantityPerUnit </dd> <dt> UnitPrice </dt> <dd> @Model.UnitPrice </dd> <dt> UnitsInStock </dt> <dd> @Model.UnitsInStock </dd> <dt> UnitsOnOrder </dt> <dd> @Model.UnitsOnOrder </dd> </dl> <form asp-action="Delete" asp-route-key1="@Model.ProductID"> <div class="form-actions no-color"> <input type="submit" value="Delete" class="btn btn-default" /> | <a asp-action="Index">Back to List</a> </div> </form> </div> |
Details.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @addTagHelper "*, C1.Web.Mvc" @model C1MvcApplication1.Models.Product <div> <h4>Product</h4> <hr /> <dl class="dl-horizontal"> <dt> ProductName </dt> <dd> @Model.ProductName </dd> <dt> QuantityPerUnit </dt> <dd> @Model.QuantityPerUnit </dd> <dt> UnitPrice </dt> <dd> @Model.UnitPrice </dd> <dt> UnitsInStock </dt> <dd> @Model.UnitsInStock </dd> <dt> UnitsOnOrder </dt> <dd> @Model.UnitsOnOrder </dd> </dl> </div> <p> <a asp-action="Edit" asp-route-key1="@Model.ProductID">Edit</a> | <a asp-action="Index">Back to List</a> </p> |
Edit.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @addTagHelper "*, C1.Web.Mvc" @model C1MvcApplication1.Models.Product <script> function timeChanged(sender) { var date = sender.value; var hour = date.getHours(); var min = date.getMinutes(); var second = date.getSeconds(); var inputDate = wijmo.Control.getControl("#inputDateFor" + sender.hostElement.id); inputDate.value.setHours(hour); inputDate.value.setMinutes(min); inputDate.value.setSeconds(second); inputDate.refresh(); } </script> <form asp-action="Edit"> <div class="form-horizontal"> <h4>Product</h4> <hr /> <div asp-validation-summary="ValidationSummary.ModelOnly" class="text-danger"></div> <div class="form-group"> <label asp-for="ProductName" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-mask for="@Model.ProductName"> </c1-input-mask> <span asp-validation-for="ProductName" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="QuantityPerUnit" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-mask for="@Model.QuantityPerUnit"> </c1-input-mask> <span asp-validation-for="QuantityPerUnit" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="UnitPrice" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-number for="@Model.UnitPrice" required="false"> </c1-input-number> <span asp-validation-for="UnitPrice" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="UnitsInStock" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-number for="@Model.UnitsInStock" required="false"> </c1-input-number> <span asp-validation-for="UnitsInStock" class="text-danger"></span> </div> </div> <div class="form-group"> <label asp-for="UnitsOnOrder" class="control-label col-md-2"></label> <div class="col-md-10"> <c1-input-number for="@Model.UnitsOnOrder" required="false"> </c1-input-number> <span asp-validation-for="UnitsOnOrder" class="text-danger"></span> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" value="Save" class="btn btn-default" /> </div> </div> </div> </form> <div> <a asp-action="Index">Back to List</a> </div> |
Index.cshtml |
Copy Code
|
---|---|
@using C1.Web.Mvc @addTagHelper "*, C1.Web.Mvc" @model IEnumerable<C1MvcApplication1.Models.Product> <p> <a asp-action="Create">Create New</a> </p> <table class="table"> <tr> <th>ProductName</th> <th>QuantityPerUnit</th> <th>UnitPrice</th> <th>UnitsInStock</th> <th>UnitsOnOrder</th> <th></th> </tr> @foreach (var item in Model) { <tr> <td> @item.ProductName </td> <td> @item.QuantityPerUnit </td> <td> @item.UnitPrice </td> <td> @item.UnitsInStock </td> <td> @item.UnitsOnOrder </td> <td> <a asp-action="Edit" asp-route-key1="@item.ProductID">Edit</a> | <a asp-action="Details" asp-route-key1="@item.ProductID">Details</a> | <a asp-action="Delete" asp-route-key1="@item.ProductID">Delete</a> </td> </tr> } </table> |