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>
}
Related
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.
I'm trying to implement the sorting functionality of Datatables by clicking on the headers to sort.
I'm currently loading my data using a ForEach like so. Is there an easy way to implement the sorting functionality in my scripts? Thank you
<tbody>
#foreach (var fieldValidator in field.FieldValidators)
{
<tr>
<td>
#fieldValidator.Id
</td>
<td>
#fieldValidator.ValidatorType
</td>
<td>
#fieldValidator.ErrorMessage
</td>
<td>
#fieldValidator.Param1
</td>
<td>
#fieldValidator.Param2
</td>
<td>
#fieldValidator.Param3
</td>
<td>
#Html.ActionLink("Edit", "EditFieldValidator", new { fieldValidatorId = fieldValidator.Id, dynamicFieldId = field.Id, dynamicFormId = Model.DynamicForm.Id, vaccineTypeStatusId = Model.Id }, new { #class = "btn btn-primary mb-h" })
Delete
<div class="modal fade" id="confirm-delete-field-validator-#fieldValidator.Id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to permanently delete this field validator.</p>
<p><b>This action can NOT be undone.</b></p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
#Html.ActionLink("Delete", "DeleteFieldValidator", new { fieldValidatorId = fieldValidator.Id, vaccineTypeStatusId = Model.Id }, new { #class = "btn btn-danger" })
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
You just need to follow the guide in https://datatables.net/.
It has no problem if you used forEach. Here is a sample. Hope to help, my friend :))
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<div class="container">
<div class=" row">
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Serial Number</th>
<th>Age</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Employees)
{
<tr>
<td>
#item.Id
</td>
<td>
#item.Name
</td>
<td>
#item.SerialNumber
</td>
<td>
#item.Age
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
#section Scripts
{
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
}
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: