How to open Partial View in Modal Popup on click of button.

Ramco Ramco

How to open Partial View in Modal Popup on click of button.. Can we pass Action ("Delete") & Controller ("Location") thru variables

so that same Delete Partial View can be used whereever it is required.

Partial View

*************

@using (Html.BeginForm("Delete", "Location", FormMethod.Post))
{

}

15 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
to remove the starting and trailing spaces you just need to call the Trim() method and nothing
string Locationid=Id.Trim();
+2
Ramco Ramco5y ago
Hi Sachin

It shows ID value to right aligned . I am using this in controller but it is not working. How i should Trim the spaces

Id = Regex.Replace(Id, @"\t|\n|\r", "");

Thanks
+2
Sachin Singh5y ago
in your code the equals to sign is missing, paste below code and it will work
$('body').on('click', '[id*=btnDelete]', function (e) {
e.preventDefault();
var data = $(this).parents('tr').find('td');
Id = data.eq(0).html();
$.get("/Location/Delete", function (data) {
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete?Id=' + Id);
$("#deleteModal").modal('show')
})
})
+2
Ramco Ramco5y ago
Hi Sachin

In Controller value in Id is null

$('body').on('click', '[id*=btnDelete]', function (e) {
e.preventDefault();
var data = $(this).parents('tr').find('td');
Id = data.eq(0).html();
$.get("/Location/Delete", function (data) {
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete?Id' + Id);
$("#deleteModal").modal('show')
})
})

****
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Delete(string Id)
{
try
{
int result = dbLocation.Delete(Id);
if (result == 1)
{
TempData["Message"] = "Successfully Deleted.";
}
else
{
TempData["Message"] = "Error Encountered.";
}
}
catch (Exception ex)
{
ExceptionLogging.SendExcepToDB(ex);
TempData["Message"] = "Error Encountered.";
}
return RedirectToAction("Index");
}

Thanks
+2
Sachin Singh5y ago
your syntax is incorrect in this line $('#deleteForm').attr('action', '/Location/Delete')+Id;
follow below code
$('body').on('click', '[id*=btnDelete]', function (e) {
e.preventDefault();
var data = $(this).parents('tr').find('td');
Id = data.eq(0).html();
alert(Id);
$.get("/Location/Delete", function (data) {
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete?Id'+Id);
$("#deleteModal").modal('show')
})
})
or you can also set the id in a hidden field before opening the modal
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete?Id'+Id);
$("#yourHiddenFieldId").val(Id);
$("#deleteModal").modal('show')
+2
Ramco Ramco5y ago
Hi Sachin

Popup also not open & get this error -
Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Alert message gets printed

$('body').on('click', '[id*=btnDelete]', function (e) {
e.preventDefault();
var data = $(this).parents('tr').find('td');
Id = data.eq(0).html();
alert(Id);
$.get("/Location/Delete", function (data) {
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete')+Id;
$("#deleteModal").modal('show')
})
})
************* Controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Delete(string Id)
{
try
{
int result = dbLocation.Delete(Id);
if (result == 1)
{
TempData["Message"] = "Successfully Deleted.";
}
else
{
TempData["Message"] = "Error Encountered.";
}
}
catch (Exception ex)
{
ExceptionLogging.SendExcepToDB(ex);
TempData["Message"] = "Error Encountered.";
}
return RedirectToAction("Index");
}

Thanks
+1
Sachin Singh5y ago
use
class="modal" tabindex="-1" role="dialog" id="deleteModal">
"" method="post" id="deleteForm">
class="modal-dialog" role="document">
        class="modal-content">
            class="modal-header">
                class="modal-danger">Delete Confirmation
class="modal-body">
@html.AntiForgeryToken()
Are you sure you want to delete this record ?

class="modal-footer">

"button" class="btn btn-secondary" data-dismiss="modal">Cancel

"submit" class="btn btn-danger">Delete

Ramco Ramco5y ago

Hi Sachin

AnyDiv was not defined . MOdal Poup is opening but when i click on Delete i gets below error

The required anti-forgery cookie "__RequestVerificationToken" is not present.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.Web.Mvc.HttpAntiForgeryException: The required anti-forgery cookie "__RequestVerificationToken" is not present.

In place of form tag can't we use @using (Html.BeginForm).

Thanks

Sachin Singh5y ago

anchor tag has a specific purpose, why don't you simply use the button.

"btnDelete" type="button" class="btn btn-danger btn-sm" style='margin-left:5px'>class='fa fa-trash'> Delete

$("#btnDelete").click(function(){
$.get("/Common/getDeleteModal",function(data){
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete');
$("#deleteModal").modal('show')
})
})

Ramco Ramco5y ago

Now when i have put href="#" in anchor tag then it has gone in Js function. Modal popup has not opened yet

Thanks

Sachin Singh5y ago

after the modal opens and you click delete, there must be an Id of the currently selected row that should go to the controller's Delete Action, where you have written the logic for delete.

Ramco Ramco5y ago

Hi Sachin

Nothing is happening on click of btnDelete

Delete

***** JS

$('body').on('click', '[id*=btnDelete]', function (e) {

e.preventDefault();

alert("hello");

$.get("/Location/Delete", function (data) {

$("#AnyDiv").html(data);

$('#deleteForm').attr('action', '/Location/Delete');

$("#deleteModal").modal('show')

})

*** Modal

Are you sure you want to delete this record ?

** Controller

[HttpGet]

public ActionResult Delete()

{

return PartialView("_DeletePartial");

}

Thanks

Sachin Singh5y ago

during delete click

$("#btnDelete").click(function(e){
e.preventDefault();
$.get("/Common/getDeleteModal",function(data){
$("#AnyDiv").html(data);
$('#deleteForm').attr('action', '/Location/Delete');
$("#deleteModal").modal('show')
})
})

Asma Khalid5y ago

Look into this https://bit.ly/2Ze0FUe

Mark answer as accepted if helpful

Thanks & Regards,

Asma Khalid

For More Visit: www.asmak9.com or www.bytezaar.com

Sachin Singh5y ago

step 1. Change the partial view as

  

  
          
              
                Delete Confirmation  
              
              
                Are you sure you want to delete this record ?

create a common controller for common functionalities and return the partial view

public ActionResult getDeleteModal()  
{
    return PartialView("_DeletePartial");  
}

step 3. Call it using ajax and change the action attribute of form as

$.get("/Common/getDeleteModal",function(){  
$('#deleteForm').attr('action', '/Location/Delete'); 
$("#deleteModal").modal('show')  
})