I have a normal index page where the list of the contents in the database are displayed. I have a create button in my Index which as of now redirects to another page to Create a new item.
First I tried partial Views to get it working but the page still redirected to another page with no layout. Then I tried using Jquery to hide/show div that contains the HTML code for Create. But I could not post the value to the correct Action method.
I am not having all that I have tried so far. I suppose my Index View wouldn't be of great interest.
Index View when using Jquery
<div> Displaying the index View</div>
<div id="Create" style="display:none">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LsystemFamily.FamilyName, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.LsystemFamily.FamilyName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LsystemFamily.FamilyName, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LsystemFamily.DescriptionEN, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.LsystemFamily.DescriptionEN, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LsystemFamily.DescriptionEN, "", new { @class = "text-danger" })
@Html.LabelFor(model => model.LsystemFamily.DescriptionDE, htmlAttributes: new { @class = "control-label col-md-2" })
@Html.EditorFor(model => model.LsystemFamily.DescriptionDE, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.LsystemFamily.DescriptionDE, "", new { @class = "text-danger" })
<input type="submit" value="Create" class="btn btn-default" />
}
Jquery
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
Controller (when returning Partial View)
public ActionResult Create()
{
return View("_Create");
}
Index View when returning Partial View
<div>
Index View
@Html.ActionLink("Create","Create","Controller");
</div>
@Html.Partial("_Create")
In none of the cases I had my Create
displaying the way I wanted.
Based on the Answers I have tried to add the partial View and then toggle the div. but i get the following error
An exception of type 'System.InvalidOperationException' occurred in System.Web.Mvc.dll but was not handled in user code
Additional information: The model item passed into the dictionary is of type 'System.Data.Entity.Infrastructure.DbQuery`1[TEDALS_Ver01.Models.LsystemFamily]', but this dictionary requires a model item of type 'TEDALS_Ver01.Models.LsystemFamily'.
Update : Index View
@using (Html.BeginForm())
{
<p>
Search @Html.TextBox("SearchString")
<input type="submit" class="btn btn-default" value="Search" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
<table class="table">
<tr>
<th>
Family Name
</th>
<th>
System Count
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td data-toggle="tooltip" title="@item.DescriptionDE" data-placement="right">
@Html.ActionLink(item.FamilyName, "ViewSystems", "LsystemFamilies", new { id = @item.LsystemFamilyID},null)
</td>
<td data-toggle="tooltip" title="Number of Systems in @item.FamilyName" data-placement="right">
@Html.DisplayFor(modelItem => item.LsystemCount)
</td>
<td>
@*@Html.ActionLink("Add System", "Create", "Lsystems", new { id = item.LsystemFamilyID }, null)|*@
@Html.ActionLink("Edit", "Edit", new { id = item.LsystemFamilyID }) |
@Html.ActionLink("Details", "Details", new { id = item.LsystemFamilyID }) |
@Html.ActionLink("Delete", "Delete", new { id = item.LsystemFamilyID })|
</td>
</tr>
}
</table>
<input type="button" id="btn" class="btn btn-default" value="Create">
</div>
<div id="Create" style="display:none">
@Html.Partial("_Create")
</div>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
@Scripts.Render("~/bundles/jqueryval")
}
UPDATE: Create Post method
public ActionResult Create([Bind(Include = "LsystemFamilyID,FamilyName,LsystemCount,DescriptionEN,DescriptionDE,CreatedOn,ModifiedOn,CreatedBy,ModifiedBy")] LsystemFamily lsystemFamily)
{
lsystemFamily.CreatedOn = DateTime.Now;
lsystemFamily.CreatedBy = User.Identity.Name;
lsystemFamily.ModifiedOn = DateTime.Now;
lsystemFamily.ModifiedBy = User.Identity.Name;
lsystemFamily.LsystemCount = 0;
if (ModelState.IsValid)
{
if (db.LsystemFamily.Any(x => x.FamilyName.Equals(lsystemFamily.FamilyName)))
{
ModelState.AddModelError("FamilyName", "Family Name already Exists");
return PartialView("_Create",lsystemFamily);
}
db.LsystemFamily.Add(lsystemFamily);
db.SaveChanges();
return RedirectToAction("Index");
}
return PartialView("_Create",lsystemFamily);
}
What you exactly want to do, I mean if you want to show Create from on a button click then just create a partail view with Layout = null ie "_Create" ( no need an action for it), now just render this partial view in the div that you are toggling:
<div id="Create" style="display:none">
@Html.Partial("_Create")
</div>
and on the submission of create request if you want to refresh your index page then either you can user Ajax.BeginForm in _create view or you can post it by jquery ajax.
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#Create').toggle();
});
});
</script>
You are trying to access #btn
by ID, but you set it as class. btn
is a class name.So JQuery can't find your button.Do like this
<script type="text/javascript">
$(document).ready(function () {
$('.btn').click(function () {
$('#Create').toggle();
});
});
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.