Display Data on Dialogbox without reloading page

user_8148164 0
Viewed 310

am trying to display bootstrap dialog box with ID + Name + Price on it.

Then if user choose YES on the dialog, it must hit the Action method where there’s delete function and refresh the data on the page to see the change without reloading the page.

Also I don’t want after it hits the Delete user action method, it must not display its View.

I tried to use ViewBag from the below code but it doesn’t show me the ID + Name + Price on the Bootstrap Dialogbox, and doesn’t redirect to delete action method, and doesn’t refresh the page

enter image description here

@model IEnumerable<School.Models.ApplicationUser>

<hr>

    <table class="table table-responsive table-hover">

        <tbody>
            @foreach (var item in Model.OrderBy(x => x.DateTime))
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.ID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>

                    <td>

                        <span style="color: #ff0000;">
                            <a class="btn btn-warning btn-sm disclaimer-dialog">
                                    <i class="fa fa-unlock">&nbsp;</i>Delete  
                                    ViewBag.MyId = @item.Id;                              
                                </a>

                        </span>
                         &nbsp;

                    </td>
                    @ViewBag.MyId
                </tr>
            }
        </tbody>
    </table>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/Scripts/Views/SchoolAccounts/Delete.js")
}


<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="disclaimerModalDialog" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="exampleModalScrollableTitle">Confirmation Deletion</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p><strong>Are you sure you want to reset password for user ? @ViewBag.MyId </strong></p>

                @using (Html.BeginForm("DeleteProduct", "SchoolAccounts",

                    FormMethod.Post, new
                    {
                        @id = "delete-form",
                        role = "form"
                    }))
                {
                    @*@Html.HiddenFor(m => m.Id)
                        @Html.AntiForgeryToken()*@
                }
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        onclick="$('#delete-form').submit();">
                    Yes
                </button>
                <button type="button" class="btn btn-primary"
                        data-dismiss="modal">
                    No
                </button>
            </div>
        </div>
    </div>
</div>

Content of Delete.js

$(function () {

    $('.disclaimer-dialog').click(function () {
        $('#disclaimerModalDialog').modal('show');
    });

});
knockout.js asp.net-mvc jquery javascript
1 Answers

ViewBag can't be used like that. Once ViewBag is rendered on a page, you can't update its value. All razor variables are static once the page has finished loading.

What we need to do is assign those values on the html attributes.

  1. Modify the link in your loop to have data-properties. I used data-id, data-name, data-price;
@foreach (var item in Model.OrderBy(x => x.DateTime))
{
   <tr>
      @*just modify the link in the last column*@

      <td>
         <span style="color: #ff0000;">
            <a data-id="@item.Id" data-name="@item.Name" data-price="@item.Price" class="btn btn-warning btn-sm disclaimer-dialog">
               <i class="fa fa-unlock">&nbsp;</i>
               Delete                           
            </a>
         </span>
      </td>
   </tr>
}
  1. Modify your Delete.js to access those attributes and replace the content of the modal.
$(function () {

    $('.disclaimer-dialog').click(function () {

        // get attributes from the button
        var id = $(this).data("id");
        var name = $(this).data("name");
        var price = $(this).data("price");

        // Assign value to delete-id
        $(".delete-id").val(id);

        // update the first paragraph in modal-body
        $('#disclaimerModalDialog').find(".modal-body p").eq(0).html("Are you sure you want to delete "+id+"-"+name+"-"+price+"?");

        $('#disclaimerModalDialog').modal('show');
    });

});
  1. In your modal body, use this for the input field. We need to add a class so we can easily access it;
@Html.HiddenFor(m => m.Id, new { @class="delete-id" });
  1. Add this function to your Delete.js
$(function(){
   $("#delete-form").submit(function(e){
      // this will stop the page from refreshing or redirecting
      e.PreventDefault();

      var deleteId = $(".delete-id").val();
      var passData = { id:deleteId };

      // ajax call here
      $.ajax({
        type: "POST",
        url: "/ControllerName/DeleteAjax",
        data: JSON.stringify(passData),
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function(result){
           alert(result);

           // find the link with data-id == deleteid
           // .parent() = span
           // .parent().parent() = td
           // .parent().parent().parent() = tr
           // .remove() = remove that row

           $("table a[data-id='"+deleteId+"']").parent().parent().parent().remove();
        },
        error: function(err){
           alert(err);
        }
      });
   });
});
  1. In your controller, add this function. DeleteAjax;
[HttpPost]
public ActionResult DeleteAjax(string id)
{
   var product = context.Products.FirstOrDefault(p=>p.Id == id);

   if(product == null){
      return Content("error, cant find Id")
   }else{
      context.Products.Remove(product);
      context.SaveChanges();
      return Content("successfully deleted");
   }
}
user_56407370
Related