After developing a basic MVC 5 application, I followed these steps:
- Create model (using code first) with 4 properties
- In the controller, generate view by scaffold.
Everything seems to be functioning correctly! However, when I click on the create button, it takes me to a new page with the necessary fields for creation. This behavior is default, but I am looking for a way to perform an inline create without leaving the current page. In other words, I want the 'create' action to add a new empty row at the beginning of the table with input elements and checkboxes along with a save button on one side.
Here is my simple model and the UI generated by scaffold:
namespace Emp01.Models
{
public class Emp
{
public string name { get; set; }
public Boolean checkBox1 { get; set; }
public Boolean checkBox2 { get; set; }
public Boolean checkBox3 { get; set; }
}
public class EmpDbContext : DbContext
{
public EmpDbContext()
: base("DefaultConnection")
{
}
public DbSet<Emp> Emps { get; set; }
}
}
This is the view
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
// Table column headers....
</tr>
@foreach (var item in Model) {
<tr>
// Display item details
</tr>
}
</table>
Update
In addition to Patil's suggestion, I made some modifications:
- I added the code from the create operation to the index page and changed the form class from vertical to inline.
2. Added a new div with an ID of context that should toggle.
Currently, there are two things missing:
- How can I make the toggle function work when clicking on the button?
2. When running the page, I encountered an error in the link code (model => model.name) because it is currently empty. Even though the create page is also empty, I fail to understand why...
Please assist!
<script>
jQuery(document).ready(function () {
jQuery(".content").hide();
});
$("#addmoret").click(function () {
$(".content").toggle();
});
</script>
@* ----- Code Snippet goes here ------ *@
<div class="content">
<div class="form-inline">
// Form elements...
</div>
</div>
Update 2
@Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
Error Message: 'System.Collections.Generic.IEnumerable' does not contain a definition for 'name' ...
Lastly, I added a button:
<button type='button' id='addmore' class="btn ui-state-default medium" value='Add More Credit ?' style="width: 200px;">Create </button>