2

希望在退出 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>
    }
}
4

2 回答 2

4

我的建议是使用 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()，它会重新加载页面的该部分。

希望这可以帮助。

于 2012-06-03T21:52:58.143 回答
0

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

问题：如何在编辑时避免回发 | 删除视图中的行，尤其是那些由模型上的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 是多字变量，如“AB(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>
于 2016-05-17T21:32:02.197 回答