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();
    }

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

我希望模态立即消失。
返回上一个状态，其中有一个下拉列表，用于选择国家/地区和搜索按钮＆amp;＆amp;搜索结果表，我点击了一个按钮。

由于这涉及到ajax响应，我不确定如何使用正确的URL返回到先前的状态。

Answer 1

您必须在按钮视图（发布备注表单）中将表单提交为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＆amp;的json响应errorMessage属性（如果出错）

[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 });
  }
}

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

1 个答案: