Ajax表单提交至部分视图 [英] Ajax Form Submit to Partial View

问题描述

我正在局部视图中渲染表单，并且还希望在其中显示结果.表单提交没有任何反应.我知道控制器中用于查询数据库的逻辑是正确的，因为它以前曾以传统的HTML形式工作.

I'm rendering a form in a partial view and would also like the display the results there. Nothing is happening on form submit. I know the logic in the controller for querying the database is correct because it was working previously as a traditional HTML form.

有什么建议吗?

控制器:

public ActionResult nameSearch(DashboardViewModel model)
        {

  //do some stuff here; I'm certain this part works

            return PartialView("_nameSearch", model);

        }

部分视图:

@using (Ajax.BeginForm("nameSearch", "Dashboard", new AjaxOptions { HttpMethod = "POST" }))
{
    @Html.AntiForgeryToken()
    @Html.ValidationSummary("", new { @class = "text-danger" })

    <div class="row form-group">
        <div class="col-md-5">
            @Html.LabelFor(m => m.name, new { })
            @Html.TextBoxFor(m => m.name, new { @class = "form-control" })
        </div>
    </div>


}

                    <div class="row form-group">
                        <div class="col-md-5">
                            <input type="submit" class="btn btn-primary btn-block" value="Submit">
                        </div>
                    </div>

                    <table>
                        @if (IsPost)
                        {
                            foreach (var u in Model.listschools)
                            {
                                <tr>
                                    <td>
                                        <input type="checkbox" />&nbsp;@u.instnm<br />@u.city, @u.state<br />@u.url
                                    </td>

                                </tr>
                            }
                        }
                    </table>

推荐答案

在使用Ajax.BeginForm帮助器向搜索添加ajaxy行为时，应指定UpdateTargetId，以便不引人注目的ajax库知道哪个页面的一部分应使用ajax调用返回的结果进行更新.

When you are using the Ajax.BeginForm helper to add ajaxy behavior to your search, you should specify the UpdateTargetId so that the unobtrusive-ajax library knows which part of the page should be updated with the results coming back from the ajax call.

此外，您可能想返回另一个局部视图结果，其中仅包含结果项.您可以创建另一个名为_SearchResults.chtml的局部视图.

Also, you may want to return another partial view result, which has just the result items. You may create another partial view called _SearchResults.chtml.

在这里，我只是在使用时间戳和搜索关键字.您可以使用代码进行更新，以呈现要显示的数据的表格表示形式.

Here i am simply using the timestamp and the search keyword. You may update it with your code which renders the tabular representation of data you want to display.

<h3>@ViewBag.Title</h3>
<p>Search happened at @DateTime.Now.ToString()</p>   

现在在您的操作方法中，您将返回此新局部视图的局部视图结果.

Now in your action method, you will return partial view result of this new partial view.

public ActionResult Search(string term)
{
    ViewBag.Title = "Searching for : "+ term;
    // Replace the above with your actual code
    // which gets actual data and pass to the partial view
    return PartialView("_Search");
}

在上面的示例中，我只是通过ViewBag传递了一条消息.您可以通过传递项目列表(通过查询数据库生成)来替换它.

In the above example, I am simply passing a message via ViewBag. You may replace it by passing a list of items (generated by querying your database).

现在在其他视图中，使用Ajax.BeginForm辅助方法时指定UpdateTargetId选项.

Now in your other view, specify the UpdateTargetId option when using the Ajax.BeginForm helper method.

@using (Ajax.BeginForm("Search", "Home", new AjaxOptions { HttpMethod = "POST", 
                                                      UpdateTargetId = "searchResults" }))
{
    <div class="row form-group">
        <div class="col-md-5">
            <label>Name</label>
            <input type="text" name="term" />
        </div>
    </div>
}
<div id="searchResults"> </div>

当结果从服务器返回时，库将使用ID searchResults

When the results comes back from server, the library will update the result(the html markup generated by partial view result) inside the div with Id searchResults

这篇关于Ajax表单提交至部分视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！