locked
Delete records in ASP.NET MVC using JavaScript to call ActionResult Delete(int id) RRS feed

  • Question

  • User-34860367 posted
    @model IEnumerable<SampleWeb.ViewModels.News>
    <h2 class="page-header">News</h2>
    if (Model != null)
    {
       foreach (var post in Model)
       {
    <div class="row">
        <div class="col-md-12">
            <span class="pull-right">
                <a href="#" id=@post.NewsId onclick="promptDelete();">
                    <span style="color:red; data-toggle="tooltip" data-placement="top" data-trigger="hover" title="Delete news">
                        <i class="fa fa-remove fa-lg"></i>
                    </span>
                </a>
            </span>
        </div>
        }
        <h2>@post.Title</h2>
        <div>
            Posted on <i>@post.CreateDate</i><br />
            <p>@post.Body</p>
        </div>
    </div>
        }
    }
    
    How do I get the value of id from id=@post.NewsId to pass to promptDelete() Jquery function for deleting the selected record in above model?
    
    I have tried:
    var id = $("this").attr("id") or id = $("this").prop("id")
    
    but the id value is undefined when debugging in VS. I need to get real value of id for selected record to be deleted.
    
    Any help is much appreciated. Thanks.
    

    Saturday, April 20, 2019 4:26 AM

Answers

  • User-34860367 posted

    Hello all,

    Finally I found the solution as follows:

    1. @*hidden field for storing current newsId*@
        <input type="hidden" id="hiddenNewsId" />

    2. <div class="pull-right">
    <a href="#" class="delete-icon" id="@post.NewsId" onclick="promptDelete(@post.NewsId);">
    <span style="color:red" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="Delete news">
    <i class="fa fa-remove fa-lg"></i>
    </span>
    </a>
    </div>

    3.  var promptDelete = function (NewsId) {
    $("#hiddenNewsId").val(NewsId);

    ...

    4.  function deleteNews() {

    var newsId = $("#hiddenNewsId").val();

    $.post('@Url.Action("Delete", "News")', { id: newsId })

    ...

    Thank you all.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 22, 2019 4:32 PM

All replies

  • User475983607 posted

    The most direct is passing the id as a function parameters when using the onclick attribute. 

    @{
        Layout = null;
        var id = "123";
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div>
            <div class="col-md-12">
                <span class="pull-right">
                    <a href="#" id="1" onclick="promptDelete('@id');">
                        Test
                    </a>
                </span>
            </div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            function promptDelete(id) {
                console.log(id);
            }
        </script>
    </body>
    </html>
    

    Pass "this" if you want to pass the <a>.

    @{
        Layout = null;
        var id = "123";
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div>
            <div class="col-md-12">
                <span class="pull-right">
                    <a href="#" id="1" onclick="promptDelete(this);">
                        Test
                    </a>
                </span>
            </div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            function promptDelete(elem) {
                console.log(elem.id);
            }
        </script>
    </body>
    </html>
    

    Write a click handler if you want to use jQuery.

    @{
        Layout = null;
        var id = "123";
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
    </head>
    <body>
        <div>
            <div class="col-md-12">
                <span class="pull-right">
                    <a href="#" id="@id" class="delete">
                        Test
                    </a>
                </span>
            </div>
        </div>
    
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $('.delete').click(function () {
                console.log($(this).attr('id'));
                console.log($(this).prop('id'));
            });
        </script>
    </body>
    </html>
    

    Saturday, April 20, 2019 11:12 AM
  • User-474980206 posted
    Your jquery is looking for an element with the tag name of this. Try:

    var id = $(this).attr("id")

    Also the code should be:

    <a href="#" id=“@post.NewsId” onclick="promptDelete();">
    Saturday, April 20, 2019 7:37 PM
  • User1520731567 posted

    Hi avt2k7,

    According to your descriptions,It seems that you are trying to code Delete function.

    I suggest you could refer to a scaffolded item.

    You could follow the steps below:

    Right click on Controllers -> Choose Add -> Choose 'MVC5 Controller with views, using Entity Framework', then Add-> Choose the Model you want to add CRUD to in 'Model class', then Add -> The controller with CRUD function is created.

    Then the  Index,Details,Edit,Delete...pages will be automatically generated.

    You can refer to how the delete module in the scaffold is implemented.

    Best Regards.

    Yuki Tao

    Monday, April 22, 2019 8:58 AM
  • User-34860367 posted

    Hello Bruce,

    I checked back my original code that I got same your code but I missed typo on yellow highlight problem statement. If I set the value for id, my delete function will work. So, I know something wrong when passing value thru parameter. Any other idea why the value is undefined. Thanks anyway.

    Monday, April 22, 2019 1:08 PM
  • User-34860367 posted

    Hello Yuki,

    I know how to do your preference way but I want to use AlertifyJS for delete function. Thanks anyway.

    Monday, April 22, 2019 1:09 PM
  • User-34860367 posted

    Hello all,

    Finally I found the solution as follows:

    1. @*hidden field for storing current newsId*@
        <input type="hidden" id="hiddenNewsId" />

    2. <div class="pull-right">
    <a href="#" class="delete-icon" id="@post.NewsId" onclick="promptDelete(@post.NewsId);">
    <span style="color:red" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="Delete news">
    <i class="fa fa-remove fa-lg"></i>
    </span>
    </a>
    </div>

    3.  var promptDelete = function (NewsId) {
    $("#hiddenNewsId").val(NewsId);

    ...

    4.  function deleteNews() {

    var newsId = $("#hiddenNewsId").val();

    $.post('@Url.Action("Delete", "News")', { id: newsId })

    ...

    Thank you all.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 22, 2019 4:32 PM