Question posted in 
I am trying to delete data from DB.but I am facing a problem. when I click the delete button I saw the unexpected result. I think this controller parameter can not found the parameter value. but I passed the value from View perfectly.
Here is my code:
passing data from view to the controller(Index.cshtml)(Please focus 2nd button "Delete")
@model IEnumerable<Practise.Models.Category>
@{
ViewData["Title"] = "Index";
}
<div id="PlaceHolderHere"></div>
<button type="button" class="btn btn-primary" data-toggle="ajax-model" data-target="#addEmployee" data-url="@Url.Action("Create")">Create</button>
</br></br>
<table class="table">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Id)
</th>
<th>
@Html.DisplayNameFor(model => model.CategoryName)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Id)
</td>
<td>
@Html.DisplayFor(modelItem => item.CategoryName)
</td>
<td>
@*<partial name="_ButtonPartial" model="@item.Id" />*@
<button type="button" class="btn btn-primary" data-toggle="ajax-model" data-target="#addEmployee" data-url="@Url.Action($"Delete/{item.Id}")">Delete</button>
</td>
</tr>
}
</tbody>
</table>
@section scripts{
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<script type="text/javascript">
$(function(){
var save = '@TempData["save"]'
if (save!= null) {
alertify.success(save);
}
})
</script>
}
Controller:
[HttpGet]
public IActionResult Delete(int id)
{
var category = _db.Category.Find(id);
return View(category);
}
[HttpPost]
public IActionResult Delete (Category scategory) //input parameter
{
_db.Category.Remove(scategory);
_db.SaveChanges();
return RedirectToAction(nameof(Index));
}
Delete.cshtml
@model Practise.Models.Category
@{
ViewData["Title"] = "Delete";
}
<div class="modal fade" id="#addEmployee">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="#addEmployeeLabel">Add Category</h4>
<button type="button" class="close" data-dismiss="modal">
<span>x</span>
</button>
</div>
<div class="modal-body">
<form asp-action="Delete" method="post">
<div class="form-group">
<label asp-for="CategoryName"> </label>
<input asp-for="CategoryName" class="form-control" />
<input asp-for="Id" class="form-control" />
<span asp-validation-for="CategoryName" class="text-danger"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
@*<button type="button" class="btn btn-primary" data-save="modal">Save</button>*@
<h1 class="text-danger">Are You Delete This Product?</h1>
<input type="submit" class="btn btn-primary" value="Delete" />
</div>
</form>
</div>
</div>
</div>
</div>
JS(site.js)
$(function () {
var PlaceHolderElement = $('#PlaceHolderHere');
$('button[data-toggle="ajax-model"]').click(function (event) {
var url = $(this).data('url');
var decodedUrl = decodeURIComponent(url);
$.get(decodedUrl).done(function (data) {
PlaceHolderElement.html(data);
PlaceHolderElement.find('.modal').modal('show');
})
})
PlaceHolderElement.on('click', '[data-save="modal"]', function (event) {
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
$.post(actionUrl, sendData).done(function (data) {
PlaceHolderElement.find('.modal').modal('hide');
})
})
})
Here is my output, when I click the delete button:
then I found an unexpected output:
but I want to delete this using the popup system. for that must work of my delete view as a popup. what’s wrong here I didn’t understand.
I am a beginner please help.
2
Answers
here my problem was, I did not properly pass "id".just change this, and it will perfectly work.
Already saw your answer about
id. When I first to saw your codes, I thought you need pop dialog about Delete , so I see some errors in youViewand updated for u.