Question

我正在使用jQuery Mobile构建网站。其中一个页面是部分视图<div id="page13">，它有一个简单的表单发送到使用Ajax.BeginForm设置的服务器。服务器上的操作方法更新数据库中的值。

原始部分视图应该替换为<div id="page13">的新版本。

实际发生的是<div id="page13">的新版本在旧版本之后插入。

如何用新的页面替换页面？

查看

<div data-role="page" data-theme="a" id="page13">
<div data-role="content">
    <div>
    @using (Ajax.BeginForm("ReinstateAlarms", "Mobile", new { EntityId = ViewBag.EntityId }, new AjaxOptions { UpdateTargetId = "page13", InsertionMode = InsertionMode.Replace, HttpMethod = "Post" }, new { }))
    {
        @Html.AntiForgeryToken()
        <label for="">Reinstate Alarms</label>
        <button type="submit" value="Search" >Submit</button>
    }
    </div>
<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer-div" class="footer-div" >
<div data-role="navbar">
    <ul>
        <li><a href="#page1" data-transition="fade" data-icon="home">Final Home</a></li>
        <li><a href="#page4" data-transition="fade" data-icon="grid">Panel</a></li>
    </ul>
</div>

实际表单标记

<form action="/m/ReinstateAlarms/9665" data-ajax="true" &#39;slideup&#39;, true, false);" data-ajax-method="Post" data-ajax-mode="replace" data-ajax-update="#page13" id="form1" method="post">

控制器

    public ActionResult PanelAlarms(string EntityId)
    {
        return PartialView("~/Views/Mobile/Partial/PanelAlarms.cshtml");
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult ReinstateAlarms(string EntityId)
    {
        //Do some databse stufff
        return PanelAlarms(EntityId);
    }

Answer 1

以下是我完成提交表单并使用更新版本刷新页面的方法。

我使用了常规<form>，而不是Ajax.BeginForm（）。 data-ajax必须设置为false。

<强>表格

<form id="meterForm" data-ajax="false">
      @Html.AntiForgeryToken()
      <label for="MeterReadingHours">Update Meter Reading</label><br />
      <input type="number" aria-valuemin="1" aria-required="true" name="MeterReadingHours" />
      <button type="submit" value="Update" >Update</button>
</form>

然后使用jquery绑定一个函数来提交表单。 e.preventDefault();阻止提交表单。设置常规$.post() function以提交表单。然后在响应中，使用$().load()从ActionResult创建原始版本的任何内容中获取<div data-role="content">的新版本。 load（）允许您指定要插入的远程文档的一部分。这里我们只需要内容div，因此我们在URL后面指定div[data-role="content"]。

如果你停在这里，并运行脚本一切都会工作 - 但新内容div将显示为纯文本而不应用jquery样式。要强制更新，请将函数$('#page15').trigger('create');传递给.load（）的完整属性。这将导致新插入的元素由jQuery初始化。

脚本

$(document).ready(function () {
$('#meterUpdateForm').bind('submit', function (e) {
    e.preventDefault();
    $.post(
        '@Url.Action("MeterReadingUpdate", "Mobile", new { EntityId = ViewBag.EntityId })',
        $(this).serialize(),
        function (response) {
            $('#page15 div[data-role="content"]').load(
                 '@Url.Action("MeterReading", "Mobile", new { EntityId = ViewBag.EntityId }) div[data-role="content"]', 
                 function () {
                     $('#page15').trigger('create');
                 });
             });
         });
     });
 });

在使用MVC 4和jQuery Mobile提交表单后，使用InsertionMode.Replace替换当前页面

1 个答案: