I don't know why my "submit" button not responding. When I click on the edit button in each id, it can show a modal like this picture, so data is sent to the modal. But when I try to edit this data and click the button, it is not responding.
Here is my Index.cshtml
<div class="card-body">
<table id="datatablesSimple">
<thead>
<tr style="background-color:gray">
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>No</th>
<th>Name</th>
<th>Action</th>
</tr>
</tfoot>
<tbody>
#{ var stt = 1;}
#foreach (var item in ViewBag.List)
{
var itemName = "#exampleModalss" + item.id_category;
var itemName1 = "exampleModalss" + item.id_category;
<tr>
<td>#stt</td>
<td>#item.name</td>
<td>
<button type="button" class="btn btn-danger" data-bs-toggle="modal"
data-bs-target="#itemName">Edit</button>
</td>
</tr>
stt++;
<form action="/Category/edit" method="post">
<div class="modal fade" id="#itemName1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Category Book</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="resultss" class="modal-body">
<div class="row">
<div class="col">
<div class="">
<label for="category-film" class="col-form-label" style="font-weight:bold;width : 140px">Name Category: </label>
<input class="form-control" type="text" id="name" name="name" value=#item.name>
<input class="form-control" type="hidden" id="id_category" name="id_category" value=#item.id_category>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button style="width:100px" type="submit" class="btn btn-primary">Edit</button>
</div>
</div>
</div>
</div>
</form>
}
</tbody>
</table>
</div>
My Controller
[HttpPost]
public ActionResult edit(FormCollection form)
{
Category cat = new Category();
cat.id_category = Convert.ToInt32(form["id_category"]);
category.edit(cat);
return PartialView("Index", new { msg = "1" });
}
My DAO
public void edit(Category category)
{
var result = myDb.categories.SingleOrDefault(c => c.id_category == category.id_category);
result.name = category.name;
myDb.SaveChanges();
}
Here is my result when clicking on the Edit button with each id of the category book.
I get stuck in it few days, anyone can help me. I think
Edited for details
FormCollection is for list your form is just about a name and category id
then your model is not appropriate please change your model i mean create model class which contain name and category.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have a requirement where I need to display a Modal popup. When the user clicks on the link inside a grid, then that has to open a modal popup with the respective values.This is the partial view code.I am using in this i have placed the edit button after clicking on it it should show PopUp to edit the details and should save it to the database. can some one help me with this?
#model IEnumerable<LMS.ViewModels.TemporaryStaff.VMTemporaryStaffResponse>
<div class="card mt-4 mb-5 ml-3 mr-3">
<div class="card-body">
<p class="card-title">View TemporaryStaff</p>
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="order-listing" class="table">
<thead>
<tr>
<th class="label">Stafftemp ID</th>
<th class="label">StaffName</th>
<th class="label">Created On</th>
<th class="label">Status</th>
<th class="label">Edit</th>
<th class="label">View QR Code</th>
</tr>
</thead>
<tbody class="table-body">
#foreach (var item in Model)
{
<tr class="table-row">
<td>
#Html.DisplayFor(modelItem => item.StafftempID)
</td>
<td>
#Html.DisplayFor(modelItem => item.StaffName)
</td>
<td>
#Html.DisplayFor(modelItem => item.Createdon)
</td>
<td>
#if (item.Status)
{
<label class='badge badge-success'>Active</label>
}
else
{
<label class='badge badge-danger'>In-Active</label>
}
</td>
<td>
<a href="#Url.Action("GetTemporaryStaffById", "TemporaryStaff", item)">
<i class="fa fa-edit"></i>
</a>
#*<a onclick="showInPopup('#Url.Action("GetTemporaryStaffById", "TemporaryStaff", item)'"
class="btn btn-info text-white"><i class="fa fa-edit"></i></a>*#
</td>
<td>
<button type="submit" class="btn btn-success mr-2">QR Code</button>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
function OpenModal(recordId) {
$.ajax({
type: "GET",
url: "/TemporaryStaff/GetTemporaryStaffById",
datatype: "Json",
data: { id: recordId },
success: function (data) {
$('body').append($('<div id="divPopup"></div>'));
$("#divPopup").html(data);
$('#popupScreen').modal('show');
event.preventDefault();
return false;
},
error: function (error) {
event.preventDefault();
return false;
}
});
};
With this AJAX call, you can make a popup page with the values of object, you can send id as parameter, after that in controller, you can return a partial view, but you will design the partial view with name and id popupScreen. In controller you will have to use a parameter which name is id. Modal page looks like something below
#model Project.Models.TemporaryStaffModel
#{
//Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Ajax.BeginForm("StaffSave", "TemporaryStaff", null, new AjaxOptions { HttpMethod = "Post", OnSuccess = "OperationSuccess", OnFailure = "OperationFail" }, new { id = "StaffForm", name = "StaffForm" }))
{
<div class="modal draggable fade" id="popupScreen" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-popin modal-l">
<div class="modal-content">
<div class="block block-bordered">
<div class="block-header bg-gray-lighter">
<ul class="block-options">
<li>
<button data-dismiss="modal" data-toggle="tooltip" data-placement="right" title="Close" class="closePopupButton" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title">#ViewBag.Header</h3>
</div>
<div class="block-content">
<div class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">#Html.LabelFor(m => m.SaveDate)</label>
<div class="col-md-9">
#Html.DatePickerFor(m => m.SaveDate).HtmlAttributes(new { #Id = "dtpSaveDateIslem", style = "width:100%", required = "required", validationMessage = "Field Required" })
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-sm btn-primary" type="button" id="btnSave" name="btnSave" value="Save" onclick="ValidationControl()">
<i class="fa fa-save"></i> Save
</button>
<button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
<i class="fa fa-save"></i> Save
</button>
</div>
</div>
</div>
</div>
</div>
}
I am working on an ASP.Net Core MVC website where I have a page with datatable which has a button for every record which leads to further details of that record. When I click that details button, it works fine but when I refresh the details page, I encounter the above mentioned error. There are no any debugging errors as per my knowledge. Please help me out!!
Here is the code for the page with the datatable :
#model Derawala.Models.ViewModels.ParentForApply
#{
Layout = "_Layout";
}
<form method="post">
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-success">Application List</h2>
</div>
</div>
<br /><br />
#if (Model.AppList.Any())
{
<table id="myTable" class="table table-hover align-middle table-bordered table table-striped" style="width:100%">
<thead>
<tr>
<th class="text-center">
Applicant Name
</th>
<th class="text-center">
Contact No
</th>
<th class="text-center">
Institute Name
</th>
<th class="text-center">
Institute Contact
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model.AppList)
{
<tr>
<td class="text-center text-primary" style="font-weight:bold;">#obj.FirstName</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.Contact</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.Institute</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.InstCnt</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<button type="submit" asp-action="Details" asp-route-Id="#obj.Id" class="btn btn-primary mx-2">
<i class="fas fa-list"></i>
</button>
<a asp-action="Delete" asp-route-Id="#obj.Id" class="btn btn-danger mx-2">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>No Application Exists!</p>
}
</div>
</form>
This is the view of page with the datatable
When I click on the Details button(blue button), it leads to the details page shown below :
Here is the code for the Details Page :
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Details";
Layout = "_Layout";
}
<form method="post">
<input asp-for="#Model.Apply.PofId" hidden />
<div class="container backgroundWhite pt-4">
<div class="card" style="border:1px solid #000000; ">
#*<div class="card-header bg-dark text-light ml-0 row container" style="border-radius: 0px;">*#
<div class="card-header" style="background-color:black;">
<div class="row">
<div class="col-12 col-md-6 align-self-start">
<h1 class="text-white">#Model.Apply.FirstName #Model.Apply.LastName</h1>
</div>
<div class="col-12 col-md-6 align-self-end">
<h1 class="text-warning">Application Id :#Model.Apply.AppId</h1>
</div>
</div>
</div>
<div class="card-body">
<div class="container rounded p-2">
<div class="row">
<div class="col-12 col-lg-4 p-1 text-center">
<img src="#WC.ImagePath[0]#Model.Apply.Photo" class="rounded w-25" />
</div>
<div class="col-12 col-lg-8">
<div class="row pl-3">
<div class="col-12">
<span class="badge p-3 border" style="background-color:lightpink">#Model.Apply.Qualification</span>
<span class="badge p-3 border" style="background-color:lightskyblue">#Model.Apply.BankName</span>
<h3 class="text-success"></h3>
<p class="text-secondary">#Model.Apply.Description</p>
</div>
</div>
<div class="row pl-3">
<div class="col-12">
Download Id Proof : <button type="submit" class="btn-primary" asp-route-id="#Model.Apply.PofId" asp-action="DownloadFile">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-dark">
<div class="row">
<div class="col-12 col-md-6 ">
<a asp-action="RemoveFromCart" class="btn btn-primary btn-square form-control btn-lg" style="height:50px;">Donate Now <i class="fas fa-hand-holding-medical"></i></a>
</div>
<div class="col-12 col-md-6">
<button type="submit" asp-action="" class="btn btn-danger form-control btn-lg" style="height:50px;">Delete This Application <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
This is the view of details page :
and when I refresh this details page it gives me this HTTP 405 error :
Your Details action probably has [HttpPost] attribute and you call it using your submit button. But when you are trying to refresh the browser calls Get method. So you have to remove [HttpPost] from the details action, or create another one with [HttpGet].
I'm getting data from a SQL table and showing it in a partial view, via the below HTML table:
<div class="panel panel-primary">
<h3>Disclosure of Incentives Form</h3>
<br />
<table class="table table-condensed table-striped table-bordered" style="width:100%" id="DIFQuestions">
<thead>
<tr>
<th> Question</th>
<th> Outcome</th>
<th> Comments</th>
</tr>
</thead>
<tbody>
#For Each d In Model.DIFQuestions
#<tr>
<td hidden>#d.ID</td>
<td width="40%" >#d.Description</td>
<td width="10%">
<form id="outcomeRadios">
<input type="radio" name="DIFPassFail" id="outcomePass" value="True" /> Pass
<input type="radio" name="DIFPassFail" id="outcomeFail" value="Fail" /> Fail
</form>
</td>
<td>
<a href="#" class="difcomment" title="Add DIF Information">
<span class="fa fa-pencil"></span>
</a> Some text here
</td>
<td hidden>#d.Order</td>
</tr>
Next
</tbody>
</table>
<br />
<div class="col-md-12">
<button class="btn btn-success submitDIFAnswers">Submit</button>
</div>
<br>
As can be seen, I'm showing 3 fields: 'Question', 'Outcome' and 'Comments'. 'Question' comes from the SQL table, whereas 'Outcome' and 'Comments' are created dynamically via the for loop.
The font awesome pencil button on the 'Comments' field calls the below modal:
<div class="modal fade" id="addeditdifcomments" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add Comments</h3>
</div>
<div class="modal-body">
<div class="row alert">
<div class="col-md-6">
<textarea class="difinfo form-control" rows="3" id="difinfo" placeholder="Add DIF information" style="min-width: 200%;"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<Button type="button" Class="btn btn-success submitdifcomment">Submit</Button>
</div>
</div>
</div>
I'm having trouble submitting individual notes via the modal for each question. Below is the JQuery that shows the modal, and the one that's meant to save the note text for each row:
$(document).ready(function () {
$(".difcomment").click(function () {
$("#addeditdifcomments").modal('show');
});
$(".submitdifcomment").click(function () {
var difInfo = $(".difinfo").val();
$(".difcomment").val(difInfo);
$("#addeditdifcomments").modal('hide');
});
});
I hope all of this makes sense. Let me know if I need to provide further information.
Any sort of input would be appreciated. Thank you.
I've managed to do this by assigning the #d.ID as an id for my span tag, so each Comment would then have a unique id against it.
I would then save the id into a global variable, which I would reassign each time I'm clicking the pencil button on my Comment rows.
JQuery below:
// open modal to submit dif comment
$(".difcomment").click(function () {
questionID = $(this).parent('td').find('span').prop('id')
$('#addeditdifcomments').modal('show');
});
// submit comment
$(".submitdifcomment").click(function () {
var difInfo = $(".difinfo").val();
var path = "span#" + questionID;
$(path).text(difInfo);
$(".difinfo").val('');
$("#addeditdifcomments").modal('hide');
});
How would I do to when clicking the checkBox I call the action "ShowActives" of the controller?
This controller returns a list of elements that are active in the database.
How would I return these elements in the table?
my index is my default controller, clicking the checkBox I would like to call the ShowActives Action
public class CodigosDeOperacaoController : BaseController
{
public ActionResult Index()
{
return View(_codigosOperacionaisService.GetAll());
}
public ActionResult ShowActives ()
{
return View(_codigosOperacionaisService.GetActives());
}
}
My View
<div class="row">
<div class="col-md-12">
#using (Html.BeginForm("Index", "CodigosDeOperacao", FormMethod.Get))
{
<div class="row">
<div id="custom-search-input">
<div class="input-group col-md-12">
#Html.TextBox("buscar", null, new { #class = "form-control input", #placeholder = "Pesquisar por nome" })
<span class="input-group-btn">
<button class="btn btn-info btn" type="submit">
<big><i class="fa fa-search-plus"></i></big>
</button>
</span>
</div>
</div>
<div class="col-md-3 text-right">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Mostrar Todos</label>
</div>
<div class="col-md-6 text-right ">
<div>
<button type="button" id="btnNovo" class="btn btn-outline-primary btn-sm" style="min-width: 200px;">Novo código</button>
</div>
</div>
</div>
}
</div>
</div>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.Codigo)
</th>
<th>
#Html.DisplayNameFor(model => model.Descricao)
</th>
<th>Ações</th>
</tr>
#foreach (var item in Model)
{
if (!item.Ativo == false)
{
<tr style="background-color:aliceblue">
<td>
#Html.DisplayFor(modelItem => item.Codigo)
</td>
<td>
#Html.DisplayFor(modelItem => item.Descricao)
</td>
<td>
<a href="#Url.Action("Edit", "CodigosDeOperacao", new { id=item.Id })" class="btn btn-warning" style="margin-bottom: 3px" id="tamanho-botoes">
<span class="fa fa-edit"></span>
</a>|
<a href="#" class="btn btn-danger" style="margin-bottom: 3px" id="tamanho-botoes" onclick="iniciarExclusao('#item.Id')">
<span class="fa fa-ban"></span>
</a>
</td>
</table>
}
You can use Url.Action. Something like this should work:
<input type="checkbox" class="form-check-input" id="exampleCheck1"
onclick="location.href='<%: Url.Action("ShowActives", "CodigosDeOperacaoController") %>'" >
i have a delete button after the confirmation i want to call method.
but right now after model up is opened method can not be call from view to controller.
i want to call delete method after the confirmation on model popup click.if anyone has a solution please help me and if any other method for this gives an example.
here is my popup model
<div class="modal fade" id="confirmDelete" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Delete Parmanently</h4>
</div>
<div class="modal-body">
<p>Are you sure about this ?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger" id="confirm">Delete</button>
</div>
</div>
</div>
here is my jquery on same partial view page
<script type="text/javascript">
$('#confirmDelete').on('show.bs.modal', function (e) {
$message = $(e.relatedTarget).attr('data-message');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
});
$('#confirmDelete').find('.modal-footer #confirm').on('click', function(){
});
</script>
here is my view
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box box-primary" style="overflow-x:scroll;">
<div class="box-header">
<h3 class="box-title">Unit Detail</h3>
<div class="box_top_botton">
<a class="btn btn-md btn-primary" href="#Url.Action("AddUnit", "UnitMasters")">
<i class="glyphicon glyphicon-plus-sign"></i> Add Unit
</a>
</div>
</div><!-- /.box-header -->
<div class="box-body table-responsive">
<table class="table table-bordered table-striped example1">
<thead>
<tr>
<th></th>
<th>
#Html.DisplayNameFor(model => model.UnitId)
</th>
<th>
#Html.DisplayNameFor(model => model.UnitName)
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td nowrap style="font-size:14px !important;text-align:center !important;">
<a class="btn btn-xs btn-primary" href="#Url.Action("AddUnit", "UnitMasters", new { id = item.UnitId })">
<i class="glyphicon glyphicon-pencil"></i>
</a>
|
<a class="btn btn-xs btn-danger" href="#Url.Action("Delete", "UnitMasters", new { id = item.UnitId })" data-toggle="modal" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
<td>
#Html.DisplayFor(modelItem => item.UnitId)
</td>
<td>
#Html.DisplayFor(modelItem => item.UnitName)
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
#Html.Partial("DialogBox", "Home")
here is my controller
public ActionResult DeleteConfirmed(int id)
{
UnitMaster unitMaster = db.UnitMasters.Find(id);
db.UnitMasters.Remove(unitMaster);
db.SaveChanges();
return RedirectToAction("Index");
}
1) Make sure you have referenced to all of below jquery.js, bootstrap.css and bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
2) Add pass your #item.UnitId to data-id data attribute to your glyphicon-trash link like
<a class="btn btn-xs btn-danger" href="#" data-toggle="modal" data-id="#item.UnitId" data-target="#confirmDelete" data-title="Delete User" data-message="Are you sure you want to delete this user ?">
<i class="glyphicon glyphicon-trash"></i>
</a>
3) Make changes to your script like below
<script type="text/javascript">
var unitId = 0;
$('#confirmDelete').on('show.bs.modal', function (e) {
var message = $(e.relatedTarget).data('message');
$(this).find('.modal-body p').text(message);
var title = $(e.relatedTarget).data('title');
$(this).find('.modal-title').text(title);
unitId = $(e.relatedTarget).data('id');
console.log(unitId);
});
$('#confirmDelete').find('.modal-footer #confirm').on('click', function () {
var urlToDelete = '#Url.Action("DeleteConfirmed", "ControllerName")/' + unitId;
console.log(urlToDelete);
//Here is your ajax delete call with above url
});
4) Your modal popup will remain same no any changes
Output: