ASP.NET MVC 返回到之前的 ajax 状态（页面）

Question

我有用于测试目的的简单页面。所以我有一个索引页面，它有一个下拉列表来选择一个国家和一个搜索按钮，它会显示一些信息作为表格中的行列表。

@using (Ajax.BeginForm("GetList", "test", new AjaxOptions
{
    HttpMethod = "POST",    
    UpdateTargetId = "showResult"     
})) 

在我的控制器中，它返回一个局部视图。

[HttpPost]
    public ActionResult GetList(int CountryId)
    {            
        var model = db.Names
            .Include(x => x.Country)              
            .Where(x => x.Country.CountryId == CountryId).ToList();

        return PartialView("PartialPosting", model);
    }

在我的 PartialPosting 视图中，有一个按钮可以调用可以提交注释的模式对话框。

@model IEnumerable<test.Models.Names>
<table class="table table-hover">
    <tr>                   
        <th>Note</th>            
    </tr>

    @foreach (var item in Model)
    {    
        <tr> 
            <td>
                @Html.ActionLink("Button", "button", "test", null, new { @class = "btn btn-danger btn-xs", data_toggle = "modal", data_target = "#modal-container" })     
            </td>
        </tr>
    }
</table>   

<div id="modal-container" class="modal fade" tableindex="-1" role="dialog">    
    <div class="modal-content">        
        <div class="modal-body">            
        </div>
    </div>
</div>

当一个按钮被点击时，它会转到控制器中的一个按钮方法，该方法返回将以模态显示的视图

<div class="modal-body"> 

按钮方法：

public ActionResult Button()
    {    
        return View();
    }

按钮视图：

@model test.ViewModels.NoteViewModel

@using (Html.BeginForm("PostNote", "test", FormMethod.Post))
{
    @Html.AntiForgeryToken()

    @Html.TextAreaFor(model => model.Note) 

    <input type="submit" value="Submit" />
}

和 PostNote 方法：

    [HttpPost]
    public ActionResult PostNote(NoteViewModel model)
    {
        //codes

     --> ??  return RedirectToAction();
    }

一切正常， 但这是我的问题。当模态框提交注释时，

1. 我希望模态框立即消失。
2. 返回到之前的状态，那里有一个下拉列表来选择一个国家和一个搜索按钮 && 一个搜索结果表，其中我只是单击了一个按钮。

由于这涉及到 ajax 响应，我不确定如何将正确的 URL 带回之前的状态。

Answer 1

您必须将按钮视图（post note 表单）中的表单提交为 ajax 表单提交，并且在处理来自该表单的表单发布数据的 PostNote 操作方法中，返回一个 json 响应。在 ajax 表单提交的成功回调中，只需隐藏/关闭模态对话框，您将在第一页看到原始按钮和下拉菜单。

所以更新你的按钮视图 (Button.cshtml) 给表单一个Id，我们稍后将使用它来连接 ajaxified 表单提交事件。

@{
    Layout = null;
}
@model test.ViewModels.NoteViewModel

@using (Html.BeginForm("PostNote", "test", FormMethod.Post,new {id="postNoteForm"}))
{
    @Html.AntiForgeryToken()

    @Html.TextAreaFor(model => model.Note) 

    <input type="submit" value="Submit" />
}
<script>
    $(function() {

        $(document).on("submit", "#postNoteForm", function(e) {
                    e.preventDefault();
                    $.post($(this).attr("action"),$(this).serialize(),function(response) {

                        console.log('response from ajax call', response);
                        if (response.status === "success") {
                            $('#modal-container').modal('hide');
                        } else {
                            alert(response.errorMessage);
                        }
                    })
        });

    })
</script>

假设您的 PostNote httppost 操作方法返回带有 status 和 errorMessage 属性的 json 响应（以防出错）

[HttpPost]
public ActionResult PostNote(NoteViewModel model)
{
  try
  {
    // to do : Save data
     return Json(new {status="success"});
  }
  catch(Exception ex)
  {
     return Json(new {status="error", errorMessage = ex.Message });
  }
}