0

だから私は共有レイアウトを持っています。そのレイアウトに検索フォームが欲しいです。検索が行われたら、結果をライトボックスに返したいと思います。私はJSで最高ではありません。ここに私が持っているものがあります:

共有レイアウト:

<div id="search-form">
@Html.Action("Search", "RespondentSearch")
</div>
<div id="search-results">
</div>

コントローラ：

[HttpGet]
[Whitelist]
public ActionResult Search()
{
     return PartialView("_SearchFormPartial");
}

[HttpPost]
[Whitelist]
public ActionResult Search(string query)
{
     return PartialView("_SearchResultsPartial");
}

SearchForm部分ビュー:

@using (Ajax.BeginForm("Search", "RespondentSearch", FormMethod.Post,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            UpdateTargetId = "search-results"
        },
        new
        {
            @class = "sidebarSearch"
        }
        ))
{
    <div>
        <input type="text" name="search" placeholder="respondent search..." id="ac" class="ui-autocomplete-input" autocomplete="off" />
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input type="submit" value="" rel="lightbox" />
    </div>
}

検索結果の一部: (この表全体は、ライトボックス内に表示したいものです)

<table>
<tr>
<td>Stuff in Here</td>
</tr>
</table>
4

1 に答える 1

1

それを私が直した：

共有ビュー:

        <div id="RespondentSearch">
            @Html.Action("Search", "RespondentSearch")
        </div>

        <div id="search_results" style="display: none">
        </div>

コントローラ：

[HttpGet]
[Whitelist]
public ActionResult Search()
{
     return PartialView("_SearchFormPartial");
}

[HttpPost]
[Whitelist]
public ActionResult Search(string query)
{
     return PartialView("_SearchResultsPartial");
}

共有ビューのフォーム (すべての心臓部)

<div class="sidebarSearch">
    <input type="text" name="query" placeholder="respondent search..." id="ac" class="ui-autocomplete-input" autocomplete="off" />
    <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
    <a href="#search_results" rel="lightbox" id="performSearch"></a>
</div>

<script>
    $('#performSearch').on('click', function () {
        $.ajax({
            url: "@(Url.Action("Search", "RespondentSearch"))",
            type: 'POST',
            data: { query: $('#query').val() },
            cache: false,
            async: true,
            success: function (result) {
                $("#search_results").html(result);
            }
        });
    });
</script>
于 2013-10-21T16:11:59.107 に答える