调用JQuery执行操作并显示消息后如何重新加载View

发布于 2024-11-08 06:04:29 字数 1781 浏览 0 评论 0原文

我试图找出一种在每次按钮操作后重新加载表格的方法。我正在考虑重新加载页面,但我不知道如何重新加载页面,然后将从 WebService 函数返回的消息打印到 div 中。

CSHTML 代码:

@model Namespace.Models.ItemModel
<div id="deleted" />
<input text id="curSelId" />
<input text id="curSelObj" />
<input text id="curSelfObjId" />
<table>
<tbody>
    @foreach (var item in Model.myDeleted)
    {
        <tr id="@item.DeletedId" value="@item.DeletedId">
            <td>@item.Timestamp</td>
            <td class="type">@item.Type</td>
            <td class="typeid">@item.TypeId</td>
        </tr>
    }
</tbody>
</table>

JQuery 代码:

function Undo()
    {
        $.ajax({
            type: "POST",
            url: "@Url.Content("~/webservices/retrieve.asmx/Undo")",
            data: "{'index': '" + $('[id$=curSelId]').val() + "'," +
                  "'type': '" + $('[id$=curSelObj]').val() + "'," +
                  " 'typeId': '" + $('[id$=curSelObjId]').val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                //http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/
                if (msg.hasOwnProperty("d")) {
                    // Leave the .d behind and pass the rest of
                    //  the JSON object forward.
                    var obj = msg.d;
                    $("#deleted").html(obj);
                }
                else {
                    // No .d; no transformation necessary.
                    AjaxSucceeded(msg, dropdown, hidden);
                }
            }
            , error: AjaxFailed
        });
    }

编辑:添加了输入字段。

I'm trying to figure out a way to reload the table, after each button action. I was thinking of reloading the page, but I don't know how I would reload the page, then print a message returned from the WebService function into the div.

CSHTML code:

@model Namespace.Models.ItemModel
<div id="deleted" />
<input text id="curSelId" />
<input text id="curSelObj" />
<input text id="curSelfObjId" />
<table>
<tbody>
    @foreach (var item in Model.myDeleted)
    {
        <tr id="@item.DeletedId" value="@item.DeletedId">
            <td>@item.Timestamp</td>
            <td class="type">@item.Type</td>
            <td class="typeid">@item.TypeId</td>
        </tr>
    }
</tbody>
</table>

JQuery code:

function Undo()
    {
        $.ajax({
            type: "POST",
            url: "@Url.Content("~/webservices/retrieve.asmx/Undo")",
            data: "{'index': '" + $('[id$=curSelId]').val() + "'," +
                  "'type': '" + $('[id$=curSelObj]').val() + "'," +
                  " 'typeId': '" + $('[id$=curSelObjId]').val() + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                //http://encosia.com/2009/06/29/never-worry-about-asp-net-ajaxs-d-again/
                if (msg.hasOwnProperty("d")) {
                    // Leave the .d behind and pass the rest of
                    //  the JSON object forward.
                    var obj = msg.d;
                    $("#deleted").html(obj);
                }
                else {
                    // No .d; no transformation necessary.
                    AjaxSucceeded(msg, dropdown, hidden);
                }
            }
            , error: AjaxFailed
        });
    }

Edited: Added input fields.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

a√萤火虫的光℡ 2024-11-15 06:04:29

重新加载它的一种方法是使用 AJAX:

@model Namespace.Models.ItemModel
<div id="deleted"></div>
<div id="mytable" data-url="@Url.Action("MyTable", "SomeController")">
    @Html.Partial("_MyTable", Model)
</div>

其中 _MyTable.cshtml 包含 table:

@model Namespace.Models.ItemModel
<table>
<tbody>
    @foreach (var item in Model.myDeleted)
    {
        <tr id="@item.DeletedId" value="@item.DeletedId">
            <td>@item.Timestamp</td>
            <td class="type">@item.Type</td>
            <td class="typeid">@item.TypeId</td>
        </tr>
    }
</tbody>
</table>

并在 ajax 请求的成功回调中重新加载 div:

success: function (msg) {
   var myTableDiv = $('#mytable');
   myTableDiv.load(myTableDiv.data('url'));
   ...
}

其中 MyTable 操作将呈现相同的部分:

public ActionResult MyTable()
{
    ItemModel model = ...
    return PartialView("_MyTable");    
}

One way to reload it would be to use AJAX:

@model Namespace.Models.ItemModel
<div id="deleted"></div>
<div id="mytable" data-url="@Url.Action("MyTable", "SomeController")">
    @Html.Partial("_MyTable", Model)
</div>

where _MyTable.cshtml contains the table:

@model Namespace.Models.ItemModel
<table>
<tbody>
    @foreach (var item in Model.myDeleted)
    {
        <tr id="@item.DeletedId" value="@item.DeletedId">
            <td>@item.Timestamp</td>
            <td class="type">@item.Type</td>
            <td class="typeid">@item.TypeId</td>
        </tr>
    }
</tbody>
</table>

and inside the success callback of your ajax request reload the div:

success: function (msg) {
   var myTableDiv = $('#mytable');
   myTableDiv.load(myTableDiv.data('url'));
   ...
}

where the MyTable action would render the same partial:

public ActionResult MyTable()
{
    ItemModel model = ...
    return PartialView("_MyTable");    
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文