This section briefly explains about how to include a simple In-place Editor in your ASP.NET Core application. You can refer ASP.NET Core Getting Started documentation page for introduction part of the system requirements and configure the common specifications.
By default, Syncfusion ASP.NET Core TextBox control is rendered in In-place Editor with the type
property sets as Text.
<div style="margin:0 auto; width:300px;">
<ejs-inplaceeditor id="element" type="Text" value="ViewBag.value" model="ViewBag.modalData">
</ejs-inplaceeditor>
</div>
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.modalData = new { placeholder = "Enter employee name" };
ViewBag.value = "Andrew";
return View();
}
}
You can render the Syncfusion ASP.NET Core DropDownList by changing the type
property as DropDownList
and configure its properties and methods using the model
property.
In the following sample, type
and model values are configured to render the DropDownList
control.
<div style="margin:0 auto; width:300px;">
<ejs-inplaceeditor id="element" type="DropDownList" model="ViewBag.modalData" mode="Inline">
</ejs-inplaceeditor>
</div>
public class HomeController : Controller
{
public ActionResult Index()
{
string[] genderData = new string[] { "Male", "Female" };
ViewBag.modalData = new { placeholder = "Select gender", dataSource = genderData };
return View();
}
}
You can render the Essential JS2 DatePicker by changing the type
property as Date
and also configure its properties and methods using the model
property.
In the following sample, type
and model
values are configured to render the DatePicker
control.
<div style="margin:0 auto; width:300px;">
<ejs-inplaceeditor id="element" type="Date" value="ViewBag.dateValue" model="ViewBag.modalData">
</ejs-inplaceeditor>
</div>
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.dateValue = new DateTime(2018, 12, 04);
ViewBag.modalData = new { showTodayButton = true };
return View();
}
}
<div id='container'>
<div class="control-group">
<div class="e-heading">
<h3> Modify Basic Details </h3>
</div>
<table>
<tr>
<td>Name</td>
<td class='left'>
<ejs-inplaceeditor id="element" value="ViewBag.elementValue" model="ViewBag.elementModel" mode='Inline'>
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td>DOB</td>
<td class='left'>
<ejs-inplaceeditor id="dateofbirth" type="Date" value="ViewBag.dateValue" model="ViewBag.dateModel" mode='Inline'>
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td>Gender</td>
<td class='left'>
<ejs-inplaceeditor id="gender" type="DropDownList" value="ViewBag.dropValue" model="ViewBag.genderModel" mode='Inline'>
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</div>
<style>
#container .control-group {
margin-top: 50px;
}
#container .control-group table {
margin: auto;
}
#container .control-group table td {
height: 70px;
width: 150px;
}
#container .e-heading {
text-align: center;
}
#container .control-group table td {
text-align: left;
}
</style>
public class HomeController : Controller
{
public ActionResult Index()
{
ViewBag.elementModel = new { placeholder = "Enter your name" };
ViewBag.dateValue = new DateTime(2018, 12, 04);
ViewBag.dateModel = new { showTodayButton = true, placeholder = "Select date of birth" };
string[] genderData = new string[] { "Male", "Female" };
ViewBag.genderModel = new { placeholder = "Select gender", dataSource = genderData };
ViewBag.elementValue = "Andrew";
ViewBag.dropValue = "Male";
return View();
}
}
The output will be as follows.
You can submit editor value to the server by configuring the url
, adaptor
and primaryKey
property.
Property | Usage |
---|---|
url |
Gets the URL for server submit action. |
adaptor |
Specifies the adaptor type that is used by DataManager to communicate with DataSource. |
primaryKey |
Defines the unique primary key of editable field which can be used for saving data in the data-base. |
The
primaryKey
property is mandatory. If it’s not set, edited data are not sent to the server.
The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.
<div class="control_wrapper">
<div id='container'>
<div class='control-group'>
Best Employee of the year:
<ejs-inplaceeditor id="element" type="DropDownList" value="ViewBag.textValue" model="ViewBag.elementModel" mode='Inline' name="Employee" url="https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData" primaryKey="Employee" adaptor="UrlAdaptor" actionSuccess="actionSuccess">
</ejs-inplaceeditor>
</div>
<table style='margin:auto;width:50%'>
<tr>
<td style="text-align: left">
Old Value :
</td>
<td id="oldValue" style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">
New Value :
</td>
<td id="newValue" style="text-align: left">
Andrew Fuller
</td>
</tr>
</table>
</div>
</div>
<style>
.e-inplaceeditor {
min-width: 200px;
text-align: left
}
#container .control-group {
text-align: center;
margin: 100px auto;
}
</style>
<script>
function actionSuccess(e) {
var newEle = document.getElementById('newValue');
var oldEle = document.getElementById('oldValue');
oldEle.textContent = newEle.textContent;
newEle.textContent = e.value;
}
</script>
public class HomeController : Controller
{
public ActionResult Index()
{
string[] frameWorkList = new string[] { "Andrew Fuller", "Janet Leverling", "Laura Callahan", "Margaret Hamilt", "Michael Suyama", "Nancy Davloio", "Robert King" };
ViewBag.elementModel = new { dataSource = frameWorkList, placeholder = "Select employee", popupHeight = "200px" };
ViewBag.url = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";
ViewBag.textValue = "Andrew Fuller";
return View();
}
}
The output will be as follows.