asp.net mvc - Ajax 刷新视图的 foreach 元素答案

【问题标题】：asp.net mvc - Ajax refresh foreach element of a Viewasp.net mvc - Ajax 刷新视图的 foreach 元素
【发布时间】：2012-06-03 21:22:03
【问题描述】：

希望在退出 jquery 对话框后 ajax/刷新当前页面。

我有一个包含 foreach 循环的视图，数据是从模型中提取的，每个循环有 2 个按钮编辑/删除。当我单击“编辑按钮”时，会打开一个 jquery UI Dialog 进行编辑，当我保存 Jquery Dialog 时，我想要的是在退出对话框后 Ajax/Refresh 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>
    }
}

【问题讨论】：

您是否尝试过任何可用的 MVC 或 MVVM javascript 框架？看起来您正在寻找的是诸如骨干.js 或敲除.js 之类的东西
嗨，谢尔盖，不使用这些框架，我认为在 Jquery 中可能有一个解决方案来迭代来自 foreach 的项目？
好的，我明白了。可能这就是您正在寻找的 - api.jquery.com/serialize

标签： asp.net-mvc asp.net-mvc-3 jquery-ui jquery

【解决方案1】：

我的建议是使用 jQuery 从局部视图中加载要编辑/删除的信息。然后您可以从 jQuery 对话框中编辑/删除，完成后，只需再次使用 jQuery 重新加载该部分视图。

您视图上的代码类似于：

$(document).ready(function () {

    LoadInfo(); //Loads partial view

});

function LoadInfo() {

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

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

在你的控制器中：

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

        return PartialView("_MyPartialViewName", query);
    }

当您完成编辑/删除后，您可以再次调用 LoadInfo()，它会重新加载您页面的该部分。

希望这会有所帮助。

【讨论】：

嗨，你的建议很好，我可能需要用唯一的标识符来包含每个循环，以便通过 Jquery 调用进行 ajax 并刷新它，数据可以从另一个部分视图中获取对话框关闭。非常感谢洛佩兹和谢尔盖
嗨，很高兴知道我可能会有所帮助。就像 sergey 建议的那样，我通常使用 jsons (Json.Net) 处理我的大部分异步调用。基本上，视图向控制器发送一个 json 对象，获得响应，并采取相应的行动（页面重定向、加载部分视图等）。

【解决方案2】：

我在同一行上尝试了一些东西。由于我没有在一个地方找到完整的答案，这应该会有所帮助。

问题：编辑时如何避免回发 |删除视图中的行，尤其是那些由模型上的 foreach 循环生成的行。

以下是几个关键点：

确保此视图是一个局部视图，它是其他视图的一部分（对于初学者，它类似于在“_Layout”视图中调用“_LoginPartial”的方式）并且最好放置在具有唯一 ID 的分区中

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

例如，不要使用@Html.ActionLink()，而是使用任何 HTML 标记：

发件人：

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

收件人：

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

//控制器方法调用会在AJAX函数调用中处理

如果@item 或@Model.Element 是多字变量，如“A-B(2)”、“A_D_2-3.csv”等，请确保它们位于上述标记中的双引号之间
在主视图中编写 Jquery 函数调用（包含 Ajax 调用）（在“_Layout”视图中使用之前的类比）

下面是AJAX函数

$(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");
                    }
                });
            });
        });

控制器

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

局部视图

<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>

使用 AJAX 调用渲染视图

<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>

【讨论】：