Ajax.BeginForm 刷新部分..？

Question

好的，我有一个使用ajax发布的表单......

<% using(Ajax.BeginForm(new AjaxOptions() { OnBegin="onBegin", OnSuccess = "onSuccess", OnFailure="onFailure"  })) { %>

在服务器端，我从控制器传回一个 Json 对象。 现在，当 OnSuccess 事件触发时，我可以使用“result.get_response().get_object()”来访问 Json 对象...

我的问题是，我需要能够使用 Json 对象中的项目列表刷新页面上的部分内容...

关于我如何做到这一点的想法..？

Answer 1

使用 jQuery，并遍历返回的 JSON 对象，构建您喜欢的任何内容。

例子：

  $.each(json, function(i, item) {
        //Add a dinner to the list on the right
        $('#dinnerList').append($('<li/>')
                              .attr("class", "dinnerItem")
                              .append($('<a/>').attr("href", "/Dinners/Details/" + item.ID)
                              .html(item.Name)).append("SomeThing"));
    });

Answer 2

我认为您会发现以下代码很有帮助。

首先，创建一个 AJAX 表单

• RefreshAjaxList：当前控制器的名称ajax动作
• string.empty（可选）
• AJAX 选项
• 表单 ID（可选）
• 当点击状态时，我们将编辑状态调用服务器以更新状态
• 编辑状态后，我们调用提交按钮调用RefreshAjaxList ； 按钮display:none
• 在这个例子中，我有一个控制器： AjaxController有 2 个动作：

public ActionResult UpdateStatus(int contactId, Status contactStatus)
{  
    ContactRepository repo = new ContactRepository();
    repo.UpdateStatus(contactId, contactStatus);
    return Json("success:true");
}

[AcceptVerbs(HttpVerbs.Post)]
[ActionName("RefreshAjaxList")]
public ActionResult RefreshContact()
{
    ContactRepository repo = new ContactRepository();
    IList<Contact> list = repo.List();
    return PartialView("AjaxUc/AjaxList", repo.List());
}

JavaScript：

var status = { active: 1, inactive: 0 };
function editStatus(cell, id, active) {
    if (active)
        cell.innerHTML = "<input type='radio' checked='true' name='active" + id + "' onclick='updateStatus(this, " + id + ", true);'>Active</input>" +
                             "<input type='radio' name='active" + id + "' onclick='updateStatus(this, " + id + ", false);'>Inactive</input>";
    else
        cell.innerHTML = "<input type='radio' name='active" + id + "' onclick='updateStatus(this, " + id + ", true);'>Active</input>" +
                             "<input type='radio' checked='false' name='active" + id + "' onclick='updateStatus(this, " + id + ", false);'>Inactive</input>";
}
    

function updateStatus(radio, id, active) {
    if (radio.checked != active) {
        if (confirm("Do you want to change the status of the contract?")) {
            if (active)
                cStatus = status.active;
            else
                cStatus = status.inactive;
            $.ajax({
                url: 'Ajax/UpdateStatus',
                dataType: "json",
                data: { contactId: id, contactStatus: cStatus },
                success: function(html) {
                    jQuery("#divAjaxList").submit();
                },
                error: function(request, desc, ex) {
                    alert(desc);
                }
            });
        }
    }
}

您的 ASP 脚本：

<% using (Ajax.BeginForm("RefreshAjaxList", "abc", new AjaxOptions() { UpdateTargetId = "divContent" }, new { @id = "divAjaxList" }))
   {%>
<div id="divContent">
    <table>
        <tr>
            <th>
            </th>
            <th>
                Id
            </th>
            <th>
                FirstName
            </th>
            <th>
                LastName
            </th>
            <th>
                Phone
            </th>
            <th>
                Email
            </th>
            <th>
                Status
            </th>
        </tr>
        <% foreach (var item in Model)
           { %>
        <tr>
            <td>
                <%= Html.ActionLink("Edit", "Edit", new { id = item.Id })%>
                |
                <%= Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ })%>
            </td>
            <td>
                <%= Html.Encode(item.Id)%>
            </td>
            <td>
                <%= Html.Encode(item.FirstName)%>
            </td>
            <td>
                <%= Html.Encode(item.LastName)%>
            </td>
            <td>
                <%= Html.Encode(item.Phone)%>
            </td>
            <td>
                <%= Html.Encode(item.Email)%>
            </td>
            <td ondblclick="editStatus(this,<%=item.Id %>, <%= item.Status.GetHashCode() %>);">
                <%= item.Status== Status.Active ? "Active" :"Inactive" %>
            </td>
        </tr>
        <% } %>
    </table>
    <input type="submit" id="refresh" style="display:none" />
</div>
<% } %>

欲了解更多信息，请发送邮件至 pnguyen2@firstlook.com 进行进一步讨论。

希望这可以帮助你。

Answer 3

您还可以使用JTemplate来呈现 JSON 数据

Answer 4

为要显示的项目列表创建用户控件，并通过将 json 数据传递给 UC 将其呈现为部分控件。 这将部分刷新