asp.net mvc - Ajax refresh foreach element of a View

Question

wish to ajax/refresh the current page after quitting a jquery dialog.

I am having a View which contains a foreach loop, the data is pulled down from a model, there are 2 buttons edit/Delete for each loop. When I click on the 'edit button', a jquery UI Dialog is opened for editing, when I save the Jquery Dialog, what I want is to Ajax/Refresh the datas of the View after quiting the dialog (especially the edited datas of course).

How can I achieve it ?

Thanks

this is My View:

@{
    foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.IdPhoto)
            </td>
            <td>
                @Html.TextAreaFor(modelItem => item.Date)
            </td>
            <td>
                @Html.TextAreaFor(modelItem => item.Nom)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Category)
            </td>
            <td>
                @Html.CheckBoxFor(modelItem => item.Actif)
            </td>
            <td>

            <button class="Edit" value="@item.IdPhoto">Edit</button> 
            <button class="Delete" value="@item.IdPhoto">Delete</button> 

            </td>
        </tr>
    }
}

Answer 1

I was trying something on the same lines. Since i didn't find a complete answer at one place, this should help.

Issue: How to avoid post backs while Editing | Deleting the rows in view especially those that are generated by the foreach loop on a model.

Below are few key points:

• Make sure this view is a partial view which is part of other view (For beginners it is similar to how "_LoginPartial" is called in "_Layout" view) and is placed preferably in a division with unique ID

<div id="PartialView">
    @Html.Partial("PartialView", Model) 
</div>

• Instead of using @Html.ActionLink() use any HTML tag for instance:

From:

@Html.ActionLink("DisplayText", "Method", "Controller", new { Var1=
@model.element1, var2=@Model.Element})

To :

<input type="button" class="UniqueClassName" value="Delete"
Var1="@item" var2="@Model.Element">

//The controller method call will be dealt in the AJAX function call

• if @item or @Model.Element are multi word variables like "A-B(2)","A_D_2-3.csv" etc ensure ther are between double quotes in tag above

• Write the Jquery function call(that contain the Ajax call) inside the main view ( using previous analogy inside "_Layout" view)

• Below is the AJAX function

  $(document).ready(function () {
  // $(document) in teh below line is the KEY. 
  //It tells any button click that has classname equals UniqueClassName
              $(document).on('click', '.UniqueClassName', function () {
                  var formData = new FormData();
                  var FuncParam1 = $(this).attr('Var1');
                  var FuncParam2 = $(this).attr('Var2');
                  formData.append("MethodParamName1", FuncParam1 );
                  formData.append("MethodParamName2", FuncParam2 );
                  $.ajax({
                       data: formData,
                      type: "POST",
                      url: '/Controller/Method',
                      contentType: false,
                      processData: false,
                      success: function (response) {
                          $('#PartialView').html(response); 
   // Make sure the name after # is same as id of <div> where partila view is placed
                      },
                      error: function (error) {
                          alert("errror");
                      }
                  });
              });
          });
  

  • Controller

public ActionResult Method(string MethodParamName1, string MethodParamName2)
  {
     \\ Write your logic
     \\ Construct your object to return to partial view
     return View(Model);
  }

• Partial View

<table class="table">
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item)
            </td>
            <td>
                <input type="button" class="buttonDelete" value="Delete File" Fname="@item" ProjectName="@Model.ProjectName">
            </td>
                 .....
            </td>
        </tr>
    }
</table>

• Rendering View with AJAX Call

<html>
<head>
    <title>Upload Example</title>
    <script src="~/Scripts/jquery-1.10.2.intellisense.js"></script>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script>
       $(document).ready(function () {
// $(document) in teh below line is the KEY. It tells any button click that has classname equals UniqueClassName
            $(document).on('click', '.UniqueClassName', function () {
                var formData = new FormData();
                var FuncParam1 = $(this).attr('Var1');
                var FuncParam2 = $(this).attr('Var2');
                formData.append("MethodParamName1", FuncParam1 );
                formData.append("MethodParamName2", FuncParam2 );
                $.ajax({
                     data: formData,
                    type: "POST",
                    url: '/Controller/Method',
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        $('#PartialView').html(response); 
                   // Make sure the name after # is same as id
                   // of <div> where partila view is placed
                    },
                    error: function (error) {
                        alert("errror");
                    }
                });
            });
        });

    </script>

</head>
<body>
    <div id="PartialView">
        @Html.Partial("PartialView", Model)
    </div>
......
......
 EXTRA FEILDS IF ANY
......
......

</body>
</html>

Answer 2

My suggestion is to load the information you want to edit/delete from a partial view using jQuery. Then you can edit/delete from your jQuery dialog and when you are done, just reload that partial view using jQuery once again.

The code on your view would be something along the lines of:

$(document).ready(function () {

    LoadInfo(); //Loads partial view

});

function LoadInfo() {

    $.get("MyAction", { param1 : myParameter }, function (data) {

        $("#mydata").empty();
        $("#mydata").html(data);
    });
}

And in your Controller:

    [HttpGet]
    public virtual ActionResult MyAction(parameters)
    {
        var query = GetMyDataModel();

        return PartialView("_MyPartialViewName", query);
    }

And when you are done editing/deleting, you can call LoadInfo() once again and it will reload that part of your page.

Hope this helps.