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

时间:2011-05-20 15:11:00

标签: jquery entity-framework asp.net-mvc-3 viewmodel

我试图找出一种方法来重新加载表,在每个按钮操作后。我正在考虑重新加载页面,但我不知道如何重新加载页面,然后将从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
        });
    }

已编辑:已添加输入字段。

1 个答案:

答案 0 :(得分:0)

重新加载它的一种方法是使用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包含表格:

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