C# 如何将MVC局部视图放入灯箱?

C# 如何将MVC局部视图放入灯箱?,c#,javascript,jquery,asp.net-mvc-4,lightbox,C#,Javascript,Jquery,Asp.net Mvc 4,Lightbox,所以我有一个共享的布局。我想在那个布局上有一个搜索表单。搜索完成后,我想将结果返回到一个lightbox中。我不是JS最棒的。以下是我所拥有的: 共享布局: <div id="search-form"> @Html.Action("Search", "RespondentSearch") </div> <div id="search-results"> </div> SearchFormPartial视图: @using (Ajax.BeginF

所以我有一个共享的布局。我想在那个布局上有一个搜索表单。搜索完成后,我想将结果返回到一个lightbox中。我不是JS最棒的。以下是我所拥有的:

共享布局:

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

@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>
}
@使用(Ajax.BeginForm(“搜索”、“响应搜索”、FormMethod.Post、,
新选择
{
InsertionMode=InsertionMode.Replace,
HttpMethod=“POST”,
UpdateTargetId=“搜索结果”
},
新的
{
@class=“侧边栏搜索”
}
))
{
}
搜索结果部分:(这整张表就是我想在Lightbox中看到的)


这里的东西
我修复了它:

共享视图:

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

        <div id="search_results" style="display: none">
        </div>
共享视图中的表单(这一切的核心)


$('performSearch')。在('click',函数(){
$.ajax({
url:“@(url.Action(“搜索”、“响应搜索”)”,
键入:“POST”,
数据:{query:$('#query').val()},
cache:false,
async:true,
成功:功能(结果){
$(“#搜索结果”).html(结果);
}
});
});

您是要求jQuery代码调用
搜索(字符串查询)
操作,还是要求C代码过滤结果?对此,我将使用ajax调用。请看我的答案,我正在寻找将searchresults部分视图放入Lightbox的jquery代码不太确定我是否理解,您能解释一下吗?
<table>
<tr>
<td>Stuff in Here</td>
</tr>
</table>
        <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>