如何在禁用Javascript时优雅地处理AJAX PartialView更新

时间:2014-02-21 12:28:42

标签: c# asp.net-mvc asp.net-mvc-4 asp.net-ajax

我终于设法使用Ajax更新了PartialView。部分视图的目的是侧边栏窗口小部件,它显示注册的内容并允许从注册中删除项目。

PartialView的缩写版本如下:

<table id="item-entries">
    @foreach (var item in Model.Items)
    {
        <tr>
            <td>@item.Name</td>
            <td>@item.Price</td>
            <td>
                @using (Ajax.BeginForm("RemoveItemEntry", "Registration", new AjaxOptions { UpdateTargetId = "item-entries" }))
                {
                    <button type="submit" name="ItemId" value="@item.ItemId">×</button>
                }
            </td>
        </tr>
    }
</table>

以下是该行动的缩写示例:

[HttpPost]
public ActionResult RemoveItemEntry(ItemViewModel data)
    {
      // Perform logic to remove the item from the registration 
      // then return the PartialView with updated model

      return PartialView("~/Views/Partials/ItemEntries.cshtml", model);
    }
}

现在效果很好但是我不想为那些禁用JavaScript的人提供破解经验。如果您在禁用JavaScript的情况下发布表单,则操作仍会正确执行,但您将被重定向到呈现PartialView的URL,而不是其他任何内容。我想要发生的是,对于禁用JavaScript的用户,他们会被重定向回发布表单的原始页面。

这可以实现吗?

2 个答案:

答案 0 :(得分:2)

我的解决方案如下 -

在初始视图中,您可以按如下方式诱导cookie -

<script>
    document.cookie = "JSEnabled=1; path=/";
</script>

然后,对于启用JS的浏览器,当您进行POST时,cookie将进入Request,如下所示 -

enter image description here

当您禁用JavaScript浏览器时,Cookie将为null,如下所示 -

enter image description here

因此,根据该值,无论是null还是可用,根据您的要求制作重定向或返回视图()。

答案 1 :(得分:2)

所以你有两个选择:

第一个是将Action方法更改为以下内容:

[HttpPost]
public ActionResult RemoveItemEntry(ItemViewModel data)
{
    // Perform logic to remove the item from the registration 
    // then return the PartialView with updated model

    if (Request.IsAjaxRequest())
    {
          return PartialView("~/Views/Partials/ItemEntries.cshtml", model);
    }
    else
    {
          // return the initial View not the parial fie
    }
}

第二个选项是用一个调用返回初始View的Action方法的法线替换你的Ajax表单。然后你必须编写一个jQuery代码,在提交表单时进行AJAX调用,但是它会调用AJAX调用第二个返回PartialView的方法。